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. 【机器学习】李宏毅——卷积神经网络CNN

    CNN我们可以从两个角度来理解其中的具体过程 Neuron Version Story(解释版本1) 对于图像分类,其具体的流程如下所示: 将一张图像作为模型的输入,输出经过softmax之后将与理想 ...

  2. java中的杨辉三角

    本文主要介绍如何打印杨辉三角(直角三角形),如下图所示: 规律如下: 第一行全为1,对角线元素全为1,设i表示行标,j表示列标. arr[i][0] = 1; arr[i][i] = 1; 当i &g ...

  3. Jmeter 逻辑控制器之吞吐量控制器（Throughput Controller）

    吞吐量控制器(Throughput Controller)用来控制其下元件的执行次数,并无控制吞吐量的功能,想要控制吞吐量可以用Constant Throughput Timer,吞吐量控制器有两种模 ...

  4. AcWing1137. 选择最佳线路

    题目传送门 题目大意 \(\qquad\)有一张有向图,可以有若干个起点,只有一个终点,求所有起点到终点的最短路中最短的一条,若所有起点都与终点不连通,则输出\(-1\) 解题思路 \(\qquad\ ...

  5. C++可执行文件绝对路径获取与屏蔽VS安全检查

    :前言 前几天写新项目需要用到程序所在绝对路径的时候,发现网上居然一点相关分享都没有. :_pgmptr 翻箱倒柜找出了几本教程,发现了一个叫_pgmptr的东西. 进去看了一下,在stdlib.h里 ...

  6. [常用工具] PyAutoGUI使用教程

    PyAutoGUI使用教程 目录 PyAutoGUI使用教程 1 基础知识 2 一般函数 3 故障保险 4 鼠标函数 4.1 鼠标移动 4.2 鼠标拖动 4.3 鼠标单击 4.4 鼠标滚动 4.5 鼠 ...

  7. python之路54 forms组件 渲染 展示 参数补充 modelform组件 django中间件

    forms组件渲染标签 <p>forms组件渲染标签的方式1(封装程度高 扩展性差 主要用于本地测试):</p> {# {{ form_obj.as_p }}#} {# {{ ...

  8. Zotero自定义引文样式

    注意 在实际使用中发现还是有许多与要求不同的地方,之后会再次进行修改,特此记录 -----2022/11/28 16:57 目标格式: 期刊:［序号］作者.题名[J].刊名,出版年份,卷号 ( 期号 ...

  9. 複合語句塊——關於while循環的

    看這兩個小段代碼: /*code1.*/ index=0; while(index<10) sam = 10*index+2; printf("sam=%d\n",sam); ...

  10. mysql 简单查询

    查询特定列SELECT ename,birthday FROM emp; 查询所有的select*from emp; 给列起别名select ename AS 姓名, salary AS 工资 FRO ...