zoukankan      html  css  js  c++  java
  • DOM节点类型

    节点类型

    我们页面里面的节点类型很多,比如元素节点、文本节点、注释节点、属性节点等等。
    我们可以通过nodeType属性来查看这个节点的类型是什么。而nodeType返回的是一些数字,下面介绍几个基础的类型和数字的对应关系:
    元素节点——1

    属性节点——2

    文本节点——3

    注释节点——8

    document——9

    DocumentFragment——11
     
    节点的其他属性
     • nodeName
    这个属性可以返回元素的标签名,以大写的形式表示,只读,不允许写入。
    有几个特殊的节点返回的也不太一样:
    文本节点–> #text
    注释节点–> #comment
    document节点–>#document
     • nodeValue
    Text节点或者Comment节点的文本内容,可以读写
     • attributes
    把元素的行间属性都读取出来,放到一个对象里面返回,对象里面的每一个属性都是一个节点,这个节点就是我们前面提到的属性节点。
    注意:对象里面的属性叫做property,而元素里面的属性叫attributes,实际应该叫特性。
    节点还有一个方法
    hasChildNodes()可以检测是否有子节点

    遍历节点树

    • parentNode 查找父节点

    <div>

          <p><strong></strong></p>

    </div>

    这里strong的父节点就是p,p的父节点是div,div的父节点是body,body的父节点是html,html的父节点是document,document的父节点是null,在后面就没有了。

    • childNodes 子节点们

    div.childNodes 没有说明类型,那么就是说这个方法是把所有的子节点都返回。

    <div>

          <p><strong></strong></p>

    </div>

    还是这个例子,我们div里面的childNodes其实有3个,第一个是前面的空格——文本节点,第二个是中间的p标签——元素节点,第三个是最后的空格——文本节点。

     firstChild 第一个子节点

     lastChild 最后一个子节点

    • nextSibling 下一个兄弟节点

    • previousSibling 上一个兄弟节点

    以上这些方法的兼容性都很好,所有的浏览器都支持,但是下面这些就不行了。

    基于元素节点树的遍历

    • parentElement 返回当前元素的父元素节点

    在这个方法上面,html上面的父元素节点就不是document而是null了。

    但是ie不支持这个方法。

    • children 所有子元素节点

    这个方法所有的浏览器都兼容。

    • childElementCount

    node.children.length === node.childElementCount

    这个属性就是子元素节点的数量,不过我更常用前面的那个。

    • nextElementSibling

    • previousElementSibling

    这两个方法分别是找上一个和下一个兄弟元素节点,但是ie都不兼容。

    DOM结构树

    这个图表中说明了每一个对象的父级。

    浏览器除了可以处理html页面外,还可以处理xml和xhtml等页面。

    我们发现HTMLDocument继承自HTMLDocument.prototype,我们在原型上定义一个属性来测试一下。

    HTMLDocument.prototype.abc = 123;

    document.abc; // 123

    document.getElementById(‘demo’).abc; // 报错

    由此可见,HTMLDocument确实继承HTMLDocument对象的属性,但是相对的Element上面并没有这个方法。

    这里的Node上面也还是有父级的,我们可以通过Node.prototype来查看,这里就不举例了。

    下面是一些DOM结构树的总结:

    1.getId方法定义在Document.prototype上,即Element节点上不能使用。

    2.getElementByName方法定义在HTMLDocument.prototype上,非html中的document不能使用(xml document、Element);

    3.getElementsByTagName方法定义在Document.prototype和Element.prototype上,也就是document和元素都可以用这个方法。

    4.HTMLDocument.prototype上定义了一些常用的属性,body、head分别代指HTML文档中的<body><head>标签。

    5.Document.prototype上定义了documentElement属性,指代文档的根元素,在html文档中,它总代指<html>元素。

    6.getElementByClassName、querySelectorAll、querySelector在Document、Element类中均有定义。

    今天的DOM知识就到这里结束了哟~

  • 相关阅读:
    2020牛客暑期多校训练营(第三场)
    2020牛客暑期多校训练营(第二场)
    C# 获取枚举类型中所有描述信息 Xinner
    XPath Xinner
    02kubeadm安装
    thinkphp6:访问redis6(thinkphp 6.0.9/php 8.0.14)
    npm8.3.0 安装@vue/cli 4.5.15
    linux(ubuntu 21.10): php8.0.14:安装phpredis以访问redis(phpredis5.3.5)
    linux(ubuntu21.10):apt方式安装redis6.0.15
    阿里云何万青:南坡VS北坡,阿里云高性能计算行业实践
  • 原文地址:https://www.cnblogs.com/pandawind/p/10000691.html
Copyright © 2011-2022 走看看