【JS】DOM增删改(1元素增删改，2操作元素内容，3指定位置插入) - PHP前端

首页 > 博客列表 > 【JS】DOM增删改(1元素增删改，2操作元素内容，3指定位置插入)

博主信息

博文 94

粉丝 0

访问量 118060

专题推荐

更多>

DOM增删改(1元素增删改，2操作元素内容，3指定位置插入)

1.DOM元素的增删改

1.创建元素：createElement()
2.追加元素 :append()
3.创建片断：createDocumentFragment
4.后面添加：after()
5.前面添加：before()
6.克隆节点：cloneNode(true)
7.替换子元素：replaceChild()
8.删除元素：remove()

<!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>DOM元素的增删改</title>
  </head>
  <body>
    <script>
      /**
       * * 1.创建元素：createElement()
       * * 2.追加元素 :append()
       * * 3.创建片断：createDocumentFragment
       * * 4.后面添加：after()
       * * 5.前面添加：before()
       * * 6.克隆节点：cloneNode(true)
       * * 7.替换子元素：replaceChild()
       * * 8.删除元素：remove()
       */
      //1. 创建元素：createElement()
      const ul = document.createElement('ul');
      //2. 追加元素：append()
      //获取元素
      //  console.log(document.body)
      //  console.log(document.head)
      //  console.log(document.title)
      //  console.log(document.doctype)
      //  console.log(document.URL)
      //  console.log(document.defaultView)
      //  console.log(document.documentElement)
      // 3. 创建文档片段：createDocumentFragment()
      document.body.append(ul);
      //创建一个临时父级
      const frag = document.createDocumentFragment();
      for (let i = 1; i <= 5; i++) {
        const li = document.createElement('li');
        li.append(`item-${i}`);
        //先挂载到临时文档片断元素中（临时父级）
        //所有的操作，全在内存中进行，不会造成页面的无效重复渲染
        frag.append(li);
      }
      //统一渲染，片段挂载到ul上，只需要渲染一次
      ul.append(frag);
      // 4.后面添加：after()
      //在第3个元素后面添加一个新的<li>,分三步
      // 第一步：先要找到第3个元素
      const three = ul.querySelector(':nth-child(3)');
      // 第二步：创建一个新的元素
      let li = document.createElement('li');
      li.append('after item');
      // 第三步：添加到第3个元素后面
      three.after(li);
      // 5.前面添加：before()
      // 第一步：先要找到第3个元素
      // 第二步：创建一个新的元素
      li = document.createElement('li');
      li.append('before item');
      // 第三步：添加到第3个元素后面
      three.before(li);
      // 6.克隆节点：cloneNode(true)
      // true:深度克隆。将后代全部复制
      li = li.cloneNode(true);
      li.append('last item');
      ul.append(li);
      // 7.替换子元素：replaceChild()
      // replaceChild(新元素,旧元素)
      // 任务：将第一个元素替换
      // 第一步：找到第一个
      const first = ul.firstElementChild;
      // 第二步：创建一个新元素
      const h3 = document.createElement('h3');
      h3.append('php中文网');
      // 第三步：替换
      ul.replaceChild(h3, first);
      // 8.删除元素：remove()
      ul.firstElementChild.remove();
      ul.lastElementChild.remove();
      three.remove();
    </script>
  </body>
</html>

2.操作元素内容

1.textContent:全部内容（包括JS，css,隐藏内容）
2.innerText:返回已渲染（可见）内容
3.innerHTML:替换元素内容(html)
4.outerHTML:替换元素自身（html）

<!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>操作元素内容</title>
  </head>
  <body>
    <div class="box">
      <style>
        h2 {
          color: red;
        }
      </style>
      <h2>通知</h2>
      <span style="display: none">试用期员工不参加</span>
      <p>今天下午17：00开会，开发部，运营部全部参加</p>
    </div>
    <script>
      /**
       *  * 1.`textContent`:全部内容（包括JS，css,隐藏内容）
       *  * 2.`innerText`:返回已渲染（可见）内容
       *  * 3.`innerHTML`:替换元素内容(html)
       *  * 4.`outerHTML`:替换元素自身（html）
       */
      //box
      const box = document.querySelector('.box');
      let content = box.textContent;
      console.log(content);
      // 2. `innerText`:返回已渲染(可见)内容
      content = box.innerText;
      console.log(content);
      // 3.`innerHTML`:替换元素内容(html)
      box.innerHTML = '<h2>php中文网</h2>';
      // 4.`outerHTML`:替换元素自身（html）
      //box.outerHTML = '<h1>php中文网</h1>';
      box.outerHTML = null;
      // 干掉了box div
    </script>
  </body>
</html>

3.指定位置插入

指定位置插入

1）插入位置

1.beforebegin：起始元素前面
2.afterbegin：起始元素之后
3.beforeend：结束元素之前
4.afterend：结束元素之后

2）API方法

1.insertAdjacentElement()：指定位置插入元素
2.insertAdjacentIext()：指定位置插入文本节点
3.insertAdjacentHTML：指定位置插入元素节点（DOMString）

<!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>指定位置插入</title>
</head>
<body>
    <div class="list">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
    </div>
    <script>
        // 指定位置插入
        // （1）插入位置
        // 1.`beforebegin`：起始元素前面
        // 2.`afterbegin`：起始元素之后
        // 3.`beforeend`：结束元素之前
        // 4.`afterend`：结束元素之后
        // （2）API方法
        // 1.`insertAdjacentElement()`：指定位置插入元素
        // 2.`insertAdjacentIext()`：指定位置插入文本节点
        // 3.`insertAdjacentHTML`：指定位置插入元素节点（DOMString）
        const list = document.querySelector('.list');
        //1.`insertAdjacentElement()`：指定位置插入元素
        const h3 = document.createElement('h3');
        h3.textContent='商品列表';
        list.insertAdjacentElement('beforebegin',h3)
        // 2.`insertAdjacentIext()`：指定位置插入文本节点
        h3.insertAdjacentText('beforeend','(特价)')
        // 3.`insertAdjacentHTML`：指定位置插入元素节点（DOMString）
        // 创建html元素：createElement(),element.innerHTML
        // 可以将HTML字符串，直接解析成html元素
        let p = '<p style="color:red">商品数量：5 件</p>';
        // list.after(p);
        // list.innerHTML =p;
        list.insertAdjacentHTML('afterend',p);
    </script>
</body>
</html>

批改老师：

PHPz

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

【HTML】文档结构与元素，标签，属性的类型

2022-11-27 20:51:59