DOM基本操作（节点树的查询、节点属性和分类）

最新推荐文章于 2024-06-25 17:54:49 发布

巧克力很苦

最新推荐文章于 2024-06-25 17:54:49 发布

阅读量1.5k

点赞数

分类专栏： JavaScript 文章标签： DOM基本操作（节点树的查询、节点属性和分类）

本文链接：https://blog.csdn.net/qq_44607694/article/details/94163842

版权

JavaScript 专栏收录该内容

60 篇文章 5 订阅

订阅专栏

JS的组成

JS语法 --> ECMAScript
DOM --> Document Object Model(文档对象模型) 可以操作html+css
BOM --> Browser Object Model(浏览器对象模型)

什么是DOM

DOM是文档对象模型 ===> Document Object Model
DOM是由浏览器厂商定义，用来操作html和css功能的一类对象的集合。DOM也可以理解为是对HTML以及XML的标准编程接口
DOM的结构呈树状，所以也把DOM叫做DOM树，DOM树是由很多DOM节点组成的

DOM树

                   DOM树   
                   html
    
         head              body
    
      meta  title      script  div
                               span

在这里插入图片描述
浏览器提供了DOM（Document Object Model）使得js可以操纵DOM树，DOM是浏览器厂商给我们提供的编程接口，就是因为有了编程接口使得js这门编程语言操纵DOM树

通过id名字获取节点

 var oBox = document.getElementById("box");
         console.log(oBox);

document.getElementById('box')  //通过id名字获取节点

在这里插入图片描述
获取到HTML中的id名为box的div的节点

基于节点树的查询操作(不经常用到)

childNodes 查询所有的子节点们

  <div id="box">
        <!--heaven-->
        <span>heaven</span>
    </div>

 var oBox = document.getElementById("box");
         console.log(oBox.childNodes);

在这里插入图片描述

firstChild 查询第一个子节点

   <div id="box">香蕉
        <!--heaven-->
        <span>heaven</span>
    </div>

 var oBox = document.getElementById("box");
         console.log(oBox.firstChild);

在这里插入图片描述
lastChild 查询最后一个子节点

 <div id="box">香蕉
        <!--heaven-->
        <span>heaven</span>
        xiangjiao
    </div>

 var oBox = document.getElementById("box");
         console.log(oBox.lastChild);

在这里插入图片描述

parentNode 查询父节点

<body>
    <div id="box">香蕉
        <!--heaven-->
        <span>heaven</span>
        xiangjiao
    </div>
 </body>

 var oBox = document.getElementById("box");
         console.log(oBox.parentNode);

在这里插入图片描述
nextSibling 查询下面的相邻的兄弟节点

 <div id="box">香蕉
        <!--heaven-->
        <span>heaven</span>
        xiangjiao
    </div>text

  var oBox = document.getElementById("box");
         console.log(oBox.nextSibling)

在这里插入图片描述
previousSibling 查询上面的相邻的兄弟节点

   apple
   <div id="box">香蕉
        <!--heaven-->
        <span>heaven</span>
        xiangjiao
    </div>text

 var oBox = document.getElementById("box");
         console.log(oBox.previousSibling);

在这里插入图片描述

基于元素节点树的查询操作(经常用到)

children 查询所有的元素子节点们

   <div id="box">
        <span>heaven</span>
        <p>啦啦啦</p>
    </div>

var oBox = document.getElementById("box");
         console.log(oBox.children);

在这里插入图片描述
firstElementChild 查询第一个元素子节点

   <div id="box">
        <span>heaven</span>
        <p>啦啦啦</p>
    </div>

 var oBox = document.getElementById("box");
         console.log(oBox.firstElementChild);

在这里插入图片描述
lastElementChild 查询最后一个元素子节点

  <div id="box">
        <span>heaven</span>
        <p>啦啦啦</p>
    </div>

var oBox = document.getElementById("box");
         console.log(oBox.lastElementChild);

在这里插入图片描述
parentElement 查询父节点

<body>
   <div id="box">
        <span>heaven</span>
        <p>啦啦啦</p>
    </div>
 </body>

