python开发【第十二篇】：DOM-白红宇

python开发【第十二篇】：DOM

阅读量：4326 次

发布时间：2019-06-06

本文共 7018 字，大约阅读时间需要 23 分钟。

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

一、查找元素

1、直接查找

document.getElementById 根据

ID

获取一个标签

document.getElementsByName 根据name属性获取标签集合

document.getElementsByClassName 根据

class

属性获取标签集合

document.getElementsByTagName 根据标签名获取标签集合

2、间接查找

                            
parentNode          
/
/
父节点
childNodes          
/
/
所有子节点
firstChild          
/
/
第一个子节点
lastChild           
/
/
最后一个子节点
nextSibling         
/
/
下一个兄弟节点
previousSibling     
/
/
上一个兄弟节点
parentElement           
/
/
父节点标签元素
children                
/
/
所有子标签
firstElementChild       
/
/
第一个子标签元素
lastElementChild        
/
/
最后一个子标签元素
nextElementtSibling     
/
/
下一个兄弟标签元素
previousElementSibling  
/
/
上一个兄弟标签元素
         
       

二、操作

1、内容

                            
innerText   文本
outerText
innerHTML   HTML内容
innerHTML   
value       值
         
       

2、属性

attributes

// 获取所有标签属性

setAttribute(key,value)

// 设置标签属性

getAttribute(key)

// 获取指定标签属性

/*

var atr = document.createAttribute("class");

atr.nodeValue="democlass";

document.getElementById('n1').setAttributeNode(atr);

*/

1  2  3  4     
       5      6  7  8      9     10     11 12     
      
       13         
        14 15         
16         
        17             
         18                 
19                 
20                 
21             
22             
         23                 
24                 
25                 
26             
27             
         28                 
29                 
30                 
31             
32             
         33                 
34                 
35                 
36             
37         
38     
              
                                 111          222         
                          111          222         
                          111          222         
                          111          222         
       
      
39     83 84

	111	222
	111	222
	111	222
	111	222

View Code

3、class操作

                            
className                
// 获取所有类名
classList.remove(cls)    
// 删除指定类
classList.add(cls)       
// 添加类
         
       

4、标签操作

a.创建标签

                            
// 方式一
var
tag = document.createElement(
'a'
)
tag.innerText = 
"wupeiqi"
tag.className = 
"c1"
tag.href = 
"http://www.cnblogs.com/wupeiqi"
// 方式二
var
tag = 
"<a class='c1' href='http://www.cnblogs.com/wupeiqi'>wupeiqi</a>"
         
       

b.操作标签

                            
// 方式一
var
obj = 
"<input type='text' />"
;
xxx.insertAdjacentHTML(
"beforeEnd"
,obj);
xxx.insertAdjacentElement(
'afterBegin'
,document.createElement(
'p'
))
//注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
// 方式二
var
tag = document.createElement(
'a'
)
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])
         
       

5、样式操作

var

obj = document.getElementById(

'i1'

)

obj.style.fontSize =

"32px"

;

obj.style.backgroundColor =

"red"

;

复制代码

View Code

6、位置操作

总文档高度

document.documentElement.offsetHeight

当前文档占屏幕高度

document.documentElement.clientHeight

自身高度

tag.offsetHeight

距离上级定位高度

tag.offsetTop

父定位标签

tag.offsetParent

滚动高度

tag.scrollTop

/*

clientHeight -> 可见区域：height + padding

clientTop -> border高度

offsetHeight -> 可见区域：height + padding + border

offsetTop -> 上级定位标签的高度

scrollHeight -> 全文高：height + padding

scrollTop -> 滚动高度

特别的：

document.documentElement代指文档根节点

*/

12345678910111213141516171819202122232425262728    总文档高度document.documentElement.offsetHeight  当前文档占屏幕高度document.documentElement.clientHeight  自身高度tag.offsetHeight  距离上级定位高度tag.offsetTop  父定位标签tag.offsetParent  滚动高度tag.scrollTop /*    clientHeight -> 可见区域：height + padding    clientTop    -> border高度    offsetHeight -> 可见区域：height + padding + border    offsetTop    -> 上级定位标签的高度    scrollHeight -> 全文高：height + padding    scrollTop    -> 滚动高度    特别的：        document.documentElement代指文档根节点*/复制代码    
              
          
      
    
              
                       
        asdf
                
        asdf
                
        asdf
                
        asdf
                
        asdf
        
       
    
      
    复制代码

test

滚动固定

滚动菜单

滚动高度

7、提交表单

                            
document.geElementById(
'form'
).submit()

8、其他操作

                            
console.log                 输出框
alert                       弹出框
confirm                     确认框
 
// URL和刷新
location.href               获取URL
location.href = 
"url"
重定向
location.reload()           重新加载
 
// 定时器
setInterval                 多次定时器
clearInterval               清除多次定时器
setTimeout                  单次定时器
clearTimeout                清除单次定时器
         
       

三、事件

对于事件需要注意的要点：

this

event

事件链以及跳出

this标签当前正在操作的标签，event封装了当前事件的内容。

实例：

demo--搜索框

            
              欢迎blue shit莅临指导

demon--跑马灯

转载于:https://www.cnblogs.com/yehost/p/10325722.html

你可能感兴趣的文章

sencha touch list infinite 属性

查看>>

指令——cat

查看>>

RabbitMQ代码操作之发消息和序列化机制

查看>>

4.Dotnet-Core部署到IIS

查看>>

Guitar and Music Theory

SpringBoot整合ElasticSearch实现多版本的兼容

HDU - 4812 D Tree 点分治

查看>>

POJ 2763 Housewife Wind

查看>>

MinGW安装与配置

查看>>

【UVA11806 Cheerleaders】题解

iOS第三方做滤镜最主流的开源框架GPUImage

查看>>

一、查找元素

二、操作

第一章

第二章

第三章

第一章

第二章

第三章

第一章

第二章

第三章

三、事件