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. 【机器学习】李宏毅——Anomaly Detection（异常检测）

    异常检测概述 首先要明确一下什么是异常检测任务.对于异常检测任务来说,我们希望能够通过现有的样本来训练一个架构,它能够根据输入与现有样本之间是否足够相似,来告诉我们这个输入是否是异常的,例如下图: 那 ...

  2. 彻底弄懂Javascript模块导入导出

    笔者开始学习Javascript的时候,对模块不太懂,不知道怎么导入模块,导出模块,就胡乱一通试 比如 import xx from 'test.js' 不起作用,就加个括号 import {xx} ...

  3. 简单体验一个高性能，简单，轻量的ORM库- Dapper (无依赖其它库，非常方便高效)

    步骤1)引入该ORM库. 使用Nuget搜索"Dapper"安装或者直接从github上下载源码  (https://github.com/StackExchange/Dapper ...

  4. Git使用记录 - 持续更新

    本地生成 sshkey 打开git命令工具 cd ~/.ssh ssh-keygen -t rsa -C "实际的eamil地址" ··· // 一路回车,出现以下则说明成功 Yo ...

  5. s2-007

    漏洞名称 S2-007 CVE-2012-0838 远程代码执行 利用条件 Struts 2.0.0 - Struts 2.2.3 漏洞原理 age来自于用户输入,传递一个非整数给id导致错误,str ...

  6. 《Effective C++》资源管理章节

    Item 13:以对象管理资源 关键的两个想法(这种方式其实在很多地方都可以看出影子,比如managing pool的模型): 1.获得资源后立刻放入管理对象(managing object):以对象 ...

  7. 统一返回对象封装和统一异常捕获封装springboot starter

    好久没有更新文章了,高龄开发没什么技术,去了外包公司后没怎么更新文章了.今天分享下统一处理starter,相信开发web系统的时候都是会涉及到前后端的交互,而后端返回数据的时候一般都会统一封装一个返回 ...

  8. java入门与进阶P-1.7+P-1.8

    赋值 通常在声明变量后,使用赋值语句给变量赋值. 在JAVA中将 ＂＝＂作为 赋值运算符. 表达式:标识涉及值,变量和操作符的一个运算,他们组合在一起计算出一个新的值.所以赋值语句基本就是计算出一个值 ...

  9. 存储自定义类型元素-LinkedHashSet集合

    存储自定义类型元素 HashSet存储自定义类型元素 set集合报错元素唯一: 存储的元素(String,Integer,...,Student,Person...),必须重写hashCode方法和e ...

  10. VMware虚拟软件使用方法、网络配置与远程连接排错方法

    一.虚拟软件使用方法 1. 软件启动方法 系统当中有些软件是可以多次启动,多实例 vmware不具有多实例功能 2. 软件关闭注意事项 尽量选择挂起虚拟主机关闭软件 3. 虚拟主机拍快照(后悔药 月光 ...