一、访问节点
1)相对当前节点访问节点
节点操作方法 | 说明 |
---|---|
ownerDocument | 返回当前节点的根元素(document对象) |
parentNode | 返回当前节点的父节点。所有的节点都仅有一个父节点 |
childNodes | 返回当前节点的所有子节点的节点列表 |
firstChild | 返回当前节点的首个子节点 |
lastChild | 返回当前节点的最有一个子节点 |
nextSibling | 返回当前节点之后相邻的同级节点 |
previousSibiling | 返回当前节点之前相邻的同级节点 |
提示
每个节点都有一个childNodes属性,改属性保存着一个nodeList对象,他表示所有子节点的列表
nodeList是一种类数组对象,用于保存一组有序的节点,用户可以通过下标位置来访问这些节点。虽然childNodes可以通过方括号雨来来访问nodeList的值,而且childNodes对象包含一个length属性,他表示列表包含子节点的个数(长度),但childNodes并不是数组,不能够直接调动数组的方法
注意
nodeList对象实际上是基于DOM结构动态执行查询的结果,DOM结构的变化能够自动反映在nodeList对象中。因此,我们不能够以动态的方式处理nodeList对象
示例
0,2,4,7节点为‘回车’文本节点, 同理其first、last、next、prev也为“回车”节点 |
只获取元素节点
元素节点操作方法 | 说明 |
---|---|
children | 获取当前元素的所有子元素节点 |
children[0] | 获取当前元素的第一个子元素节点 |
children[el.children.length - 1] | 获取当前元素的最后一个子元素节点 |
nextElementSibling | 获取当前元素的同级前一个元素 |
previousElementSibling | 获取当前元素的同级下一个元素 |
2)访问元素节点
document对象含多个访问文档内元素的方法
方法 | 说明 |
---|---|
getElementById() | 通过id获取 |
getElementsByClassName() | 通过class获取 |
getElementsByTagName() | 通过tag获取 |
querySelector(‘#id’) | 通过id获取 |
querySelector(‘.className’) | 通过className获取第一个对应元素 |
querySelector(‘tagName’) | 通过TagName获取第一个对应元素 |
querySelectorAll('x') | 通过x获取所有当前节点内的所有class或tag为x,id也可以(虽然id只能唯一) |
getElementByxxxx只能是document对象调用,那querySelector呢?
答案是可以的,那么我们可用querySelector,在知道某个节点范围内找出在
对应的节点
另外在Selectors API Level 2规范为Element类型新增了一个方法matchesSelector().这个方法接受一个参数,即CSS选择符,如果调用元素与该选择符匹配,返回true;否则false。
例如
<body id="test">
<script>
//Uncaught TypeError: document.body.matchesSelector is not a function
console.log(document.body.matchesSelector('#test'));
</script>
</body>
由于兼容性问题,现在各个浏览器都只支持加前缀的方法。IE9+浏览器支持msMatchesSelector()方法,firefox支持mozMatchesSelector()方法,safari和chrome支持webkitMatchesSelector()方法。所以兼容写法为:
function matchesSelector(element,selector){
if(element.matchesSelector){
return element.matchesSelector(selector);
}
if(element.msMatchesSelector){
return element.msMatchesSelector(selector);
}
if(element.mozMatchesSelector){
return element.mozMatchesSelector(selector);
}
if(element.webkitMatchesSelector){
return element.webkitMatchesSelector(selector);
}
}
<body id="test">
<script>
console.log(matchesSelector(document.body,'#test'));//true
</script>
</body>
二、操作节点
方法 | 说明 |
---|---|
appendChild() | 向节点的子节点列表的结尾添加新的子节点 |
cloneNode() | 复制节点 |
hasChildNodes() | 判断当前节点是否拥有子节点 |
insertBefore() | 在指定的子节点前插入新的子节点 |
normalize() | 合并相邻的Text节点并删除空的Text节点 |
removeChild() | 删除(并返回)当前节点的指定节点 |
replaceChild() | 用新的节点替换一个子节点 |
1)appendChild()
parent.appendChild(child4)
2)cloneNode(include_all)
①include_all = false 或默认时
let child5 = child2.cloneNode()
parent.appendChild(child5)
可以看到复制的节点仅为其本身,其子节点并没有复制,复制后返回的节点副本属于文档所有,需要通过appendChild()、insertBefore()或replaceChild()方法将他添加到文档中
②include_all = true
let child5 = child2.cloneNode(true)
parent.appendChild(child5)
3)hasChildNodes()
parent.hasChildNodes() // 返回true
4)insertBefore(newNode,refNode)
parent.insertBefore(child4,child2)
5)normalize()
合并相邻的Text节点并删除空的Text节点
6)removeChild()
parent.removeChild(node)
7)replaceChild(newNode, oldNode)
parent.replaceChild(child4,child2)
网友评论