dom常用增刪改操作及留言板案例

1.常用增刪改操作的 API

API	描述
`createElement(ele)`	創(chuàng)建新元素, document上調(diào)用
`append(string/ele)`	追加到父級(jí)最后子節(jié)點(diǎn)后,在父節(jié)點(diǎn)上調(diào)用
`before(string/ele)`	在當(dāng)前元素之前插入節(jié)點(diǎn), 在當(dāng)前元素上調(diào)用
`after(string/ele)`	在當(dāng)前元素之后插入節(jié)點(diǎn), 在當(dāng)前元素上調(diào)用
`cloneNode(true)`	克隆節(jié)點(diǎn)(true:當(dāng)前節(jié)點(diǎn)所有子節(jié)點(diǎn)),在要被克隆的節(jié)點(diǎn)上調(diào)用
`replaceChild(ele,pos)`	替換子元素,在父級(jí)節(jié)點(diǎn)上調(diào)用
`remove(ele)`	移除子元素, 在當(dāng)前節(jié)點(diǎn)上調(diào)用

代碼塊：

 <!-- 1. 實(shí)例演示dom增刪改的常用方法 -->
    <script>
      // 1. 創(chuàng)建元素 在document上調(diào)用
      // 創(chuàng)建一個(gè)ul 創(chuàng)建號(hào)的ul在內(nèi)存中 沒有渲染到html頁(yè)面中
      const ul = document.createElement("ul");
      // 2.追加元素 在追加的元素的父節(jié)點(diǎn)上調(diào)用
      // 此時(shí)追加ul元素 就應(yīng)該在它的父級(jí)元素上調(diào)用
      document.body.append(ul);
      // 在ul下面追加子元素li;
      for (let index = 0; index < 5; index++) {
        const li = document.createElement("li");
        // append() 可以追加元素外還可以追加文本內(nèi)容
        li.append("item-" + (index + 1));
        ul.append(li);
      }
      // 3.在當(dāng)前元素之前插入元素
      //   3.1 創(chuàng)建要插入的元素
      let li = document.createElement("li");
      //   3.2 追加文本內(nèi)容
      li.append("新元素");
      //   3.3 設(shè)置css樣式
      li.style.color = "red";
      //   3.4 插入：當(dāng)前節(jié)點(diǎn).before(新節(jié)點(diǎn))
      const item3 = ul.querySelector("li:nth-of-type(3)");
      item3.before(li);
      // 4.克隆 參數(shù)為true時(shí) 表示克隆當(dāng)前元素下的所有子元素 含文本內(nèi)容
      li = li.cloneNode(true);
      // 5.在當(dāng)前元素之后插入元素
      item3.after(li);
      // 6.替換子元素 在父節(jié)點(diǎn)上調(diào)用 當(dāng)前元素.replaceChild(新元素，舊元素)
      //   6.1 創(chuàng)建新元素 新值
      const newNode = document.createElement("li");
      newNode.append("我是替換最后一個(gè)li的新元素");
      newNode.style.backgroundColor = "cyan";
      //   6.2 找到需要被替換的值 最后一個(gè)li
      const targetNode = document.querySelector("li:last-of-type");
      //   6.3 替換
      ul.replaceChild(newNode, targetNode);
      // 7.移除/刪除 在當(dāng)前節(jié)點(diǎn)調(diào)用 誰(shuí)調(diào)刪誰(shuí)
      ul.firstElementChild.remove();
   </script>

效果：

insertAdjacentElement('插入位置', 元素)

插入位置	描述
`beforeBegin`	開始標(biāo)簽之前,是它的前一個(gè)兄弟元素
`afterBegin`	開始標(biāo)簽之后,第一個(gè)子元素
`beforeEnd`	結(jié)束標(biāo)簽之前,它的最后一個(gè)子元素
`afterEnd`	結(jié)束標(biāo)簽之后,它的下一個(gè)兄弟元素

代碼塊：

 <body>
    <ul>
      <li>商品1</li>
      <li>商品2</li>
      <li>商品3</li>
      <li>商品4</li>
    </ul>
    <style>
      ul {
        border: 1px solid red;
      }
    </style>
 </body>

