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');
//用文本元素替换当前元素