Home > List of blog posts > Dom常用增删改操作及留言板案例

Blogger Information

Blog 48

fans 3

comment 1

visits 30459

Special Recommendation

More>

Related recommendations

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

1.常用增删改操作的 API

API	描述
`createElement(ele)`	创建新元素, document上调用
`append(string/ele)`	追加到父级最后子节点后,在父节点上调用
`before(string/ele)`	在当前元素之前插入节点, 在当前元素上调用
`after(string/ele)`	在当前元素之后插入节点, 在当前元素上调用
`cloneNode(true)`	克隆节点(true:当前节点所有子节点),在要被克隆的节点上调用
`replaceChild(ele,pos)`	替换子元素,在父级节点上调用
`remove(ele)`	移除子元素, 在当前节点上调用

代码块：

 <!-- 1. 实例演示dom增删改的常用方法 -->
    <script>
      // 1. 创建元素 在document上调用
      // 创建一个ul 创建号的ul在内存中 没有渲染到html页面中
      const ul = document.createElement("ul");
      // 2.追加元素 在追加的元素的父节点上调用
      // 此时追加ul元素 就应该在它的父级元素上调用
      document.body.append(ul);
      // 在ul下面追加子元素li;
      for (let index = 0; index < 5; index++) {
        const li = document.createElement("li");
        // append() 可以追加元素外还可以追加文本内容
        li.append("item-" + (index + 1));
        ul.append(li);
      }
      // 3.在当前元素之前插入元素
      //   3.1 创建要插入的元素
      let li = document.createElement("li");
      //   3.2 追加文本内容
      li.append("新元素");
      //   3.3 设置css样式
      li.style.color = "red";
      //   3.4 插入：当前节点.before(新节点)
      const item3 = ul.querySelector("li:nth-of-type(3)");
      item3.before(li);
      // 4.克隆 参数为true时 表示克隆当前元素下的所有子元素 含文本内容
      li = li.cloneNode(true);
      // 5.在当前元素之后插入元素
      item3.after(li);
      // 6.替换子元素 在父节点上调用 当前元素.replaceChild(新元素，旧元素)
      //   6.1 创建新元素 新值
      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.移除/删除 在当前节点调用 谁调删谁
      ul.firstElementChild.remove();
   </script>

效果：

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

插入位置	描述
`beforeBegin`	开始标签之前,是它的前一个兄弟元素
`afterBegin`	开始标签之后,第一个子元素
`beforeEnd`	结束标签之前,它的最后一个子元素
`afterEnd`	结束标签之后,它的下一个兄弟元素

代码块：

 <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(参数1,参数2)
    //   参数1：插入位置 有四个
    //   参数2：需要插入的元素 支持标签语义化 能识别html标签
    //   获取当前ul元素
    const ul = document.querySelector("ul");
    //   在当前列表的前面插入一个标题
    const h3 = document.createElement("h3");
    h3.append("商品列表");
    //   在ul开始标签之前插入 插入之后是其兄弟元素 同级
    ul.insertAdjacentElement("beforebegin", h3);
    //   在ul开始标签之后插入 插入之后是其第一个子元素 子集
    ul.insertAdjacentHTML("afterbegin", '<li style="color:red">第一个元素</li>');
    //   在ul结束标签之前插入 插入之后是其最后一个子元素 子集
    ul.insertAdjacentHTML("beforeend", '<li style="color:blue">最后一个元素</li>');
    //   在ul结束标签之后插入 插入之后是其兄弟元素 同级
    ul.insertAdjacentHTML("afterend", "<h4>共计: 6个</h4>");
</script>

效果：

2.js操作元素内容

属性	描述
`textContent`	返回所有文本内容，不包含html标签
`innerText`	返回正常文本，隐藏的文本不输出
`innerHTML`	返回所有内容，包含html标签，在输出时html会被正常渲染到文档中
`outerHTML`	返回字符串，将所有内容包含html标签转为字符串，用于存储一些动态html样式到服务器中

3.自定义属性对象dataset

1.声明方式：以data-为前缀，后面跟上具体的变量名称，如data-name
2.使用方式:ele.dataset.name ele是设置自定义属性的节点元素
3.特例：在声明时除了前缀的标识符-以外，有第二个标识符-,那么使用时可通过驼峰式命名获取自定义属性的值，例如：声明：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) {
// 事件方法中有一个对象,表示当前事件: event
// 判断用户是否提交了留言,通过是否按下了回车键
if (event.key === "Enter") {
    // 留言非空验证
    if (ele.value.length === 0) {
    alert("留言不能为空");
    // 重置焦点到输入框中
    ele.focus();
    return false;
    }
    // 2. 添加留言
    ul = document.querySelector(".list");
    // 为每条留言添加删除功能
    // 创建img元素 且路径随机生成
    const img = `<img style='' src='images/${Math.round(Math.random() * 4)}.png'/>`;
    // 创建button 并添加单击事件来实现删除功能 传入参数是当前节点的父节点 删除的是整个li
    const btn = "<button onclick='del(this.parentNode)'>删除</button>";
    // 字符串拼接
    ele.value = img + `<p>${ele.value}</p>` + btn;
    // insertAdjacentHTML 能识别字符串中的html标签
    ul.insertAdjacentHTML("afterbegin", `<li>${ele.value}</li>`);
    // 3. 清空输入框
    ele.value = null;
}
}
// 删除功能
del = (ele) => (confirm("是否删除?") ? ele.remove() : false);

效果预览

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

uni-app之tab选项卡

2022-09-01 16:35:49