DOM全称为“文档对象模型”(Document Object Model)。在前端开发中常说的“行为,样式,结构,三者分离”,结构指的就是DOM。而结构里的各种HTML标签,就是DOM实体化的各种元素。今天和大家一起认识和了解DOM的各种基本属性,以及如何配合JS的操作。
【NodeType,Node接口】
NodeType节点类型
DOM 的最小组成单位叫做节点(node)。文档的树形结构(DOM 树),就是由各种不同类型的节点组成。而节点的类型有七种:
Element
:网页中的各种HTML标签Attribute
:属性节点Text
:文本节点Document
:整个文档树的顶层节点DocumentType
:文档类型节点,doctype
标签Comment
:注释DocumentFragment
:文档片段
一般地,节点至少拥有nodeType
、nodeName
和nodeValue
这三个基本属性。节点类型不同,这三个属性的值也不相同。nodeType
的属性值是以数字表示:
- 元素节点:1
- 属性节点:2
- 文本节点:3
- 文档节点:9
- 文档类型节点:10
- 注释节点:8
- 文档片段节点:11
nodeName
是返回节点名称,nodeValue
是返回节点的值。
node接口
nodeType节点类型里,我们最常操作的就是元素节点,即DOM节点,因此node提供了一系列的属性和方法供我们使用:
属性
nodeType
返回节点类型
`
<div id='div1'>html node</div>
document.nodeType // 9
document.getElementById('div1').nodeType // 1
复制代码
`
nodeName
返回节点名称
`
<div id='div1'>html node</div>
document.nodeName // #document
document.getElementById('div1').nodeName // DIV
复制代码
`
nodeValue
返回当前节点本身的文本值,该属性可读写。但是请注意:只有文本节点(text)、注释节点(comment)和属性节点(attr)有文本值,因此这三类节点的nodeValue可以返回结果,其他类型的节点一律返回null,同样的,也只有这三类节点可以设置nodeValue属性的值,其他类型的节点设置无效。
`
<div id='div1'>html node</div>
document.getElementById('div1').nodeValue // null
复制代码
`
-
textContent
返回当前元素节点下的所有文本内容包括子级节点的文本内容,textContent
属性自动忽略当前节点内部的 HTML 标签,返回所有文本内容。 `<div id="parent-div">父级节点<div>子级div节点</div></div> document.getElementById('parent-div').textContent //父级节点 子级div节点 复制代码
`
baseURI
属性返回一个字符串,表示当前网页的绝对路径。浏览器根据这个属性,计算网页上的相对路径的 URL。该属性为只读。ownerDocument
属性返回当前节点所在的顶层文档对象即document
,注意:document
本身的ownerDocument
属性返回null
。nextSibling,previousSibling
属性都是返回当前节点的同级节点,即兄弟节点,不同的是,一个是前一个兄弟节点,一个是后一个兄弟节点,如果它们当前节点后面或者后面没有同级的兄弟节点,则返回null
。
`
<div id='d0'>上一个节点</div><div id='d1'>中间节点</div><p id='p1'>后一个节点</p>
document.getElementById('d1').nextSibling == document.getElementById('p1') // true
复制代码
`
注意:这两个属性返回的是节点,节点是有多种类型的,在我们一般的操作中是要获取dom元素,获取dom元素用啥呢:nextElementSibling,previousElementSibling
,这个属性呢IE9以下又不兼容。 `
var d1 = document.getElementById('d1');
d1.nextElementSibling // IE8是会报 undefined,但是IE9以上,谷歌火狐是正常的
d1.previousElementSibling //
复制代码
` 如果上面的dom元素,不并排的话,取上一个或者下一个是会获取到#text文本节点的。
parentNode,parentElement
两个属性都是返回当前节点的父节点,两个属性不同的是,parentElement
只会返回父元素节点,即节点类型为1的元素节点,parentNode
返回的父节点包含三种类型:一:元素节点,二:文档节点,三:文档片段节点。这俩属性在一般的情况下使用是不会有啥差别的,都是会返回父元素节点。firstChild,lastChild
这俩属性都是返回当前节点的子级节点,第一个和最后一个,有一点需要注意的就是:这两个属性返回的是节点,再次提醒注意,节点是有多种类型的,nodeType
,而我们一般情况下 是获取当前dom元素节点下的子级dom元素节点,那么此时这两属性就不适用了,我们需要使用firstElementChild
,lastElementChild
childNodes
是获取当前节点下的所有子节点,也就是说,当前节点下的子节点,不管是dom元素节点,还是text文本节点,注释节点都会获取到到,那么我们只要获取dom元素节点该用啥呢,children
`
<ul id="ul-node">
<li>壹</li>
<li>贰</li>
<li>叁</li>
<li>肆</li>
<li>伍</li>
</ul>
var ul = document.getElementById('ul-node');
ul.childNodes // [text, li, text, li, text, li, text, li, text, li, text]
ul.children // [li, li, li, li, li]
复制代码
`
ParentNode.childElementCount
属性返回当前节点下所有元素子节点的数量,不包括其他节点类型。
`
<div id='parent-div'>
<div id='child-div'>1</div>
</div>
var parentDiv = document.getElementById('parent-div');
var count = parentDiv.childElementCount; // 1
复制代码
`
方法
appendChild()
方法接收一个节点对象参数,把该节点对象追加到当前节点的最后一个子节点的后面。
`
<div id='parent-div'>
<div id='child-div'></div>
</div>
var div = document.createElement('div');
div.id = 'new-div'
document.getElementById('parent-div').appendChild(div);
<div id='parent-div'>
<div id='child-div'></div>
<div id='new-div'></div>
</div>
复制代码
`
insertBefore
方法用于将节点插入到父节点下指定的内部子节点位置,接收两个参数,参数一:是插入进去的子节点,参数二:插入的位置。
`
<div id='parent-div'>
<div id='child-div'></div>
</div>
var parentDiv = document.getElementById('parent-div');
var div = document.createElement('div');
div.id = 'new-div';
parentDiv.insertBefore(div, parentDiv.firstElementChild);
<div id='parent-div'>
<div id='new-div'></div>
<div id='child-div'></div>
</div>
复制代码
`
removeChild()
方法用于删除当前节点下的指定子节点,该方法接收一个参数,该参数就是指定子节点。replaceChild()
方法用于替换当前节点下的某个子节点,该方法接收两个参数,参数一:替换进去的新节点,参数二:替换谁,也就是要替换掉的子节点。cloneNode()
方法用于克隆当前节点,该方法接收一个布尔值参数,默认值false
,传入true
,则表示同时克隆当前节点下的子节点。注意:1.使用该方法克隆的dom节点,需要插入到文档里面去,2.该方法克隆的节点会丢失二级dom事件绑定的方法,即如果你克隆的节点使用了addEventListener()
方法绑定了事件,则会丢失。
`
<div id='parent-div'>
<div id='child-div'>1</div>
</div>
var parentDiv = document.getElementById('parent-div');
var div = parentDiv.firstElementChild.cloneNode(true);
parentDiv.appendChild(div);
<div id='parent-div'>
<div id='child-div'>1</div>
<div id='child-div'>1</div>
</div>
复制代码
`
ParentNode.prepend(),ParentNode.append()
这两个方法是父节点node接口上的方法,给当前节点添加一个或者多个节点,两个方法不同的是:prepend()
往前添加,append()
往后追加。功能和appendChild()
一样。不同的是它们可以添加多个而已。ChildNode.before(),ChildNode.after()
子级node节点接口方法,该方法都是给自己,也就是当前节点的前面或者后面插入新节点。这两个方法不只可以插入元素节点,也可以插入文本节点,这两个方法都是插入一个或者多个节点。ChildNode.remove(),ChildNode.replaceWith()
子级node节点接口方法,该方法是对自己进行操作,也就是当前节点,对自己进行删除和替换的操作行为,replaceWith()
需要一个参数,也就是谁替换自己,remove()
不需要参数。
小结
本次分享着重介绍了node节点的认识,node节点的一些常用属性和方法,有些不常用的属性方法并为分享出来,这样做的目的也是为了对知识点的一种提炼。喜欢的朋友可以点歌赞,以示鼓励,谢谢。