js节点操作

王昭没有君啊

已于 2022-02-08 18:35:33 修改

阅读量373

点赞数 2

分类专栏： JavaScript 文章标签： javascript html5 开发语言

于 2022-01-15 11:23:19 首次发布

本文链接：https://blog.csdn.net/weixin_58448088/article/details/122505914

版权

JavaScript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

5. 获取div标签对象中的第一个标签节点

6. 获取div标签对象中的最后一个标签节点

一、概念

节点操作是DOM操作的另外一种语法形式

DOM操作是以html标签对象为单位，获取的是html中的标签操作的是html标签对象

节点操作是以DOM节点为操作对象，操作的是html标签对象

实际项目中一般不会使用DOMj节点操作，获取标签操作等

一般使用DOM节点操作，创建标签节点克隆标签节点写入标签节点

二、获取节点

<!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>Document</title>
</head>
<body>
  <div>
    我是div标签
    <p>我是p标签</p>
    <!-- 我是注释内容 -->
    <span id="span1" class="span2" name="span3">我是span标签</span>
    <h1>我是h1标签</h1>
    <a href="JavaScript:;">我是a标签</a>
  </div>
<script>

    //获取标签对象
    var oDiv = document.querySelector('div');
    var oSpan = document.querySelector('span');

  </script>
</body>
</html>

以下内容，均在script标签中进行操作：

1. 获取div标签对象中的所有节点

console.log(oDiv.childNodes);

2. 获取div标签对象中的标签节点

console.log(oDiv.children);

3. 获取div标签对象中的第一个节点

console.log(oDiv.firstChild);

4. 获取div标签对象中的最后一个节点

console.log(oDiv.lastChild);

5. 获取div标签对象中的第一个标签节点

console.log(oDiv.firstElementChild);

6. 获取div标签对象中的最后一个标签节点

console.log(oDiv.lastElementChild);

7. 获取span标签上一个节点

console.log(oSpan.previousSibling);

8. 获取span标签下一个节点

console.log(oSpan.nextSibling);

9. 获取span标签上一个标签节点

console.log(oSpan.previousElementSibling);

10. 获取span标签下一个标签节点

console.log(oSpan.nextElementSibling);

11. 获取span标签父级节点

console.log(oSpan.parentNode);

12. 获取span标签属性节点

console.log(oSpan.attributes);

三、创建节点

1.创建标签节点

var 变量 = document.createElement('标签名称');

创建一个空标签

通过 DOM操作给标签节点设定内容，样式，事件等等操作

2.写入标签节点

2.1 在标签对象的末位新增标签节点

标签对象.appendChild(标签节点);

2.2 在标签对象中指定的标签之前写入节点

标签对象.insertBfore(写入节点，在谁之前);

<!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>Document</title>
</head>
<body>
  <div>
    <h1>我是h1标签</h1>
    <p>我是p标签</p>
  </div>

  <script>
    //获取div标签对象
    var oDiv = document.querySelector('div');
    //获取p标签对象
    var oP = document.querySelector('p');

    //创建一个span标签对象
    //创建了一个空span标签 
    var oSpan = document.createElement('span');

    //设定标签节点内容
    oSpan.innerHTML = '我是设定的内容';

    //设定css样式
    oSpan.style.color = 'blue';
    oSpan.style.background = 'pink';

    //绑定点击事件
    oSpan.addEventListener('click',function(){
      console.log('在努力写博客');
    });

    //在div标签的末位 新增 span标签节点
    //oDiv.appendChild(oSpan);
    //只展示下面的实现效果，上面这行代码，暂时注释掉

    //在div标签中 指定的p标签前写入span标签节点
    oDiv.insertBefore(oSpan,oP);

  </script>
</body>
</html>

四、克隆节点

克隆语法只会克隆标签和标签内容不会克隆标签绑定的事件

1.只克隆标签对象本身

var 变量 = 标签对象.cloneNode();

2.克隆标签对象本身以及标签对象的内容

var 变量 = 标签对象.cloneNode(true);

<!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>Document</title>
</head>

<body>
  <div>
    <h1>我是h1标签</h1>
    <p>我是p标签</p>
  </div>

  <script>
    //获取div标签对象
    var oDiv = document.querySelector('div');

    //绑定点击事件
    oDiv.addEventListener('click',function(){
      console.log('在努力写博客');
    });

    //克隆标签对象本身
    var oDivClone1 = oDiv.cloneNode();
    //克隆标签对象本身以及标签对象的内容
    var oDivClone2 = oDiv.cloneNode(true);

    //将克隆的节点写入body的最下边
    document.body.appendChild(oDivClone1);
    document.body.appendChild(oDivClone2);
  </script>
</body>

</html>

克隆语法只会克隆标签和标签内容不会克隆标签绑定的事件,点击div里的内容，会触发点击事件，点击克隆的div内容，不会触发点击事件