总结一下自己脑海里的JavaScript吧（一）--DOM模型

今天是2019年6月25日，闲来无事，写一篇文章来看看自己脑袋里装了多少JavaScript知识！

这儿就第一章：

说起JavaScript，它是什么？后端脚本语言？前端编程语言？还是在网站浏览器上运行的编程语言？我觉的它都算的上是！只能说它更靠近网站吧！

它是给我们HTML、css加上行为，使网站具有自己的思想，自己的计算能力以及自己的行动效果！

今天我想说一说JavaScript里面的DOM模型：

DOM模型全称为“文档对象模型”（Document Object Model）概念：将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）；

DOM模型的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。

接下来我们从节点属性讲起：

1、nodeType属性返回一个整数值，表示节点的类型。

2、nodeName属性返回节点的名称。

3、nodeValue属性返回一个字符串，表示当前节点本身的文本值，该属性可读写。

4、textContent属性返回当前节点和它的所有后代节点的文本内容。

5、baseURI属性返回一个字符串，表示当前网页的绝对路径。浏览器根据这个属性，计算网页上的相对路径的 URL。该属性为只读。

6、ownerDocument属性返回当前节点所在的顶层文档对象，即document对象。

7、nextSibling属性返回紧跟在当前节点后面的第一个同级节点。如果当前节点后面没有同级节点，则返回null。

8、previousSibling属性返回当前节点前面的、距离最近的一个同级节点。如果当前节点前面没有同级节点，则返回null。

9、parentNode属性返回当前节点的父节点。对于一个节点来说，它的父节点只可能是三种类型：元素节点（element）、文档节点（document）和文档片段节点（documentfragment）。

10、firstChild属性返回当前节点的第一个子节点，如果当前节点没有子节点，则返回null。

11、childNodes属性返回一个类似数组的对象（NodeList集合），成员包括当前节点的所有子节点。

12、isConnected属性返回一个布尔值，表示当前节点是否在文档之中。

最后就是我们节点方法：

1、appendChild方法接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。该方法的返回值就是插入文档的子节点。

例如：var p = document.createElement('p');document.body.appendChild(p);

2、hasChildNodes方法返回一个布尔值，表示当前节点是否有子节点。

3、cloneNode方法用于克隆一个节点。它接受一个布尔值作为参数，表示是否同时克隆子节点。它的返回值是一个克隆出来的新节点。

例如：var cloneUL = document.querySelector('ul').cloneNode(true);

4、insertBefore方法用于将某个节点插入父节点内部的指定位置（insertBefore方法接受两个参数，第一个参数是所要插入的节点newNode，第二个参数是父节点parentNode内部的一个子节点referenceNode。newNode将插在referenceNode这个子节点的前面。返回值是插入的新节点newNode。）。

5、removeChild方法接受一个子节点作为参数，用于从当前节点移除该子节点。返回值是移除的子节点。

6、replaceChild方法用于将一个新的节点，替换当前节点的某一个子节点。

差不多就这些吧！好了收工！

转载于:https://www.cnblogs.com/huanghang/p/11083118.html