今天是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
方法用于将一个新的节点,替换当前节点的某一个子节点。
差不多就这些吧!好了收工!