首页 > 博客列表 > Dom常用增删改操作及留言板案例

博主信息

博文 48

粉丝 3

访问量 45949

专题推荐

更多>

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);

效果预览

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

uni-app之tab选项卡

2022-09-01 16:35:49