1. 实例演示dom增删改的常用方法 2. 改写留言板案例, 添加自定义样式


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 1. 实例演示dom增删改的常用方法 
    2. 改写留言板案例, 添加自定义样式 -->
    <script>
      /**
       *1.createElement(ele):创建新的元素，doucment上调用
       *2.append(string/ele):追加到父级最后子节点后，在父节点上调用；也可在新元素上调用，添加内容。
       *3.before(string/ele):某元素之前插入节点，在当前元素上调用
       *4.after(string/ele):在某元素之后插入节点，在当前元素上调用
       *5.cloneNode(true):克隆节点（true:包含子节点),在要被克隆的节点上调用
       *6.replaceChild(ele,pos):替换子元素,在父级节点上调用
       *7.node.remove()：移除当前元素，在当前元素调用。
       *
       */
      // 创建新的元素
      const ul = document.createElement("ul");
      //追加元素
      document.body.append(ul);
      for (let i = 0; i < 6; i++) {
        const li = document.createElement("li");
        //添加内容
        li.append("item" + (i + 1));
        //设置字号大小
        li.style.fontSize = "30px";
        //追加元素
        ul.append(li);
      }
      console.log(ul);
      //创建元素，添加内容，添加样式，获取第三个li,插入节点
      const li = document.createElement("li");
      li.append("new item");
      li.style.color = "pink";
      li.style.fontSize = "30px";
      const item = document.querySelector("ul li:nth-of-type(3)");
      item.before(li);
      //克隆节点
      const newNode = li.cloneNode(true);
      item.after(newNode);
      //节点替换
      const newItem = document.createElement("li");
      newItem.append("替换后的节点");
      const oldItem = document.querySelector("ul li:last-of-type");
      ul.replaceChild(newItem, oldItem);
      //节点删除
      const deleteItem = document.querySelector("ul li:first-of-type");
      deleteItem.remove();
    </script>
    <script>
      //insertAdjacentElement('插入位置'，元素)
      //插入位置有四个
      //afterBegin:开始标签之后，第一个子元素
      //beforeBegin:开始标签之前，是它的前一个兄弟元素
      //beforeEnd:结束标签之前，它的最后一个子元素
      //afterEnd:结束标签之后，它的下一个兄弟元素
      const h3 = document.createElement("h3");
      h3.append("这是一个ul列表");
      ul.insertAdjacentElement("beforeBegin", h3);
      const insertItem = document.createElement("li");
      insertItem.append("这是一个afterBegin");
      ul.insertAdjacentElement("afterbegin", insertItem);
      const insertItem2 = document.createElement("li");
      insertItem2.append("这是一个beforeEnd");
      ul.insertAdjacentElement("beforeEnd", insertItem2);
      const h4 = document.createElement("h4");
      h4.append("这是一个footer");
      ul.insertAdjacentElement("afterEnd", h4);
    </script>
    <input type="text" name="message" id="message" onkeydown="addMessage(this)" palceholder="请输入留言" autofocus />
    <ul class="list"></ul>
    <script>
      //2. 改写留言板案例, 添加自定义样式
      let i = 0;
      function addMessage(ele) {
        if (event.key === "Enter") {
          if (ele.value.length === 0) {
            alert("留言不能为空");
            ele.focus();
            return false;
          }
          const ul = document.querySelector(".list");
          const li = document.createElement("li");
          //添加自定义属性
          li.setAttribute("data-index", ++i);
          //获取自定义属性
          ele.value = "第" + li.dataset.index + "条: " + ele.value + "<button onclick='del(this.parentNode)'>删除</button>";
          li.innerHTML = ele.value;
          //   console.log(li);
          ul.insertAdjacentElement("afterbegin", li);
          ele.value = null;
        }
      }
      function del(ele) {
        return confirm("要删除吗？") ? ele.remove() : false;
      }
    </script>
  </body>
</html>
相关文章
