DOM对象之document对象

DOM对象：当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树。

打开网页后，首先看到的是浏览器窗口，即顶层的window对象。

其次，看到的是网页文档的内容，即document文档。

首先看一下w3c提供的document对象的定义和其他相关知识：

现在我们来详细的看一下document对象：

第一类：找元素

四种基本的找元素的方法

　　document.getElementById("d1");

　　根据id找元素，因为id是唯一的，只能找的一个元素

　　getElementsByClassName("c1");

　　根据class找元素，因为class不唯一，可以找到多个元素，返回数组

　　document.getElementsByTagName("div");

　　根据标签名找元素，因为标签名不唯一，可以找到多个元素，返回数组

　　document.getElementsByName("uname");

　　根据name找元素，主要用于表单元素，因为有单选等情况name不唯一，可以找到多个元素，返回数组

 1  2  3  4  5  6  7  8     
 9         
10         11     
12     
13     14     15 16 17 

id=d1的返回值a，找到div元素

class=c1的返回值数组b，b[1]，数组b中的第二个元素，找到span元素

标签=div的返回值数组c，c[0]，数组c第一个元素，找到div元素

name=uname的返回值数组d，d[0]，数组d的第一个元素，找到input元素

如上我们可以看出除了根据id找元素，其他方法找元素都可以找到多个，返回数组

复杂的找元素

a.childNodes[0]方法找该元素的子元素

 1  2  3  4  5  6  7  8     
 9         
10         11     
12     
13     14     15 16 17 

如上我们可以看出，找子元素会找到多个，返回的一定是数组，id为d1的元素内有5个子元素三个文本，一个div元素，一个span元素

注意：这个方法不仅找出了标签内的标签，还会找出文本，这里回车换行也被识别成文本写入了数组

a[xss_clean] 找父级元素

 1  2  3  4  5  6  7  8     
 9         
10         11     
12     
13     14     15 16 17 

父级元素只能有一个，如上是id=d1的元素的父级元素body元素

找同级元素

a.previousSibling 找上一个同级元素

a.nextSibling 找下一个同级元素

 1  2  3  4  5  6  7 
 8         
 9         10     
11     12     13 14 15 

在如上代码中，我们先让id=d1的元素紧贴跟前后不留回车等文本内容，得出上一个同级元素没有，下一个同级元素为div

第二类：控制元素

remove删除元素

createElement创建元素

appendChild追加元素

 1  2  3  4  5  6  7  8     
 9         
10         11     
12     
13     
14 15 16 

通过审查元素，我们可以看到id=d1的元素已被移除，id=d2的元素被追加了子元素

第三类：操作内容

普通元素的操作

innerText获取内容文本

innerHTML获取内容代码

 1  2  3  4  5  6  7  8     
 9         这是div中的span中的内容10     
11     
12         这是div2中的span中的内容13     
14     
15         这是div3中的span中的内容16     
17 18 19 

以上我们可以看出innerText只会获取内容文本，而innerHTML会将内容代码一起获取

这两个方法不仅可获取内容，还可以赋值写入内容，赋值写入的内容会替换原来的内容，并且通过innerHTML赋值写入的内容会和正常代码一样在网页中生效

表单元素的操作

 1  2  3  4  5  6  7  8      9 10 11 

如上我们可以通过调用value来给表单元素赋值和取值。

第四类：操作属性

setAttribute(属性名,属性值)设置属性

removeAttribute(属性名)移除属性

getAttribute(属性名)获取属性

 1  2  3  4  5  6  7  8     
 9         这是div中的span中的内容10     
11     
12         这是div2中的span中的内容13     
14 15 16 

如上我们可以看出我们添加的bs属性，和第二个div中被移除的bs属性，以及获取的bs属性。

第五类：操作样式

 1  2  3  4  5  6  7  8     
 9         这是div1中的内容10     
11       
12         这是div2中的内容13     
14 15 16