获取元素节点，遍历树

小六*^____^*

于 2023-04-24 11:21:13 发布

阅读量156

点赞数

分类专栏： DOM 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_43641912/article/details/129143340

版权

DOM 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

document是整个HTML的最上层是个对象 Object
document.getElementByClasss()IE8及以下没有这个方法，所有会有兼容性问题
document.getElementByName()用于有name的属性
HTML5新引入的 API
querySelector () 括号里面的写法和css选择器一样的
.querySelector(‘div > p’)//选择直系的子元素
querySelectorAll()

遍历节点树
节点不是元素，节点包含元素元素节点等同于DOM元素

元素节点树
在这里插入图片描述

parentNode父级节点 document没有父级节点
在这里插入图片描述

childNodes 子节点集合，包括
1、元素节点 type= 1
2、属性节点 type=2
3、文本节点 text type= 3
4、注释节点 comment type = 8
5、document 节点（根节点） type= 9
6、DocumentFragment document片段 type = 11
firstChild 第一个子节点
lastChild 最后一个子节点
nextSibling 下一个兄弟节点
previousSibling 上一个兄弟节点

遍历元素节点树
parentElement IE9及以下不支持
children IE7及以下不支持
childrenElementCount = children.length IE9及以下不支持
firstElementChild lastElementChild IE9及以下不支持
nextElementSibling 返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点） previousElementSibling IE9及以下不支持
HTML上边没有父元素，有父节点
在这里插入图片描述

节点属性
nodeName, nodeValue, nodeType

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<!--
元素节点 1
属性节点 2
文本节点 3
注释节点 8
document 9
DocumentFragment 11
-->
<body>
  <div class="box" id="box" style="background-color:greenyellow">
    文本节点
    <!--  注释节点  -->
    <h1>
      标题标签
    </h1>
    <a href="">超链接</a>
    <p>段落标签</p>
  </div>
  <script type="text/javascript">
    
    var div = document.getElementsByTagName('div')[0];
    console.log(div);
    
  </script>

</body>
</html>

nodeName
在这里插入图片描述
元素节点的nodeName是大写,只读属性

.toLowerCase();英文字符转成小写
.toUpperCase();英文字符转成大写

文本节点
在这里插入图片描述
注释节点

nodeValue 属性节点、注释节点、文本节点都有相应的nodeValue

元素节点没有nodeValue属性

获取属性节点 getAttributeNode(),对于属性节点来说，用value和nodeValue都能获取

nodeValue 可写属性注释文本节点可用
在这里插入图片描述
更改属性节点的nodeValue

nodeType 节点的类型只读

寻找子元素结合chileNodes封装,只返回元素节点，过滤了其他的节点

  var div = document.getElementsByTagName('div')[0];
    console.log(div.hasChildNodes());//true
    function elementChildren(node){
      var arr = [],
          children = node.childNodes;
      for(var i = 0; i < children.length; i++){
        var childrenItem = children[i];
        if(childrenItem.nodeType === 1){
          arr.push(childrenItem);
        }
      }
      return arr;
    }

   console.log(elementChildren(div))

attributes元素的属性集合 getAttributeNode()
在这里插入图片描述

hasChildNodes()判断元素是否有子节点,换行也有文本节点

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<!--
元素节点 1
属性节点 2
文本节点 3
注释节点 8
document 9
DocumentFragment 11
-->
<body>
  <div>
  </div>
  
  <script type="text/javascript">
    var div = document.getElementsByTagName('div')[0];
    console.log(div.hasChildNodes());//true， 这样写还是换行了，还是有文本节点
    // function elementChildren(node){
    //   var arr = [],
    //       childLen = node.childNodes.length;
    // }
  </script>

</body>
</html>

document的构造函数是 HTMLDocument
HTMLDocument的构造函数是 Document
HTMLDocument构造出来的对象里面有__proto__保存了Document.prototype
在这里插入图片描述

    Element.prototype.aaa = 'aaa';
    HTMLElement.prototype.bbb = 'bbb';
    HTMLDivElement.prototype.ccc ='ccc';
    console.log(div.bbb, div.aaa);//aaa bbb

Node
在这里插入图片描述
最终都继承于Object.prototype

DOM操作深入

小六*^____^*

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
获取元素节点，遍历树

nextElementSibling 返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点） previousElementSibling IE9及以下不支持。获取属性节点 getAttributeNode(),对于属性节点来说，用value和nodeValue都能获取。nodeValue 属性节点、注释节点、文本节点都有相应的nodeValue。寻找子元素结合chileNodes封装,只返回元素节点，过滤了其他的节点。hasChildNodes()判断元素是否有子节点,换行也有文本节点。
复制链接

扫一扫