查找dom元素 document.querySelector(selectors) document.querySelectorAll(selectors)

document.getElementById(idName) document.getElementsByName(elementName) document.getElementsByClassName(className)

给dom增加样式 ele.style.color = 'red'

给dom添加class Ele.className='aaa' // 设置元素的class为aaa ，如果元素上原本有class则会覆盖 Ele.classList.add("aaa") // 给Ele新增aaa

判断元素上是否有某个属性 Ele.classList.contains("aaa") // 如果Ele上面的class类名是aaa返回true，否则返回false

面向dom元素的增删改查

创建dom元素 const p = document.createElement("p")

删除dom元素 Ele.remove(); // 删除ELe Ele.removeChild(clildEle) // 删除ELe中的子元素 childEle

插入dom元素 Ele.appendChild(ele) 在Ele的最后插入ele //Ele.insertBefore(newele,ele) // 在Ele元素中的 ele元素前插入 newele

替换DOM

微信公众号

<button id="btn">变换</button>
<script>
  const btnDom = document.getElementById("btn");
  const box = document.getElementsByClassName("box")[0];
  const h1 = document.getElementsByTagName("h1")[0];
  const h2 = document.createElement("h2");
  h2.innerText = "码不停息";
  btnDom.onclick = function () {
    box.replaceChild(h2, h1);
  };

</script>

复制dom元素 const box = document.getElementsByClassName("box")[0]; const p = document.createElement("p"); p.innerText = "欢迎关注码不停息微信公众号"; const p2 = p.cloneNode(true); // 复制一个p 参数true标识深度复制，如果p里面有子节点也复制过来 box.appendChild(p); box.appendChild(p2);

juejin.cn/post/696606…

原生dom操作

微信公众号