常见的DOM操作

1、获取DOM节点

    <div class="container">
      <ul>
        <li>1</li>
        <li id="frist">2</li>
        <li>3</li>
      </ul>
     </div>
  
   // 获取节点

    （1）根据id查询
      let list = document.getElementById("frist");
      console.log(list);
    
    （2）根据类名查询    
      let content = document.getElementsByClassName("container");
      console.log(content);
 
    （3）根据css选择器查询    
      let lis = document.querySelectorAll("li");
      console.log(lis);

    （4）根据标签名查询    
      let ul = document.getElementsByTagName("ul");
      console.log(ul);

2、创建DOM节点

  <div class="box"></div>

  // 创建节点

    （1）先获取父节点
      let box = document.getElementsByClassName("box")[0];
      console.log(box);

    （2）创建新节点
      let words = document.createElement("span");

    （3）设置新节点的内容
      words.innerHTML = "hello word!";
      console.log(words);

    （4）将新节点放入父节点中
      box.appendChild(words);

3、删除DOM节点

    <div class="show">
      <p id="del">哈哈哈</p>
    </div>

   // 删除节点
   
     方法一： 
    （1）获取目标元素的父节点
      let del = document.getElementsByClassName("show")[0];

    （2）获取需要删除的目标节点：通过获取DOM节点方法来获取目标节点
      let remove = document.getElementById("del");

    （3）从父元素中删除目标节点
      del.removeChild(remove);

     方法二：
    （1）获取目标元素的父节点
      let del = document.getElementsByClassName("show")[0];

    （2）获取需要删除的目标节点：通过子节点数组来获取目标节点
      let remove = del.childNodes[1];

    （3）从父元素中删除目标节点
      del.removeChild(remove);

4、修改DOM节点

  <div id="container">
      <p id="test">段落标签</p>
      <h1 id="title">标题标签</h1>
    </div>

 // 修改节点

    （1）获取父节点
      let container = document.getElementById("container");

    （2）分别获取两个需要交换位置的节点
      let test = document.getElementById("test");
      let title = document.getElementById("title");

    （3）交换两个节点的位置
      container.insertBefore(title, test);

    （4）修改节点内容
      title.innerHTML = "我爱中国";

　　 （5）修改节点style属性

        title.style.color = "red";