上一篇文章描述了DOM的属性 [DOM] - 1 文档对象模型 (DOM) - 属性状态 - 掘金 (juejin.cn)
下面接着看DOM的方法
append()
append(param1)
append(param1, param2)
append(param1, param2, /* … ,*/ paramN)
open()、write()、writeln()、close()
- open()
Document.open()方法打开一个要写入的文档。- 文档中的所有节点会被清除
- 所有事件监听器会被清除
- write()、writeln()
- 一个包含要写入文档的文本的字符串。
- 向文档中写入一串文本，并紧跟着一个换行符。
close()
createAttribute()
document.createAttribute(name) - 创建属性名为name的 Attr 节点
var node = document.getElementById("div1");
var a = document.createAttribute("my_attrib");
a.value = "newVal";
node.setAttributeNode(a);
console.log(node.getAttribute("my_attrib")); // "newVal"
HTMLElement 可以通过 getAttribute(attrName)获取自身 attrName 属性值；setAttributeNode(attrName) 添加属性到HTMLElement
createElement()、createDocumentFragment()
createElement - 创建一个Element 元素
createDocumentFragment - 创建一个内存里面的doc
createElement和createDocumentFragment的区别在于Fragment,createDocumentFragment在插入doc时，是不会把根节点插入，而且直接一次性插入所有子节点
参考：createElement与createDocumentFragment的区别
createEvent()
这个方法可以用来模拟浏览器事件 UIEvents MouseEvents HTMLEvents MouseEvent
createTextNode()
把 string的文本节点转换成为dom节点
createTreeWalker()
// 这个方法是可以多某一个element的dom树进行遍历游走
createTreeWalker(root, whatToShow, filter)
const treeWalker = document.createTreeWalker(
document.body,
NodeFilter.SHOW_ELEMENT,
{ acceptNode(node) { return NodeFilter.FILTER_ACCEPT; } }
);
const nodeList = [];
let currentNode = treeWalker.currentNode;
while(currentNode) {
nodeList.push(currentNode);
currentNode = treeWalker.nextNode();
}
// 其他游走方法
// parentNode()
// firstChild()
// nextSibling()
// previousSibling()
// firstChild()
// lastChild()`
elementFromPoint(x,y)、elementsFromPoint(x,y)
elementFromPoint 通过坐标 x , y 获取对应的element元素
elementsFromPoint 通过坐标 x , y 获取对应的所有elements元素
exitFullscreen()
退出全屏模式
备注： 如果一个元素 A 在请求进去全屏模式之前，已经存在其他元素处于全屏状态，当这个元素 A 退出全屏模式之后，之前的元素仍然处于全屏状态。浏览器内部维护了一个全屏元素栈用于实现这个目的。
exitPictureInPicture
exitPointerLock
getAnimations
这是获取当前doc的全部动画对象，和css动画相关， TODO - 补全
getElementXX
getElementById getElementsByClassName getElementsByNam getElementsByTagName
hasFocus()
当前doc是否获得焦点
querySelector()、querySelectorAll()
通过查询查找某个元素
toggleAttribute()
Element接口的toggleAttribute()方法切换给定元素的某个布尔值属性的状态（如果属性不存在则添加属性，属性存在则移除属性）。
