13个需要知道的方法：使用 JavaScript 来操作 DOM

HTML DOM createElement() 方法

• createElement() 方法通过指定名称创建一个元素
• 语法： document.createElement(nodename)

HTML DOM querySelector / querySelectorAll() 方法

1. document.querySelector方法返回文档中与指定选择器或选择器组匹配的第一个 html 元素。 如果找不到匹配项，则返回null。

• 语法： document.querySelector(CSS selectors)
• querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
• 注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。

2. document.querySelectorAll 方法返回与指定的CSS选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回 NodeList 对象，NodeList 对象表示节点的集合。可以通过索引访问，索引值从 0 开始。

• 语法： elementList = document.querySelectorAll(selectors);
  • elementList 是一个静态的 NodeList 类型的对象。
  • selectors 是一个由逗号连接的包含一个或多个 CSS 选择器的字符串。

// 取得body元素
const body = document.querySelector("body");
// 返回第一个 ul 元素
const list = document.querySelector('ul');

// 取得某div中所有<em>元素 类似getElementsByTagName("em")
const ems = document.getElementById("myDiv").querySelectorAll("em");
// 返回所有类名为 info 或者 warning 的 div 元素
const elements = document.querySelectorAll('div.info, div.warning');

HTML DOM appendChild() 方法

• appendChild()方法将节点添加到给定父节点的子节点列表的末尾。如果给定的子代是文档中现有节点的引用，则它将移动到新位置 。
• 提示：如果需要创建包含文本的新段落，需要添加到段落的文本的文本节点，然后向文档添加该段落。同时可以使用 appendChild() 方法从一个元素向另一个元素中移动元素。

HTML DOM removeChild() 方法

• removeChild() 方法可从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
• 注意： 被移除的这个子节点仍然存在于内存中,只是没有添加到当前文档的DOM树中， 所以还可以把这个节点重新添加回文档中。

let oldChild = node.removeChild(child);
//OR
element.removeChild(child);

• child 是要移除的那个子节点. node 是child的父节点. oldChild保存对删除的子节点的引用 oldChild === child
• 如果上例中的child节点不是node节点的子节点,则该方法会抛出异常.

HTML DOM replaceChild() 方法

• replaceChild() 方法用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。
• 语法： replacedNode = parentNode.replaceChild(newChild, oldChild);
  • newChild 用来替换 oldChild 的新节点。如果该节点已经存在于DOM树中，则它会被从原始位置删除。
  • oldChild 被替换掉的原始节点。
  • replacedNode 和oldChild相等。

let list = document.querySelector('ul');
let oldItem = list.querySelector('li');
let newItem = document.createElement('li');
newItem.innerHTML = '前端*****';
let replacedItem = list.replaceChild(newItem, oldItem);

HTML DOM cloneNode 方法

• cloneNode() 方法可创建指定的节点的精确拷贝。
• cloneNode() 方法 拷贝所有属性和值。
• 该方法将复制并返回调用它的节点的副本。如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点。

  即cloneNode()克隆的节点复制真节点的样式，标签，属性。至于标签里的元素，事件没有复制，所以称它浅克隆。cloneNode（true）完全把真节点的东西给复制了过来，所以称它为深克隆.

HTML DOM insertBefore() 方法

• insertBefore() 方法在您指定的已有子节点之前插入新的子节点（并返回插入的节点）

Element.getAttribute / Element.setAttribute

• Element.getAttribute方法返回元素上给定属性的值，
• Element.setAttribute设置给定元素上属性的值。

Element.hasAttribute / Element.removeAttribute

• Element.hasAttribute方法检查给定元素是否具有指定的属性，返回值为boolean。
• Element.removeAttribute方法，从元素中删除具有给定名称的属性。