DOM 节点

在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

  • 整个文档是一个文档节点
  • 每个 HTML 元素是元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 注释是注释节点

节点层次

DOM（Document Object Model——文档对象模型）是用来呈现HTML或XML文档交互的一个API(应用程序编程接口)。

dom将任意HTML或XML文档描述成一个由多层节点构成的结构（节点树）。

Node类型(节点类型)

DOM1级定义了一个Node接口。

Node接口由DOM中的所有节点类型实现。

除IE外，所有节点类型继承了Node节点类型

Node节点类型共有12种，由12个数值常量来表示,如下：

控制台运行例子：

nodeType、nodeName、nodeValue相关

例子：

<body>

    大头

    <!-- 毛毛最帅 -->

    <h3 id="main"></h3>

    <a id="aid" href="https://www.baidu.com"></a>

    <script>

        //文档节点

        var doc = document;

        console.log('===文档节点',doc.nodeName, doc.nodeType, doc.nodeValue);

        // DocumentType

        var docType = document.doctype;

        console.log('===DocumentType类型',docType.nodeName, docType.nodeType, docType.nodeValue);

        //元素节点

        var div_main = document.getElementByTagName('h3')

        console.log('---元素节点',div_main.nodeName, div_main.nodeType, div_main.nodeValue);

        // 属性节点

        var a_aid = document.getElementById('aid').getAttributeNode('href')

        console.log('---属性节点',a_aid.nodeName, a_aid.nodeType, a_aid.nodeValue);

        //文本和注释节点

        var span_node = document.querySelector('body').childNodes

        span_node.forEach(function (item, index) {

            if(item.nodeType==1){

              console.log('===元素节点',item.nodeName, item.nodeType, item.nodeValue);

            }

            if(item.nodeType==3){

              console.log('===文本节点',item.nodeName, item.nodeType, item.nodeValue);

            }

            if(item.nodeType==8){

              console.log('===注释节点',item.nodeName, item.nodeType, item.nodeValue);

            }

            if(item.nodeType==9){

              console.log('===文档节点',item.nodeName, item.nodeType, item.nodeValue);

            }

        })

        // DocumentFragment类型

        var frag = document.createDocumentFragment();

        var p=document.createElement('p');

        p.innerHTML="hello world"

        p.append(frag);

        console.log('文档片段类型',frag.nodeType,frag.nodeName,frag.nodeValue)

    </script>

</body>

回顾——Dom节点类型的更多相关文章

  1. 深入理解DOM节点类型第五篇——元素节点Element

    × 目录 [1]特征 [2]子节点 [3]特性操作[4]attributes 前面的话 元素节点Element非常常用,是DOM文档树的主要节点:元素节点是html标签元素的DOM化结果.元素节点主要 ...

  2. 深入理解DOM节点类型第一篇——12种DOM节点类型概述

    × 目录 [1]元素 [2]特性 [3]文本[4]CDATA[5]实体引用[6]实体名称[7]处理指令[8]注释[9]文档[10]文档类型[11]文档片段[12]DTD 前面的话 DOM是javasc ...

  3. 深入理解DOM节点类型第二篇——文本节点Text

    × 目录 [1]特征 [2]空白 [3]属性[4]方法[5]性能 前面的话 文本节点顾名思义指向文本的节点,网页上看到的文字内容都属于文本节点.该节点简单直观,本文将详细介绍该部分内容 特征 文本节点 ...

  4. 深入理解DOM节点类型第六篇——特性节点Attribute

    × 目录 [1]特征 [2]属性 [3]方法 前面的话 元素的特性在DOM中以Attr类型表示,从技术角度讲,特性是存在于元素的attributes属性中的节点.尽管特性是节点,但却不是DOM节点树的 ...

  5. 深入理解DOM节点类型第七篇——文档节点DOCUMENT

    × 目录 [1]特征 [2]快捷访问 [3]文档写入 前面的话 文档节点document,隶属于表示浏览器的window对象,它表示网页页面,又被称为根节点.本文将详细介绍文档节点document的内 ...

  6. 深入理解DOM节点类型第四篇——文档片段节点DocumentFragment

    × 目录 [1]特征 [2]作用 前面的话 在所有节点类型中,只有文档片段节点DocumentFragment在文档中没有对应的标记.DOM规定文档片段(document fragment)是一种“轻 ...

  7. DOM节点类型

    DOM1级定义了一个Node接口,该接口将由DOM中的所有节点类型实现.这个Node接口在JavaScript中是作为Node类型实现的:除了IE外,在其他所有浏览器中都可以访问到这个类型.JavaS ...

  8. XML DOM 节点类型（Node Types）

    节点类型 下面的表格列出了不同的 W3C 节点类型,以及它们可拥有的子元素: 节点类型 描述 子元素 Document 表示整个文档(DOM 树的根节点) Element (max. one) Pro ...

  9. 深入理解DOM节点类型第三篇——注释节点和文档类型节点

    × 目录 [1]注释节点 [2]文档类型 前面的话 把注释节点和文档类型节点放在一起是因为IE8-浏览器的一个bug.IE8-浏览器将标签名为"!"的元素视作注释节点,所以文档声明 ...

  10. DOM Element节点类型详解

    上文中我们讲解了 DOM 中最重要的节点类型之一的 Document 节点类型,本文我们继续深入,谈谈另一个重要的节点类型 Element . 1.概况 Element 类型用于表现 HTML 或 X ...