<script>
    // insertAdjacentElement(參數(shù)1,參數(shù)2)
    //   參數(shù)1：插入位置 有四個(gè)
    //   參數(shù)2：需要插入的元素 支持標(biāo)簽語(yǔ)義化 能識(shí)別html標(biāo)簽
    //   獲取當(dāng)前ul元素
    const ul = document.querySelector("ul");
    //   在當(dāng)前列表的前面插入一個(gè)標(biāo)題
    const h3 = document.createElement("h3");
    h3.append("商品列表");
    //   在ul開始標(biāo)簽之前插入 插入之后是其兄弟元素 同級(jí)
    ul.insertAdjacentElement("beforebegin", h3);
    //   在ul開始標(biāo)簽之后插入 插入之后是其第一個(gè)子元素 子集
    ul.insertAdjacentHTML("afterbegin", '<li style="color:red">第一個(gè)元素</li>');
    //   在ul結(jié)束標(biāo)簽之前插入 插入之后是其最后一個(gè)子元素 子集
    ul.insertAdjacentHTML("beforeend", '<li style="color:blue">最后一個(gè)元素</li>');
    //   在ul結(jié)束標(biāo)簽之后插入 插入之后是其兄弟元素 同級(jí)
    ul.insertAdjacentHTML("afterend", "<h4>共計(jì): 6個(gè)</h4>");
</script>

效果：

2.js操作元素內(nèi)容

屬性	描述
`textContent`	返回所有文本內(nèi)容，不包含html標(biāo)簽
`innerText`	返回正常文本，隱藏的文本不輸出
`innerHTML`	返回所有內(nèi)容，包含html標(biāo)簽，在輸出時(shí)html會(huì)被正常渲染到文檔中
`outerHTML`	返回字符串，將所有內(nèi)容包含html標(biāo)簽轉(zhuǎn)為字符串，用于存儲(chǔ)一些動(dòng)態(tài)html樣式到服務(wù)器中

3.自定義屬性對(duì)象dataset

1.聲明方式：以data-為前綴，后面跟上具體的變量名稱，如data-name
2.使用方式:ele.dataset.name ele是設(shè)置自定義屬性的節(jié)點(diǎn)元素
3.特例：在聲明時(shí)除了前綴的標(biāo)識(shí)符-以外，有第二個(gè)標(biāo)識(shí)符-,那么使用時(shí)可通過駝峰式命名獲取自定義屬性的值，例如：聲明：data-app-name 使用:data-appName

4.案例-留言板

css代碼

* {
  padding: 0;
  margin: 0;
  outline: none;
}
li {
  list-style: none;
  padding: 0 10px;
}
body header {
  background-color: antiquewhite;
  width: 100%;
  height: 50px;
}
body header h3 {
  text-align: center;
  line-height: 50px;
}
body main {
  background-color: lavenderblush;
  width: 100%;
  height: 500px;
  display: grid;
  place-items: start center;
}
body main input {
  width: 80%;
  height: 30px;
  margin-top: 10px;
}
body main ul {
  width: 80%;
  height: 440px;
  background-color: white;
  box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.404);
}
body main ul li {
  display: grid;
  grid-template-columns: 10% 80% 10%;
  margin-top: 5px;
  gap: 0 5px;
}
body main ul li p {
  font-size: 14px;
  color: #353434;
  place-self: center start;
}
body main ul li button {
  cursor: pointer;
  border: none;
  background-color: lightpink;
}
body main ul li button:hover {
  background-color: red;
  color: white;
}
body main ul li img {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  border: 1px solid lightcoral;
  place-self: center end;
}

html代碼

<header>
    <h3>留言板</h3>
</header>
<main>
    <!-- onkeydown 鍵盤事件 -->
    <input type="text" onkeydown="addMsg(this)" placeholder="請(qǐng)輸入留言" autofocus />
    <ul class="list"></ul>
</main>

js代碼

function addMsg(ele) {
// 事件方法中有一個(gè)對(duì)象,表示當(dāng)前事件: event
// 判斷用戶是否提交了留言,通過是否按下了回車鍵
if (event.key === "Enter") {
    // 留言非空驗(yàn)證
    if (ele.value.length === 0) {
    alert("留言不能為空");
    // 重置焦點(diǎn)到輸入框中
    ele.focus();
    return false;
    }
    // 2. 添加留言
    ul = document.querySelector(".list");
    // 為每條留言添加刪除功能
    // 創(chuàng)建img元素 且路徑隨機(jī)生成
    const img = `<img style='' src='images/${Math.round(Math.random() * 4)}.png'/>`;
    // 創(chuàng)建button 并添加單擊事件來實(shí)現(xiàn)刪除功能 傳入?yún)?shù)是當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn) 刪除的是整個(gè)li
    const btn = "<button onclick='del(this.parentNode)'>刪除</button>";
    // 字符串拼接
    ele.value = img + `<p>${ele.value}</p>` + btn;
    // insertAdjacentHTML 能識(shí)別字符串中的html標(biāo)簽
    ul.insertAdjacentHTML("afterbegin", `<li>${ele.value}</li>`);
    // 3. 清空輸入框
    ele.value = null;
}
}
// 刪除功能
del = (ele) => (confirm("是否刪除?") ? ele.remove() : false);