总结一下自己脑海里的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内部的一个子节点referenceNodenewNode将插在referenceNode这个子节点的前面。返回值是插入的新节点newNode。)。

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

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

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

猜你喜欢

转载自www.cnblogs.com/huanghang/p/11083118.html