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,lastElementChildchildNodes是获取当前节点下的所有子节点，也就是说，当前节点下的子节点，不管是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节点的一些常用属性和方法，有些不常用的属性方法并为分享出来，这样做的目的也是为了对知识点的一种提炼。喜欢的朋友可以点歌赞，以示鼓励，谢谢。
143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
