JS—— JS中的DOM（初解）

文章目录

• 前言
• 一、什么是DOM？
  • 1.节点相关介绍
  • 2.节点的属性
  • 3.文档节点实例
• 二、读取元素节点的相关方法
  • 1.读取元素节点
  • 2.获取元素节点（通过 document 对象调用）
  • 3.获取元素节点的子节点（通过具体的元素节点调用）
  • 4.获取父节点和兄弟节点（通过具体的节点调用）
• 三、DOM查询的其他方法
  • 1.有关  document  的查询方法
• 四、DOM  的增、删、改
• 总结

---

前言

前文主要介绍了有关ECMAScript 的基础知识（感兴趣的小伙伴欢迎翻阅），从这篇文章起，我们就正式介入有关JS 中DOM 的相关知识点，希望能够帮助到大家！

---

一、什么是DOM？

DOM（Document Object Model 文档对象模型）定义了访问和操作文档的标准方法。DOM 将 HTML 文档作为一个树形结构，而树叶被定义为节点。

1. 节点相关介绍

如图所示，这是一个DOM 树形实例图，从这张图中就可以看出，DOM 就是将HTML文档作为一个树形结构，树叶就被定义为节点。

节点： Node——构成HTML文档最基本的单元。

常用节点分类：

• 文档节点：整个HTML文档

• 元素节点（标签节点）：HTML文档中的HTML标签

• 属性节点：元素的属性

• 文本节点：HTML标签中的文本内容

2.节点的属性

	nodeName	nodeType	nodeValue
文档节点	#document	9	null
元素节点	标签名	1	null
属性节点	属性名	2	属性值
文本节点	#text	3	文本内容

3.文档节点实例

<button id="btn">我是一个按钮</button>
      <script type="text/javascript">
            /*浏览器已经为我们提供文档节点，这个对象就是window属性
             * 可以在页面中直接使用，文档节点代表的是整个网页
             */
            //获取button对象
            var btn = document.getElementById("btn");  //输出结果为   我是一个按钮
            //修改按钮的名字
            btn.innerHTML ="I'm Button";      //输出结果为    I'm Button
      </script>

---

二、读取元素节点的相关方法

1.读取元素节点

• innerHTML  通过这个属性 可以获取到元素内部的html 代码，但是对于自结束标签，这个属性没有意义
• innerText     通过这个属性，可以获取到元素内部的文本内容，和innerHTML类似，不同的是它会自动将Html去除
• 元素. name    元素.value   如果需要读取元素节点属性，直接使用   元素.属性名   例如：注意——class 属性不能采用这种方式，读取class属性时需要使用   元素.className

2.获取元素节点（通过 document 对象调用）

1. getElementByID（‘id名’）  通过ID属性获取一个元素节点对象

2. getElementsByTagName( ‘选择器的名称’) 例如：getElementByTagName(".demo")    通过标签名获取一组元素节点对象——会给我们返回一个类数组对象， 所有查询到的元素都会封装到对象中，即使查询到的元素只有一个，也会封装到数组

3. getElementsByName(‘属性名’ )      通过name属性获取一组元素节点对象——会给我们返回一个类数组对象， 所有查询到的元素都会封装到对象中，即使查询到的元素只有一个，也会封装到数组中

3.获取元素节点的子节点（通过具体的元素节点调用）

1. childNodes         属性，表示当前节点的所有子节点      该属性会获取所有文本节点在内的所有节点，包括文本节点、注释节点；根据DOM标签，标签间的空白也会当成文本节点，注意——在IE8及以下的浏览器中，不会将空白文本当成子节点，结果也是封装到一个数组中。

2. children 属性返回元素的子元素的集合，是一个 HTMLCollection 对象。提示：根据子元素在元素中出现的先后顺序进行排序。使用 HTMLCollection对象的 length属性获取子元素的数量，然后使用序列号(index，起始值为0)访问每个子元素。

3. firstChild 在于 firstChild 返回第一个子节点作为元素节点，包含文本节点或注释节点（取决于哪个是第一个

4. firstELementChild    获取当前元素的第一个子元素（忽略文本和注释节点）。

5. lastChild              属性，表示当前节点的最后一个子节点

6. lastELementChild    获取当前元素的最后一个子元素（忽略文本和注释节点）。

firstElementChild 属性与 firstChild 属性的区别

在于 firstChild 返回第一个子节点作为元素节点，包含文本节点或注释节点（取决于哪个是第一个），而 firstElementChild 返回第一个子节点作为元素节点（忽略文本和注释节点）。

children 属性与 childNodes 属性的差别：

• childNodes 属性返回所有的节点，包括文本节点、注释节点；

• children 属性只返回元素节点；

4.获取父节点和兄弟节点（通过具体的节点调用）

1. parentNode                属性，返回当前节点的父节点

2. previousSibling           属性，当前节点的前一个兄弟节点，（处于同一树层级）也可能获取到空白文本，

3. previousElementSibling    属性，获取当前节点的前一个兄弟元素，ie8及以下不支持

4. nextSibling               属性，表示当前节点的后一个兄弟节点，也包括文本节点等。

5. nextElementSibling                    属性，表示当前节点的后一个兄弟节点。

 previousSibling 属性与 previousElementSibling 属性的差别：

• previousSibling 属性返回元素节点之前的兄弟节点（包括文本节点、注释节点）；

• previousElementSibling 属性只返回元素节点之前的兄弟元素节点（不包括文本节点、注释节点）；

• previousElementSibling 属性为只读属性。

---

三、DOM查询的其他方法

1.有关  document  的查询方法

1. 在document中有一个属性body，它保存的是body的引用————document.body

2. 保存根标签————document.documentElement

3. 表示页面中的所有元素————document.all

4. 根据元素的class属性值查询一组元素节点对象,结果也是一个数组的形式————,document.getElementsByClassName( )可以根据class属性值获取一组元素节点对象，但是该方法不支持IE8及以下的浏览器

5. 根据一 个CSS选择器来查询一个元素节点对象_———document.querySelector(‘标签名’ )   需要一个选择器的字符串作为参数，例如——var  box1 = document.querySelector(".box1" );   IE8  中可以使用   该方法只会返回第一个符合条件的结果

6. 用法如上，会将符合条件的元素封装到一个数组中（即使符合条件的元素只有一个）返回—document.querySelectorAll( '标签名'  )

---

四、DOM  的增、删、改

1. document.createElement(  )  用于创建一个元素节点对象，需要一个标签名作为参数，将会根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回

2. document.createTextNode( )    可以创建一个文本节点对象， 需要一个文本内容作为参数，并将新的文本节点返回

3. appendChild( )  向一个父节点中添加一个新的子节点——父节点.appendChild(子节点）;  

4. insertBefore(  )   可以在指定的子节点前插入新的子节点——父节点.insertBefore（新节点，旧节点）；

5. replaceChild( )可以使用指定的子节点替换已有子节点——父节点.replaceChild(新节点，旧节点）；

6. removeChild( )可以删除个子节点

         ——父节点.removeChild( 子节点)；

          ——子节点.parentNode.removeChild（子节点）

---

总结

以上就是今日所要和大家分享的内容，“纸上得来终觉浅，绝知此事要躬行”，掌握了知识点后，还是要多加练习，千万不要“眼高手低”，眼睛会了手不会哦~，好了，就写到这儿吧，依旧诚挚祝福屏幕前的你健康幸福、平安喜乐~