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. 源码解读之TypeScript类型覆盖检测工具type-coverage

    因为团队内部开启了一个持续的前端代码质量改进计划,其中一个专项就是TS类型覆盖率,期间用到了type-coverage这个仓库,所以借这篇文章分享一下这个工具,并顺便从源码阅读的角度来分析一下该工具的 ...

  2. virtualenv 配置(windows)

    1.在线安装 virtualenv pip install virtualenv 2.离线安装 下载virtualenv包,解压并进入setup.py所在文件夹中 python setup.py in ...

  3. ob_aes_饭团影视

    网站 'aHR0cHM6Ly93d3cuZmFudHVhbmhkLmNvbS9wbGF5L2lkLTExNzctMS0xLmh0bWw=' 搜索mp4,找这个链接从哪来的  打开之后会有明显奇怪的参数 ...

  4. 用了这么多年的 SpringBoot 你知道什么是 SpringBoot 的 Web 类型推断吗？

    用了这么多年的 SpringBoot 那么你知道什么是 SpringBoot 的 web 类型推断吗? 估计很多小伙伴都不知道,毕竟平时开发做项目的时候做的都是普通的 web 项目并不需要什么特别的了 ...

  5. 「Goravel 上新」验证表单的三种新姿势，估计你只用过一种

    验证用户输入的数据是我们开发中最常见的需求,Goravel 提供三种验证姿势,个个简单好用! 第一种:简单直接式 根据表单内容直接校验: func (r *PostController) Store( ...

  6. C#开发的线程池和管理器 - 开源研究系列文章

    上次编写了一个小软件,用于练手及自己的一个小工具集合.今天把其中的线程池和管理器的代码抽取出来,写成一个博文,让需要的朋友能够进行学习和应用. 这个线程管理器包括了3个类库和一个应用程序,见下图: 第 ...

  7. python进阶之路21 正则应用 第三方模块之requests模块 openpyxl模块 简易爬虫(pandas)

    作业讲解 """ 网络爬虫没有我们现在接触的那么简单 有时候页面数据无法直接拷贝获取 有时候页面还存在防爬机制 弄不好ip会被短暂拉黑 """ ...

  8. 【3.x合批亲测】使用这个优化方案，iPhone6也能飞起来，直接拉满60帧！

    大家好,我是晓衡! 上周我花了3天的时间,体验测试了一款 Creator 3.x 性能优化工具:98K动态分层合批. 它能将 DrawCall 超过 1000+ 次的 2D 界面,实现运行时节点分层排 ...

  9. 基于 .NET7.0 开发Telegram 机器人（入门）

    简介 Telegram(非正式简称TG.电报)是跨平台的即时通信软件,其客户端是自由及开放源代码软件,但服务端是专有软件.用户可以相互交换加密与自毁消息,发送照片.视频等所有类型文件.官方提供手机版( ...

  10. GitHub实用开源项目

    第一款 JSON Crack JSON Crack 是一个很方便的 JSON 数据可视化工具. 该项目不是简单的展示 JSON 数据,而是将其转化为类似思维导图的形式,支持放大/缩小.展开/收缩.搜索 ...