DOM笔记

一．DOM

1. 什么是DOM：文本对象模型
2. DOM的核心：document对象
3. DOM的作用：可以访问和操作xml和html文档中标签的属性，属性，节点的属性和方法
4. 在DOM中将整个html文档看作是一个倒立的数（树状结构，一个html页面就是一个DOM对象，是一颗DOMHTML树）

1. DOMHTML树的根节点：html
2. 元素）（Element）：html文档中的标签
3. 节点（Node）：文档中的内容

5．DOM树中的节点分类

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

（2）属性节点：标签的属性----------内置属性，自定义属性

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

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

6．基本概念

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

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

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

   （4）兄弟节点：拥有相同节点的父节点

二．通过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属性：用来获取某个元素的子元素

 强调：HTMLCollection和NodeList的区别

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

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

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

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

五．元素的属性和方法

1．属性：

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

  （2）innerText：设置和返回起始标签和结束标签之间的文本，不解析标签

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

2．方法：

  （1）document.write（“html内容”）：在文档中写入指定的内容

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

六．标签的属性：

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

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

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

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

七．元素的样式

1．用法：

（1）元素名.style.样式属性名

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

（2）HTML5对象样式的操作：

  a．一个元素的class属性可以有多个值，作用是在保留原有样式增添新的样式

  b．如何在js程序运行过程中动态的添加class属性

       classList属性：是元素的class属性的列表

2．ClassList属性提供的方法和属性

 （1）属性：length，某个标签的class属性值的个数（简称多少个类名）

 （2）方法：

a．add（ ”字符串”）：给元素添加类名，一次只能添加一个

 b．remove（“字符串”）：将元素的类名删除，一次只能删除一个

 c．toggle（“字符串”）：若类名存在删除，不存在则添加

 d．item（index）：根据index，来获取元素的类名

 e．contains（“类名”）：判断元素是否含有给定的类名，若有返回true，没有false

3．DOM中节点的操作：采用操作节点的方式操作页面元素

 （1）采取节点时使用的属性

   a．firstChild：获取当前节点的首个子节点

      注意：换行符，空格等也是节点

   b．nextSibiling：返回同一同级中指定节点之后紧跟的节点

   c．lastChild：返回当前节点的最后一个子节点

   d．previousSibing：返回同一层级中指定节点前一个节点

   e．nideName：节点名称

   f．nideValue：节点的值

   g．nodeType：节点的类型（返回值1，2，3）

        1：表示当前节点的类型是标签

        2：表示属性节点

        3：表示的是文本节点

  h．parentNade：当前节点的父节点

  i：childNodes：当前节点的所有子节点（返回值包括空格，换行，标签）

   强调：children和childNodes的区别

        想同点：都是获取子元素（标签）

        不同点：children属性：返回的是元素节点（即标签），返回值类型：HTMLCollection

                ChildNodes属性：不仅包含文本节点，也包含其他的元素节点，返回值类型：NodeList

4．追加节点：

 （1）创建元素节点：document.createElement（）

 （2）在指定节点的末尾追加节点：appendChild（）

 （3）在指定节点之前添加节点：insertBefore（NewNode，node）：将节点NewNode插入node之前，该方法需要通过插入（node）的父节点调用

 （4）创建文本节点：document.createTaxtNode（）

5．DOM的操作

 （1）复制节点：cloneNode（deep）

          参数deep是Boolean型  true/false

          True：表示深度复制（将节点及其子节点都进行复制）-----深拷贝

false：表示浅复制（只复制节点的而不复制子节点）-----浅拷贝

2．删除节点：removeChild（node）

        参数node为要删除的节点

        前提：被删除的节点必须为空（没有子节点）

3．HasChildNodes（）：判断当前节点是否有子节点

        返回值为true：表示有子节点

        返回值为false：表示没有子节点

4．替换节点：replaceChild（newNode，oldNode）：用newNode节点替换oldNode节点