var oBox = document.getElementById("box");
         console.log(oBox.parentElement);

在这里插入图片描述
nextElementSibling 查询下面的相邻的兄弟元素节点

   <div id="box">
        <span>heaven</span>
        <p>啦啦啦</p>
    </div>
    <script>
    </script>

var oBox = document.getElementById("box");
         console.log(oBox.nextElementSibling);

在这里插入图片描述
previousElementSibling 查询上面的相邻的兄弟元素节点

<body>
   <div id="box">
        <span>heaven</span>
        <p>啦啦啦</p>
    </div>
</body>

var oBox = document.getElementById("box");
         console.log(oBox.previousElementSibling);

在这里插入图片描述

DOM节点分类

节点的属性

nodeType 区分节点的类型
nodeName 获取节点的名称
nodeValue 获取注释节点和文本节点的内容
attributes 获取元素节点的属性节点集合

如何检测节点类型nodeType

节点的分类             nodeType
 文本节点                 3
 注释节点                 8
 元素节点                 1
 属性节点                 2
 文档节点(document)       9
 DocumentFragment  文档片段节点 11

var oBox = document.getElementById("box");
        console.log(oBox.nodeType);//是元素节点结果是1

在这里插入图片描述

 <div id="box">海文
        <!--heaven-->
        <span class="on " title="我是span节点">heaven</span>
        <p title="我是p节点">啦啦啦</p>
        <h2>测试标题</h2>
    </div>

如何遍历所有子节点children

    var oBox = document.getElementById("box");
        for (var i = 0; i < oBox.childNodes.length; i++) {
            console.log(oBox.childNodes[i]);
        }

在这里插入图片描述

如何遍历所有子节点类型

   var oBox = document.getElementById("box");
        for (var i = 0; i < oBox.childNodes.length; i++) {
            console.log(oBox.childNodes[i],oBox.childNodes[i].nodeType);
        }

在这里插入图片描述

nodeName 获取节点的名称

 var oBox = document.getElementById("box");
        for (var i = 0; i < oBox.childNodes.length; i++) {
            console.log(oBox.childNodes[i], oBox.childNodes[i].nodeType, oBox.childNodes[i].nodeName);
        }

在这里插入图片描述
nodeName 获取节点的名称（元素节点他的nodeName返回结果是标签名对应的大写形式）返回结果都是字符串形式
nodeName一般只会用来获取元素节点的属性，不可能获取到文本节点的属性

nodeValue 获取注释节点和文本节点的内容（一般不用）

var oBox = document.getElementById("box");
        for (var i = 0; i < oBox.childNodes.length; i++) {
            console.log(oBox.childNodes[i], oBox.childNodes[i].nodeValue);
        }

在这里插入图片描述
attributes 获取元素节点的属性节点集合

 var oBox = document.getElementById("box");
        for (var i = 0; i < oBox.childNodes.length; i++) {
            if (oBox.childNodes[i].nodeType === 1) {
                   console.log(oBox.childNodes[i],oBox.childNodes[i].attributes)
            }
        }

在这里插入图片描述
attributes 获取元素节点拿到第0项

   var oBox = document.getElementById("box");
        for (var i = 0; i < oBox.childNodes.length; i++) {
            if (oBox.childNodes[i].nodeType === 1) {
                console.log(oBox.childNodes[i].attributes[0]);
            }
        }

元素节点的属性在DOM树中叫做属性节点
在这里插入图片描述
文档节点(document)

其实DOM树的根不是html而是document

             document（DOM的根节点）
                   html
    
         head              body
    
      meta  title      script  div
                               span

验证html的父级是document而document没有父级

console.log(document.getElementById("a").parentNode)

在这里插入图片描述

巧克力很苦

关注

0
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
DOM基本操作（节点树的查询、节点属性和分类）

JS的组成JS语法 --> ECMAScriptDOM --> Document Object Model(文档对象模型) 可以操作html+cssBOM --> Browser Object Model(浏览器对象模型)什么是DOMDOM是文档对象模型 ===> Document Object ModelDOM是由浏览器厂商定义，用来操作html...
复制链接

扫一扫