JS---DOM：节点与元素

zyt0502

于 2024-08-14 20:36:48 发布

阅读量262

点赞数 4

分类专栏： javascript 文章标签： javascript 前端 java 开发语言

本文链接：https://blog.csdn.net/zyt0502/article/details/141199512

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

DOM文档是节点的分层集合，每个节点可以具有父级和/或子级。

如下图：HTML是head、body的父节点

节点有类型，元素类型就是其中之一，元素由HTML文档中的标记表示。

一、节点

1.1节点类型

节点	nodeType	nodeName	nodeValue
● 文档节点	9	"#document"	null
● 属性节点	2	属性名	属性值
● 元素节点	1	大写的标签名	null
● 文本节点	3	"#text"	文本内容
● 注释节点	8	“#comment”	注释的内容

1.2示例代码

<body>
    <!-- 这是div标签 -->
    <div id="box" class="one" name="lili">111</div>

    <h1>标题1</h1>
    <script>
      //   1.文档节点
         console.log(document.nodeType); //9
         console.log(document.nodeName); //#document
         console.log(document.nodeValue); //null

      //   2.属性节点 getAttributeNode("XXX") 获取属性
         var myclass = box.getAttributeNode("class");
         console.log(myclass); //class="one"
         console.log(myclass.nodeType); //2
         console.log(myclass.nodeName); //class
         console.log(myclass.nodeValue); //one

      // 3.元素节点
         console.log(box.nodeType); //1
         console.log(box.nodeName); //DIV
         console.log(box.nodeValue); //null

         var h1box = document.querySelector("h1");
         console.log(h1box.nodeType); //1
         console.log(h1box.nodeName); //H1
         console.log(h1box.nodeValue); //null

      //4.文本(对象)节点 获取子节点 childNodes
         var h1box = document.querySelector("h1");
         var textbox = h1box.childNodes[0]; //获取文本节点
         console.dir(textbox); //对象

         var textbox1 = h1box.innerHTML; //只是获取文本值
         console.dir(textbox1); //值

         console.log(textbox.nodeType); //3
         console.log(textbox.nodeName); //#text
         console.log(textbox.nodeValue); //标题1
      
      //5.注释节点
      var commentbox = document.body.childNodes[1];
      console.log(commentbox);
      console.log(commentbox.nodeType); //8
      console.log(commentbox.nodeName); //#comment
      console.log(commentbox.nodeValue); //注释的内容
    </script>
</body>

二、节点之间的关系属性

2.1节点类

parentNode 父节点

childNodes 所有子节点的集合

firstChild 第一个子节点

lastChild 最后一个子节点

previousSibling 上一个兄弟节点

nextSibling 下一个兄弟节点

2.1.1代码示例

<body>
<h1>标题1</h1>
    <div id="box">111</div>
    <ul id="ulbox">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <h2>标题2</h2>
    <script>
        console.log(box.parentNode);

        console.log(document.body.childNodes);

        console.log(ulbox.childNodes);

        console.log(ulbox.firstChild);//#text
        console.log(ulbox.lastChild);//#text
        console.log(box.nextSibling); //#text 空格
        console.log(box.previousSibling); //#text 空格
    </script>
</body>

2.2元素类

children 所有子元素的集合

firstElementChild 第一个子元素 IE9+

lastElementChild 最后一个子元素 IE9+

previousElementSibling 上一个兄弟元素 IE9+

nextElementSibling 下一个兄弟元素 IE9+

2.2.1示例代码

  console.log(document.body.children);

     console.log(ulbox.children);

 console.log(ulbox.firstElementChild);

      console.log(ulbox.lastElementChild);

console.log(box.nextElementSibling); //ul

        console.log(box.previousElementSibling); //<h2>标题2</h2>

zyt0502

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JS---DOM：节点与元素

本篇主要是针对DOM中节点类型，节点之间的关系属性以及相关的示例代码，区分清楚元素与节点，掌握两者之间的区别。
复制链接

扫一扫

专栏目录