【JavaScript】DOM节点-创建、插入、删除、替换、克隆节点

芒果Cake

已于 2023-01-04 21:12:42 修改

阅读量1.3k

点赞数

文章标签： javascript 前端开发语言

于 2023-01-04 20:24:34 首次发布

本文链接：https://blog.csdn.net/huangwfu/article/details/128553857

版权

文章目录

DOM节点

DOM节点

创建节点

1. 创建元素节点

        - 语法  document.createElement('标签名')
        - 返回值  创建好的元素节点

2. 创建文本节点

        - 语法  document.createTextNode('文本内容')
        - 返回  创建好的文本节点

// 1. 创建元素节点
    var ele = document.createElement("div");
    //   console.log(ele);
    var str = `<h1>hello</h1>`;
    ele.innerHTML = str;
    //   ele.innerText = str;
    ele.classList.add("box");
    ele.style.background = "red";
    console.log(ele);

  // 2. 创建文本节点
  var ele = document.createTextNode("你好");
  console.log(ele);

插入节点

1. appendChild()

        - 语法  父节点.appendChild(子节点)
        - 作用  把 子节点 插入到 父节点中， 在最后面的位置

2. insertBefore()

        - 语法  父节点.insertBefore(子节点, 谁的前面)
        - 作用  把 子节点 插入到 父节点中，并且放到某一个节点的前面
        - 注意  第二个参数必须写，但是第二个参数有没有可以忽略

// 1. appendChild()
  var ele = document.createElement("h1");
  ele.innerText = "你好";
  console.log(ele);

// 获取元素
  var div = document.querySelector("div");
// 父节点.appendChild(子节点)
  div.appendChild(ele);

// 2. insertBefore
var ele = document.createElement("h1");
ele.innerText = "你好";
// 父节点.insertBefore(子节点, 谁的前面)
var div = document.querySelector("div");
var span = document.querySelector("span:nth-of-type(2)");

div.insertBefore(ele, span);

删除节点

1. removeChilde()

        - 语法 父节点.removeChild(子节点)
        - 作用 把 子节点 从 父节点中删除

2. remove()

        - 语法 节点.remove()
        - 作用 把自己删除

// 1. removeChild
    var div = document.querySelector("div");
    var h1 = document.querySelector("h1");

    div.removeChild(h1);

  // 2. remove
  var liList = document.querySelectorAll("li");
  liList.forEach(function (item) {
    item.onclick = function () {
      item.remove();
    };
  });

替换节点

replaceChild()

        - 语法 父节点.replaceChild(换上节点, 换下节点)
        - 作用 在父节点中 用换上节点 替换 换下节点

 var div = document.querySelector("div");
  var h1 = document.querySelector("h1");
  var btn = document.querySelector("button");

  var h2 = document.createElement("h2");
  h2.innerHTML = "你好，小花";
  btn.onclick = function () {
    div.replaceChild(h2, h1);
  };

克隆节点

cloneNode()

        - 语法 节点.cloneNode(参数)

                                 true          克隆后代节点
                                 false   默认  不克隆后代节点
        - 把该节点复制一份一模一样的

<body>
    <div
      class="box"
      id="tom"
      style="height: 300px; width: 300px; background-color: red"
    >
      <p style="width: 100px; height: 100px; background-color: pink">
        <span style="background-color: green">文字</span>
      </p>
    </div>
    <button>复制</button>
  </body>
<script>

  var box = document.querySelector(".box");
  var btn = document.querySelector("button");

  btn.onclick = function () {
    var res = box.cloneNode(true);
    // 把res这个节点放到body里面的最后面 appendChild
    document.body.appendChild(res);
  };
</script>

节点属性

    - 每一个节点都有自己的属性
    - 按照类型区分

1. 节点类型

    nodeType
    -> 元素节点 1
    -> 属性节点 2
    -> 文本节点 3
    -> 注释节点 8

2. 节点名称

     nodeName
    -> 元素节点  大写标签名
    -> 属性节点  属性名
    -> 文本节点  #text
    -> 注释节点  #comment

3. 节点内容

     nodeValue 
    -> 元素节点  null
    -> 属性节点  属性值
    -> 文本节点  文本内容
    -> 注释节点  注释内容

// 0 获取节点
  // 元素节点
  var div = document.querySelector("div");
  // 属性节点
  var attr = div.attributes[0];
  // 文本节点
  var text = div.childNodes[0];
  // 注释节点
  var comment = div.childNodes[1];

  console.log("元素节点", div);
  console.log("属性节点", attr);
  console.log("文本节点", text);
  console.log("注释节点", comment);

  // nodeType
  console.log("元素节点", div.nodeType);
  console.log("属性节点", attr.nodeType);
  console.log("文本节点", text.nodeType);
  console.log("注释节点", comment.nodeType);

  // nodeName
  console.log("元素节点", div.nodeName);
  console.log("属性节点", attr.nodeName);
  console.log("文本节点", text.nodeName);
  console.log("注释节点", comment.nodeName);

  // nodeValue
  console.log("元素节点", div.nodeValue);
  console.log("属性节点", attr.nodeValue);
  console.log("文本节点", text.nodeValue);
  console.log("注释节点", comment.nodeValue);