DOM基本概念

一、DOM的定义

1、定义：Document Object Model 文档对象模型

2、核心：document对象

3、作用：可以访问和操作XML和HTML文档中标签、标签属性、节点的属性和方法

4、在DOM中html看做是一个倒立的树（树状结构），一个html页面就是一个DOM对象

DOM HTML树的根节点：html

元素（Element）：html文档中的标签

节点（Node）：html文档中的内容

5、DOM树中节点的分类：

标签节点：所有标签

属性节点：标签的属性--内置属性、自定义属性

文本节点：标签中的文本、换行、空格等

注释节点

6、基本概念

根节点：是html，有且只有一个

子节点：某个节点的下一级节点

父节点：某个节点的上一级节点

兄弟节点：拥有相同父节点的节点

二、通过document对象来操作html页面中的元素

1、getElementById('id属性值')：通过标签的id属性获取标签

2、getElementsByName('name属性值')：通过标签的name属性获取标签，返回值的类型是NodeList

3、getElementsByTagName(“标签名”)：通过标签名获取标签，返回值的类型是HTMLCollection

4、getElementsByClassName(“class属性值”)：通过标签的class属性获取标签，返回值的类型是HTMLCollection

5、querySelector(‘#id属性值’)：返回一个指定id属性值的标签

querySelector(‘.class属性值’)：返回第一个指定class属性值的标签

querySelector(‘标签名’)：返回第一个指定标签名的标签

6、querySelectorAll(‘.class属性值’)：返回所有指定class属性值的标签。返回值的类型是NodeList

querySelectorAll(‘标签名’)：返回所有指定标签名的标签。返回值的类型是NodeList

三、document对象的属性

1、document.body：返回文档的body元素

2、document.documentElement：返回文档的html元素

3、document.forms：返回文档的form对象

四、Element对象属性和方法：在JavaScript代码中使用html的标签(Element)属性和方法

1、children属性：用来获取某个元素的子元素

2、HTMLCollection和NodeList的区别

（1）HTMLCollection：通过document对象或Element对象调用getElementsByClassName()方法、getElementsByTagName()方法、children属性等返回的对象集。

（2）NodeList：document对象调用getElementsByName()方法在Chrome和FireFox浏览器中返回的是NodeList对象，IE11返回的是HTMLCollection对象。

（3）HTMLCollection对象用于元素操作

（4）NodeList对象用于节点操作

五、元素的属性和方法

1、属性

innerHTML：设置和返回起始标签和结束标签之间的html（包括标签）

innerText：设置或返回元素中去除所有标签的内容（不能解析标签—-不识别标签）

textContent：设置或者返回指定节点的文本内容（不识别换行）

2、方法

document.write(“html内容”)：在文档中写入指定的内容

document.writeln(“html内容”)：向文档写入指定的内容后并换行

六、标签的属性

1、attributes：返回标签的所有属性集合

2、setAttribute(name, value)：设置标签的属性值。参数name表示属性名，参数value表示属性值

3、getAttribute(name)：获取标签的某个属性值。参数name代表属性名

4、removeAttribute(name)：删除标签的某个属性。参数name代表属性名

七、元素的样式

1、用法：

元素名.style.样式属性名

注意：“样式属性名”在使用时需要将单词之间的’-‘删除，将第二个单词的首字母大写