document.createTreeWalker
常规我们获取dom下所有的子元素都是通过遍历的形式， 类似for循环判断nodeType的形式获取到真实的dom
今天发现MDN文档中还有一个api就是 createTreeWalker, 可以获取到元素下所有的子元素
document.createTreeWalker(root[, whatToShow[, filter[, expandEntityReferences]]]);
Attributes
-
root 需要获取的根节点
-
whatToShow 配置项， 可以根据配置是获取所有的元素、属性、等。。。 具体的写法就是
NodeFilter具体的配置就是NodeFilter
-
filter
filter是一个对象, 其中
acceptNode是一个必传的参数， 值是一个函数，可以通过函数进行业务类型的过滤{ acceptNode: function(Node) { // 业务代码 } }
可以根据 treeWalker.currentNode 获取当前指针指向的节点
Methods
- firstChild
获取treeWalker实例的第一个子元素
- lastChild
获取treeWalker实例的最后一个子元素
- nextNode
移动currentNode 指针到下一个可见元素
- nextSibling
获取currentNode的之后的兄弟节点
- parentNode
获取currentNode的父节点
- previousNode
获取currentNode的前一个节点
- previousSibling
获取currentNode的之前的兄弟节点
example code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>createTreeWalker</title>
</head>
<body>
<div class="container">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<script>
function log (data) {
console.log('data :',data)
}
var container = document.querySelector(".container")
var tree = document.createTreeWalker(container, 1)
let currentNode = tree.currentNode; // 获取当前节点指针
log(currentNode) // body > div
tree.nextNode() // 移动指针
log(tree.firstChild()) // <li>1</li>
tree.parentNode() // 切换到父节点
log(tree.lastChild()) // <li>6</li>
log(tree.previousSibling()) // <li>5</li>
log(tree.previousNode()) // <li>4</li>
</script>
</body>
</html>
