Dom_powerful dom-CSDN博客

Dom

Node

所有Dom节点对象都继承了Node接口，拥有一些共同的属性和方法。

属性和方法

Node.prototype.nodeType

nodeType属性返回数值，表示节点类型。Node定义了几个常量来对应这些节点类型。
文档节点（document）：9，对应常量 Node.DOCUMENT_NODE
元素节点（element）：1，对应常量Node.ELEMENT_NODE属性节点（attr）： 2，对应常量Node.ATTRIBUTE_NODE
文本节点（text）：3，对应常量Node.TEXT_NODE
文档片段节点（documentFragment）：11，对应常量Node.DOCUMENT_FRAGMENT_NODE
文档类型节点（documentType）: 10，对应常量Node.DOCUMENT_TYPE_NODE
注释节点（comment）: 12，对应常量Node.COMMENT_NODE

确定节点类型时使用nodeType。

var doc = document.documentElement.firstChild;
if (doc.nodeType ===  Node.ELEMENT_NODE) {
	console.info('该节点为元素节点');
}

nodeName属性返回节点名称。不同节点的名称如下：
文档节点：#document
文档类型节点：文档类型
文档片段节点： #document-fragment
注释节点：#comment
文本节点：#text
元素节点：大写标签名
属性节点：属性名称
nodeValue属性返回字符串，表示节点本身的文本值，只有（text）文本节点、（attr）属性节点和（comment）注释节点有文档值，其他节点返回null。同样地，只有这三类节点地nodeValue可以赋值，其他无效。

//html代码
<div id="div1">hello</div>
//js代码
var node = document.getElementById('div1');
node.nodeValue;
//null
node.firstChild.nodeValue;
//'hello'

textContent属性返回当前节点和后代所有节点的文本内容。 textContent属性会自动忽略当前节点内部的HTML标签，返回所有文本内容。该属性是可读写的，可以用新的文本节点替换原来所有子节点，它会对自动html标签转义。
```
//html代码
<div id="div1">hello<span>my little</span></div>
//js代码
var node = document.getElementById('div1');
node.textContent;
//hello my little
document.getElementById('div1').textContent = '<p>An Angel</p>';
```

上面插入的代码，<p>标签会解释为文本，而不会当作标签处理。
对于 text文本节点、comment注释节点和attr属性节点，textContent属性返回值与nodeValue返回值一样，其他类型节点，该属性会将每个子节点（不包括注释节点）的内容连接在一起返回，如果没有子节点，返回空字符串。
document文档节点和documentType文档类型节点的属性textContent返回null。如果要读取整个文档的文本内容，可以用document.documentElement.textContent。

baseURI属性返回当前网页的绝对路径，浏览器可以根据这个属性可以计算出网页上的相对路径URL。该属性为只读。如果无法获取，返回null。

该属性的值一般是由window.location决定的，但是可以由<base>标签改变该属性。

  //html代码
  <base href="http://www.bishine.com">
  //js代码
  document.baseURI;
  //http://www.bishine.com

ownerDocument属性返回当前节点所在的顶层文档对象，即document对象。document本身的ownerDocument属性返回null。
nextSibling属性返回紧跟在当前节点后面的的第一个同级节点，如果当前节点后面没有同级节点，返回null。
previousSibling属性返回紧跟在当前节点前面的的第一个同级节点，如果当前节点前面没有同级节点，返回null。

NodeList

属性和方法

NodeList.prototype.length

NodeList.prototype.forEach()

NodeList.prototype.item()

NodeList.prototype.keys()

NodeList.prototype.values()

NodeList.prototype.entries()

NodeList 实例是一个类似数组的对象，有length，forEach属性，但是不能使用pop、push等数组方法。
可以通过以下方法获取NodeList实例：

Node.childNodes
document.querySelectorAll()等节点搜索方法

如果想要将NodeList转换为数组，可以通过以下方法：

var nodes = document.body.childNodes;
var childern = Array.prototype.slice.call(children);

