DOM（一）

一、javascript的组成

1、ECMAScript：JS的语法标准----ECMAScript5.0,（简称ES5）、ECMAScript2015（ES6）、ECMAScript2017。

2、BOM：浏览器对象模型。

3、DOM：文档对象模型。

二、DOM

1、什么是DOM

文档对象模型（Document Object Model）

2、DOM核心：document对象。

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

4、在DOM中将HTML文档看做一个倒立的数（树状结构）：一个html页面就是一个DOM对象，是一棵倒立的树。

（1）DOM HTML树的根节点：html（根标签，只有一个）。

（2）元素（Element）：html文档中的标签，元素是节点的一部分。

（3）节点（Node）：文档中的所有内容

5、DOM树中节点的分类：

（1）标签节点：所有标签。

（2）属性节点：标签的属性 ----内置属性（不管用不用都存在）、自定义属性（本身没有后期自己加上的）。

（3）文本节点：标签中的文本、换行、空格等。

（4）注释节点：<!--  注释内容  --!>。

6、基本概念

（1）根节点：根节点是html，在任何DOM里面有且只能有一个。

（2）子节点：某个节点的下一级节点

（3）父节点：某个节点的上一级节点

（4）兄弟节点：与某个节点拥有同一个相同父节点的节点

__proto__表示元素的原型。

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

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

2、getElementsByName（"name属性值"）：通过标签的name属性获取标签，返回值是一个NodeList（伪数组）。

3、getElementByTagName（"标签名"）：通过标签名获取标签，返回值的类型是HTMLCollection

4、getElementByClassName（"class属性值"），通过标签的class属性值获取标签，返回值的类型是HTMLCollection

5、querySelector（"#id属性值"）：用这个方法去查最好用id属性，返回一个指定id属性值的标签；但是，如果是class属性值只会查到第一个class属性值；如果是name属性则返回null查不到；标签名返回第一个指定标签名的标签

6、querySelectorAll（"class属性值"）：返回所有指定class属性值的标签，返回值的类型是NodeList

      querySelectorAll（"class属性值"）：返回所有指定           标签名的标签，返回值的类型是NodeList

四、document对象的属性

1、document.body：返回文档的body元素，所有元素（标签）都可以得到。

2、document.documentElement：返回整个文档的html元素，包含head和body里面的标签。

3、document.forms：返回页面中的form表单对象，也是一个集合，只有一个form表单的时候长度为1。

method返回form的发送方式。

例子：后端获取用户信息。

第一个文件：

第二个文件：

五、Element对象的属性和方法：在JavaScript代码中使用html的标签（Element）属性和方法。

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

强调：HTMLCollection和NodeList的区别

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

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

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

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

六、元素的属性和方法 。

1、属性：

（1）innerHTML：设置和返回起始标签和结束标签之间的HTML内容（包括标签）。value相同，在input文本框里显示文本。

（2）innerText：设置和返回起始标签和结束标签之间出所有标签的文本（不能解析标签---不识别标签也不识别特殊字符：&nbsp等等)。

（3）textContent：设置或返回指定节点的内容（不识别console.log自带的换行）。

2、方法：

（1）document.write('html内容')：在文档中写入指定的内容，两个document输出不换行。

（2）document.writeln('html内容')：在文档中写入指定的内容，比document.write多一个空格。

七、标签的属性：

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

date-设置自定义属性

2、setAttributes（name，value）：设置标签的属性值。参数name表示属性名，参数value表示属性值

name = "value"

该方式可以用来更改标签内文本原本的样式，但是需要注意的是，原本的标签中需要写class，这样后续在注册事件中setAttributes（'class'，'dd'）才能实现，要对应。在更改是name不能写id，因为注册事件使用的是getElementById，会冲突。

练习1：改变文本样式

练习2：

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

4、removeAttribute（name）：删除标签的某个属性

八、元素的样式

1、用法：

元素名.style.样式属性名

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