随机推荐

  1. 09.什么是synchronized的重量级锁？

    大家好,我是王有志.关注王有志,一起聊技术,聊游戏,聊在外漂泊的生活. 今天我们继续学习synchronized的升级过程,目前只剩下最后一步了:轻量级锁->重量级锁. 通过今天的内容,希望能帮 ...

  2. Java基础篇——JUC初步

    1.基础知识 java默认的两个线程:Main线程+GC守护线程 java并不能开启线程,需要调用底层用c语言写的本地方法 wait和sleep的区别: wait方法会释放线程锁,并且只能在同步代码块 ...

  3. 根号分治简单笔记 | P3396 哈希冲突

    简要题意 你需要维护一个长度为 \(n\) 的序列 \(v\),支持: A x y 求整个序列中,所有模 \(x\) 为 \(y\) 的下标的元素的值,即: \[\sum_{i=0}^{\lfloor ...

  4. App几个可能造成内存泄漏的情况：

    App几个可能造成内存泄漏的情况: 1.block块中直接用self调用,self将会被block copy到内部增加一次饮用计数,形成循环引用 在block里调用self会不会造成循环引用和这个bl ...

  5. dfs 返回值用bool相对void会快一点

    力扣 剑指 Offer 12. 矩阵中的路径 超时代码 dfs返回值是void,用类内的全局变量flag表示找到或没找到. class Solution { public: bool flag; in ...

  6. SOFAJRaft依赖框架Disruptor浅析

    Disruptor是英国外汇交易公司LMAX开发的一个高性能队列,研发的初衷是解决内存队列的延迟问题.与Kafka.RabbitMQ用于服务间的消息队列不同,disruptor一般用于线程间消息的传递 ...

  7. CF1779C Least Prefix Sum 题解

    CF链接:Least Prefix Sum Luogu链接:Least Prefix Sum $ {\scr \color {CornflowerBlue}{\text{Solution}}} $ 先 ...

  8. C#开发PACS医学影像三维重建(十四):基于能量模型算法将曲面牙床展开至二维平面

    在医学影像领域中,将三维重建中的人体组织展开平铺至二维,用来研判病灶和制定治疗方案的重要手段之一, 它能够将立体曲面所包含的信息更为直观的展示到二维平面上,常用的情景包括: 牙床全景图.平铺血管.骨骼 ...

  9. 顶层QWidget弹窗设置背景为透明，透明部分为黑色。

    setAttribute(Qt::WA_TranslucentBackground); 设置此属性,解决.

  10. 【教程搬运】分析并编写suricata规则（内含两个示例）

    suricata规则分析 参考1 参考2 Suricata 签名的结构 在高层次上,Suricata签名由三部分组成: Action:当流量符合规则时采取的行动 Header:一个标题,描述主机.IP ...