createTreeWalker DOM API All In One
createTreeWalker DOM API All In One
document.createTreeWalker()
createTreeWalker(root)
createTreeWalker(root, whatToShow)
createTreeWalker(root, whatToShow, filter)
https://developer.mozilla.org/en-US/docs/Web/API/Document/createTreeWalker
The TreeWalker
object represents the nodes of a document subtree
and a position
within them.
A TreeWalker
can be created using the Document.createTreeWalker()
method.
https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
const treeWalker = document.createTreeWalker(
document.body,
NodeFilter.SHOW_ELEMENT,
{
acceptNode(node) {
return NodeFilter.FILTER_ACCEPT;
},
},
false,
);
nodeFilter = treeWalker.filter; // document.body in this case
NodeFilter.SHOW_ALL
NodeFilter.SHOW_ELEMENT
NodeFilter.SHOW_TEXT
NodeFilter.SHOW_COMMENT
...- NodeFilter.SHOW_DOCUMENT
- NodeFilter.SHOW_DOCUMENT_TYPE
- NodeFilter.SHOW_DOCUMENT_FRAGMENT
- NodeFilter.SHOW_PROCESSING_INSTRUCTION
https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker/filter
https://caniuse.com/?search=createTreeWalker
demos
https://codepen.io/xgqfrms/pen/eYbmBJL
const content = document.getElementById('content');
// filter
const treeWalker = document.createTreeWalker(content, NodeFilter.SHOW_TEXT);
console.log(`treeWalker =`, treeWalker);
let node;
// text
while (node = treeWalker.nextNode()) {
console.log(`node =`, node, node.nodeValue.trim());
pre.insertAdjacentHTML(`beforeend`, `<p>${node.nodeValue.trim()}</p>`)
}
<div id="content">
<p>This is a <span>paragraph</span> with some <em>emphasis</em>.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ul>
</div>
(🐞 反爬虫测试!打击盗版⚠️)如果你看到这个信息, 说明这是一篇剽窃的文章,请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章!
refs
©xgqfrms 2012-2021
www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!
原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/17645922.html
未经授权禁止转载,违者必究!