使用for循环+push()遍历

Node.childNodes获取的NodeList是动态集合，其他的NodeList都是静态集合。

var children = document.body.childNodes;
children.length // 18
document.body.appendChild(document.createElement('p'));
children.length // 19

item()方法用来获取传入参数所对应位置上的节点，参数为正整数，表示节点的位置，如果传参错误，返回null，如果不传参，直接报错。

NodeList对象的keys()方法获取对象的键， values()方法获取对象的键值， entries()获取键和键值的信息。

var children = document.body.childNodes;
for (var key of children) {
	console.info(key);
}
//0
//1
//...

for (var value of children) {
	console.info(value);
}
//#text
//<head>
//...

for (var entry of children) {
	console.info(entry);
}
// Array [0, #text]
//Array [1, <script>]
// ...

for...of可以用来遍历对象。

HTMLCollection

HTMLCollection是一个只能包含元素节点的对象集合，返回实例的主要是Document对象的集合属性，比如document.forms、 document.images、 document.tables等，与NodeList集合不同的是，HTMLCollection只有length属性和for()方法，没有forEach()方法。
HTMLCollection实例对象都是动态集合，节点的变化实时反映在集合中。

属性和方法

HTMLCollection.prototype.length

HTMLCollection.prototype.item()

HTMLCollection.prototype.namedItem()

如果节点有id或name属性，在HTMLCollection实例中可以直接通过id或name访问到该节点。

//html代码
<img id="pic" src="http://www.baifu.hdhhd"/>
//js代码
var img = document.getElementById('pic');
document.images.pic === img;//true

namedItem()方法是通过id或name的值获取到对应的节点，如果没有，返回null。

//html代码
<img id="pic" src="http://www.baifu.hdhhd"/>
//js代码
var img = document.getElementById('pic');
document.images.namedItem('pic')=== img;//true

ParentNode

如果当前节点是父节点，就会继承ParentNode接口，因为只有element元素节点、document文档节点、documentFragment文档片段节点有子节点，所以只有这三类会继承ParentNode接口。

属性和方法

Parent.children

Parent.firstElementChild

Parent.lastElementChild

Parent.elementChildCount

Parent.append()

Parent.preappend()

ParentNode.children属性返回一个HTMLCollection实例，成员对象是当前节点的所有元素(element)子节点，该属性只读。

ParentNode.firstElementChild属性返回当前节点的第一个元素(element)子节点，没有时返回null。

ParentNode.lastElementChild属性返回当前节点的最后一个元素(element)子节点，没有时返回null。

ParentNode.elementChildCount属性返回当前节点所有元素(element)子节点的数目。

ParentNode.append()方法是在当前节点的最后一个子节点后面添加一个或多个子节点，节点可以是元素节点，也可以是文本节点。

var node = document.body;
var p = document.createELement('p');
//添加元素节点
node.append(p);
//添加文本节点
node.append('Hello world');
//添加多个节点，包括元素节点和文本节点
var p1 = document.createELement('div');
var p2 = document.createELement('div');
node.append(p1, p2, 'happy');

ParentNode.preappend()方法是在当前节点的第一个子节点前面添加一个或多个子节点，节点可以是元素节点，也可以是文本节点，方法同ParentNode.append()。

ChildNode

如果一个节点有父节点，那么该节点继承ChildNode接口。

属性和方法

ChildNode.remove()

ChildNode.before()

ChildNode.after()

ChildNode.replaceWith()

remove()可以从父节点中移除当前元素。

el.remove();

before()是在当前节点之前插入一个或多个节点，节点类型可以是元素节点和文本节点。
after()是在当前节点之后插入一个或多个节点，节点类型可以是元素节点和文本节点。
该两个方法的使用同ParentNode.append()。
replaceWith()是使用参数节点替换当前节点，参数可以是元素节点，也可以是文本节点。

el.replace('hello');
//用文本元素替换当前元素