all
document.adoptNode()
语法
返回值
应用场景
document.append()
语法
返回值
应用场景
document.caretPositionFromPoint()
语法
返回值
应用场景
document.close()
语法
返回值
应用场景
document.createAttribute()
语法
返回值
应用场景
document.createAttributeNS()
语法
返回值
应用场景
document.createCDATASection()
语法
返回值
应用场景
document.createComment()
语法
返回值
应用场景
document.createDocumentFragment()
createDocumentFragment() 创建一个新的空白的文档片段 ( DocumentFragment)。
语法
let fragment = document.createDocumentFragment();
返回值
fragment 是一个指向空DocumentFragment对象的引用。
认识
DocumentFragments 是 DOM 节点。它们不是主 DOM 树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到 DOM 树。在 DOM 树中，文档片段被其所有的子元素所代替。因为文档片段存在于内存中，并不在 DOM 树中，所以将子元素插入到文档片段时不会引起页面回流（对元素位置和几何上的计算）。因此，使用文档片段通常会带来更好的性能。
应用场景
-
通过文档片段创建列表
<ul id="ul"></ul>
<script>
const ul = document.getElementById('ul');
const fragment = document.createDocumentFragment();
const liList = ['哈哈','嘻嘻','呵呵']
liList.forEach(li=>{
const liDom = document.createElement('li');
liDom.innerHTML = li;
fragment.append(liDom);
});
ul.append(fragment);
</script>
document.createElement()
语法
返回值
应用场景
document.createElementNS()()
语法
返回值
应用场景
document.createEvent()()
语法
返回值
应用场景
document.createExpression()
语法
返回值
应用场景
document.createNodeIterator()
document.createNodeIterator() 返回一个新的 NodeIterator 对象。
语法
const nodeIterator = document.createNodeIterator(root[, whatToShow[, filter]]);
-
root:
NodeIterator遍历起始处的根节点。 -
whatToShow: 是一个可选的无符号长整型（unsigned long）， 是由节点过滤器（NodeFilter）中的常量属性定义的位掩码。这是筛选特定类型节点的便捷方式。其默认值是
0xFFFFFFFF，代表SHOW_ALL常量。-
NodeFilter.SHOW_ALL: 数字值为
-1即unsigned long的最大值。表示显示所有节点 -
NodeFilter.FILTER_ACCEPT: 数字值为
1 -
NodeFilter.FILTER_REJECT: 数字值为
2 -
NodeFilter.FILTER_SKIP: 数字值为
3
-
-
filter: 是实现
NodeFilter接口的对象; 其acceptNode()方法会对从根节点开始到子树中的每个节点都调用一次，哪些节点需要进入迭代节点列表等待调用则取决于whatToShow参数（也可以使用一个简单的回调函数代替acceptNode()）{
acceptNode(node) {
return node.nodeName.toLowerCase() === "p"
? NodeFilter.FILTER_ACCEPT
: NodeFilter.FILTER_REJECT;
}
}
返回值
返回一个新的 NodeIterator 对象
应用场景
-
场景一: 遍历所有
DOM元素const html = document.getElementsByTagName("html")[0];
const iterator = document.createNodeIterator(html);
let root = iterator.nextNode();
while (root) {
console.log(root);
root = iterator.nextNode();
} -
场景二: 遍历所有的
p标签元素const html = document.getElementsByTagName("html")[0];
const iterator = document.createNodeIterator(html, NodeFilter.SHOW_ALL, {
acceptNode(node) {
return node.nodeName.toLowerCase() === "p"
? NodeFilter.FILTER_ACCEPT
: NodeFilter.FILTER_REJECT;
}
});
let root = iterator.nextNode();
while (root) {
console.log(root);
root = iterator.nextNode();
}
document.createNSResolver()
语法
返回值
应用场景
document.createProcessingInstruction()
语法
返回值
应用场景
document.createRange()
语法
返回值
应用场景
document.createTextNode()
语法
返回值
应用场景
document.createTreeWalker()
语法
返回值
应用场景
documentOrShadowRoot.elementFromPoint()
语法
返回值
应用场景
documentOrShadowRoot.elementsFromPoint()
语法
返回值
应用场景
document.evaluate()
语法
返回值
应用场景
document.exitFullscreen()
语法
返回值
应用场景
document.exitPictureInPicture()
语法
返回值
应用场景
document.exitPointerLock()
语法
返回值
应用场景
document.getAnimations()
语法
返回值
应用场景
document.getElementById()
语法
返回值
应用场景
document.getElementsByClassName()
语法
返回值
应用场景
document.getElementsByName()
语法
返回值
应用场景
document.getElementsByTagName()
语法
返回值
应用场景
document.getElementsByTagNameNS()
语法
返回值
应用场景
document.getSelection()
语法
返回值
应用场景
document.hasFocus()
语法
返回值
应用场景