JavaScript的Dom基本操作

获取元素的方式：

1. 根据 id 名称获取     document.getElementById("id 名称")
2. 根据元素 类名 获取        document.getElementsClassName("元素类名")
3. 根据元素 标签名 获取     document.getElementsByTagName("标签名")
4. 根据 选择器 获取一个     document.querySelector(".box")
5. 根据 选择器 获取一组     document.querySelectorAll(".box")

操作元素内容

1.  操作元素 文本 内容 
   1. 获取元素文本内容： 元素.innerText
   2. 设置元素文本内容： 元素.innerText = "新内容"
2.  操作元素 超文本 内容
   1. 获取元素 超文本 内容： 元素.innerHTML
   2. 设置元素文本内容： 元素.innerHTML= "新内容"

操作元素属性注意：一下方法一般不能只才做元素类名和样式

1. 原生属性
   1. 获取： document.querySelector("div").属性名
   2. 设置： document.quertSelector('div').属性名 = '属性值'
2. 自定义属性
   1. 获取：元素.getAttribute("属性名")
   2. 设置：元素.setAttribute("属性名","属性值")
   3. 删除：元素.removeAttribute("属性名")

操作元素 类名 

1. 获取： 元素.className
2. 设置： 元素.className = "新类名"

操作元素行内样式注意： 只能获取和设置元素的行内样式

1. 获取：元素.style.样式名
2. 设置：元素.style.样式名 = "样式值"

获取元素非行内样式

  widow.getComputedStyle(元素).样式名

节点操作

1. 创建节点： document.createElement("标签名称")
2. 插入节点： 
   1. 父节点.appendChild(子节点)
   2. 父节点.insertBefore(要插入的子节点， 哪一个子节点的前面)
3. 删除节点
   1. 父节点.removeChild(子节点)
   2. .remove()   // 删除自己
4. 替换节点： 父节点.replaceChild(换上节点, 换下节点)
5. 克隆节点： 节点.cloneNode(是否克隆后代节点)  // true / false