常用DOM操作

一、文档节点的相关操作

1.DOM是什么？

DOM全称是document object model(文档对象模型)
JS将整个HTML/XML文档看成一个对象，也称为DOM树
DOM树由各种类型的节点组成

2.获取DOM元素的五种方式

标签：document.getElementsByTagName()
ID：document.getElementById()
CLASS：document.getElementsByClassName()
API:document.querySelector()/document.querySelectorAll()

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>如何获取页面元素</title>
  </head>
  <body>
    <div id="list">
      <ul class="poster">
        <li name="active">php中文网</li>
        <li>前端开发</li>
        <li>服务端开发</li>
      </ul>
      <ul>
        <li>安卓开发</li>
      </ul>
    </div>
    <script>
      //1.标签：返回的是一个元素的集合
      var ul = document.getElementsByTagName("ul");
      console.log(ul);
      console.log(ul[0]);
      console.log(ul.item(0));
      //2.id:只返回具有指定id的第一个元素(唯一)
      var list = document.getElementById("list");
      console.log(list);
      //id的替代语法
      var div = document.getElementsByTagName("div");
      console.log(div.namedItem("list"));
      console.log(div.namedItem("list") === list);
      var active = document.getElementsByTagName("li").namedItem("active");
      console.log(active);
      active.style.color = "red";
      //在元素级别调用以上的api方法来获取元素
      var lis = ul.item(0).getElementsByTagName("li");
      console.log(lis);
      lis.namedItem("active").style.backgroundColor = "blue";
      //3.class返回一个html集合
      var poster = document.getElementsByClassName("poster");
      console.log(poster);
      poster.item(0).style.border = "1px solid";
      //4.推荐使用querySelector(css选择器)：获取满足条件的集合中的第一个元素（类似于id）
      //querySelectorAll(css选择器)：获取满足条件的去拿不元素组成的集合
      var div = document.querySelector("#list li");
      console.log(div);
      //5.获取多个
      var lis = document.querySelectorAll(".poster > *");
      console.log(lis);
    </script>
  </body>
</html>

3.节点与元素集合

NodeList:所有类型的节点集合，包括了元素，文本，注释，片段，文档，属性…

HTMLColletion:HTML元素的节点集合 NodeList > HTMLCollection,是NOdeList一个子集

节点是dom中的最小单元

节点有：元素，文本节点，注释节点，片段节点，文档节点…
子节点：

children:只返回父节点中的元素子节点

childNodes:返回指定节点的子节点的节点列表
父节点：

parentElement:返回父节点

充当父节点永远不可能是文本或属性，只能是元素或文档

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <p>Hello Word!</p>
      <h3>php中文网</h3>
      <a href="">百度</a>
    </div>
    <ul>
      <li>子节点</li>
    </ul>
  </body>
  <script>
    var div = document.querySelector("div");
    //childNodes返回指定节点的子节点的节点列表
    console.log(div.childNodes);
    //过滤掉节点集合中的非元素节点
    for (var i = 0; i < div.childNodes.length; i++) {
      var currentNode = div.childNodes.item(i);
      if (currentNode.nodeType === 1) {
        console.log(currentNode.tagName.toLowerCase());
      }
    }
    //children:只返回父节点中的元素子节点
    console.log(div.children);
    //如果只想获取第一个子元素级的节点
    console.log(div.firstElementChild);
    console.log(div.lastElementChild);
    console.log(div.children.item(1));
    var li = document.querySelector("li");
    //充当父节点永远不可能是文本或属性，只能是元素或文档
    console.log(li.parentElement);
  </script>
</html>

4.元素的新增，删除

