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

1.常用增刪改操作的 API

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

代碼塊：

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

效果：

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

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

代碼塊：

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

效果：

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

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

3.自定義屬性對象dataset

1.聲明方式：以data-為前綴，后面跟上具體的變量名稱，如data-name
2.使用方式:ele.dataset.name ele是設(shè)置自定義屬性的節(jié)點元素
3.特例：在聲明時除了前綴的標(biāo)識符-以外，有第二個標(biāo)識符-,那么使用時可通過駝峰式命名獲取自定義屬性的值，例如：聲明：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="請輸入留言" autofocus />
    <ul class="list"></ul>
</main>

js代碼

function addMsg(ele) {
// 事件方法中有一個對象,表示當(dāng)前事件: event
// 判斷用戶是否提交了留言,通過是否按下了回車鍵
if (event.key === "Enter") {
    // 留言非空驗證
    if (ele.value.length === 0) {
    alert("留言不能為空");
    // 重置焦點到輸入框中
    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 并添加單擊事件來實現(xiàn)刪除功能 傳入?yún)?shù)是當(dāng)前節(jié)點的父節(jié)點 刪除的是整個li
    const btn = "<button onclick='del(this.parentNode)'>刪除</button>";
    // 字符串拼接
    ele.value = img + `<p>${ele.value}</p>` + btn;
    // insertAdjacentHTML 能識別字符串中的html標(biāo)簽
    ul.insertAdjacentHTML("afterbegin", `<li>${ele.value}</li>`);
    // 3. 清空輸入框
    ele.value = null;
}
}
// 刪除功能
del = (ele) => (confirm("是否刪除?") ? ele.remove() : false);