创建元素：createElement()
创建一个元素的片段：createDocumentFragment()
删除元素：removeChild()

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>元素的动态添加与删除</title>
  </head>
  <body>
    <ul></ul>
    <h1>删除元素</h1>
  </body>
  <script>
    //创建元素并添加到页面中
    var h2 = document.createElement("h2");
    //给元素添加内容
    h2.innerText = "欢迎来到php中文网学习！";
    //如果添加的内容有html标签
    h2.innerHTML = "欢迎来到<span style='color:red'>php中文网</span>学习！";
    //把元素添加到页面中，必须在父节点上添加
    document.body.appendChild(h2);
    //添加多个
    var ul = document.querySelector("ul");
    /*     for (var i = 0; i < 10; i++) {
      var li = document.createElement("li");
      li.innerText = "列表项" + (i + 1);
      ul.appendChild(li);
    } */
    //为防止每添加一个元素导致页面dom树重新渲染一次
    //借助文档片段来解决这个问题
    //先创建一个临时文档片段
    //将生成的10个li添加到内存中的这个文档片段节点中
    //将这个文档片段一次性添加到页面中，此时页面只会渲染一次
    var frag = document.createDocumentFragment();
    for (var i = 0; i < 10; i++) {
      var li = document.createElement("li");
      li.innerText = "列表项" + (i + 1);
      frag.appendChild(li);
    }
    //获取父元素
    var bo = document.body;
    //获取父元素中的子元素
    var h1 = document.querySelector("h1");
    console.log(h1);
    //删除指定的元素
    bo.removeChild(h1);
  </script>
</html>

5.事件

事件属性：on事件名称
监听器：addEventListernaer()
事件方法：函数表达式/匿名函数

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件基础</title>
  </head>
  <body>
    <!-- 将事件作为元素的一个特殊属性添加到元素上面，用on为前缀 -->
    <!-- <button onclick="表达式/js语句">按钮</button> -->
    <button onclick="alert(this.firstChild.nodeValue)">按钮</button>
    <button>点我试试看</button>
    <a href="https://www.baidu.com">百度一下</a>
    <script>
      //获取第二个按钮
      var btn = document.querySelector("button:nth-of-type(2)");
      console.log(btn);
      //绑定事件
      //addEventListener(事件类型，回调函数，冒泡/捕获)
      btn.addEventListener(
        "mouseover",
        function (ev) {
          //ev.target:触发事件的对象
          console.log(ev.target);
          ev.target.style = "width:100px";
          ev.target.style = "height:100px";
        },
        false
      );
      btn.addEventListener(
        "mouseout",
        function (ev) {
          //ev.target:触发事件的对象
          console.log(ev.target);
          ev.target.style = "none";
        },
        false
      );
      //获取链接
      var link = document.querySelector("a");
      console.log(link);
      link.onclick = function (ev) {
        //禁止原对象的默认行为
        ev.preventDefault();
        btn.style = "none";
      };
    </script>
  </body>
</html>

二、经典的ToDoList案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>经典的ToDoList</title>
  </head>
  <body>
    <form action="" id="comment" method="post">
      <label for="content">求留言：</label>
      <input type="text" name="content" />
      <button>提交</button>
    </form>
    <ul></ul>
    <script>
      //获取表单
      var form = document.forms.namedItem("comment");
      //获取留言区
      var ul = document.querySelector("ul");
      //创建自动回复数组
      var arrs = [
        "欢迎来到php中文网学习！",
        "好好学习，天天向上！",
        "你有什么事情？",
        "请到php中文网学习相关课程！",
        "今天是个好天气！",
        "抓紧时间学习吧！",
        "学习使我快乐！",
        "php是世界上最好的语言！",
        "学无止境！",
        "学会自律，才能进步！",
      ];
      console.log(arrs);
      var rand = 0;
      //监听表单的提交事件
      form.addEventListener(
        "submit",
        function (ev) {
          ev.preventDefault();
          console.log("事件被监听了");
          //创建一条新留言
          var li = document.createElement("li");
          if (form.content.value.trim().length === 0) {
            alert("内容为空");
            form.content.focus();
            return false;
          } else {
            setInterval(function () {
              rand = parseInt(Math.random() * 10);
              //console.log(rand);
            }, 2000);
            li.innerHTML =
              form.content.value +
              '<a href="" onclick="del(this)">删除</a>' +
              "<br><p>" +
              arrs[rand] +
              "</p><hr>";
            //
          }
          //将留言添加到列表中
          //将最新留言放到最前面
          //留言为空的时候，直接插入，否则就插入到新一条留言之前
          if (ul.childElementCount === 0) {
            ul.appendChild(li);
          } else {
            //insertBefore(要插入的元素，插入的位置)
            ul.insertBefore(li, ul.firstElementChild);
          }
          //清空留言框
          form.content.value = null;
          form.content.focus();
        },
        false
      );
      function del(ele) {
        this.event.preventDefault();
        console.log(ele.parentElement);
        return confirm("是否删除？")
          ? ul.removeChild(ele.parentElement)
          : false;
      }
    </script>
  </body>
</html>