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. 更改jenkins的工作目录

    1.原始工作空间 2.目的盘符 3.任务管理器,找到Jenkins邮件转到详细信息 4.找到jenkins.exe打开文件所在位置 5.找到jenkins.xml打开 6.修改value值 改前: 改 ...

  2. week_6

    Andrew Ng 机器学习笔记 ---By Orangestar Week_6 (1) In Week 6, you will be learning about systematically im ...

  3. 【c#】从外部复制文本、图片到我的软件中的解决方案（支持ppt，qq等）

    原文地址 https://www.cnblogs.com/younShieh/p/17010572.html 如果本文对你有所帮助,不妨点个关注和推荐呀,这是对笔者最大的支持~       我们先考虑 ...

  4. Kafka相关面试题及答案

    Kafka相关面试题及答案 1. Kafka中的ISR.AR又代表什么? ISR:与leader保持同步的follower集合 AR:分区的所有副本 2. Kafka中的HW.LEO等分别代表什么? ...

  5. 每个Java程序员都必须知道的四种负载均衡算法

    前言 一般来说,我们在设计系统的时候,为了系统的高扩展性,会尽可能的创建无状态的系统,这样我们就可以采用集群的方式部署,最终很方便的根据需要动态增减服务器数量.但是,要使系统具有更好的可扩展性,除了无 ...

  6. 【白话模电1】PN结与二极管

    距离上一次写半导体,已经过了很久了,上次分享了本征半导体的基本概念: https://zhuanlan.zhihu.com/p/109483580 今天给大家聊聊半导体工业中的基础:PN结与二极管 1 ...

  7. 刷题笔记——1112:C语言考试练习题_一元二次方程

    题目 1112:C语言考试练习题_一元二次方程 代码 import math while True: try: a,b,c=map(float,input().strip().split()) del ...

  8. 超详细版本vue+capacitor（自定义capacitor插件）编写移动端应用

    我的环境 Node v16.13.0 npm v8.1.0 mac的话需要安装Xcode windows的话需要Java 8 JDK和Android Studio软件 本文以安卓开发为例 找一个自己喜 ...

  9. ionic+vue+capacitor系列笔记--01项目初始化

    Ionic 是什么? Ionic 是一款接近原生的 Html5 移动 App 开发框架,只需要你会 HTML.CSS 和 JavaScript 就可以开发移动 App应用,使用最基础的 Web 技术创 ...

  10. Java基础1-1-2—java基础语法（运算符）

    2. 运算符 2.1 算术运算符 运算符和表达式 运算符:对常量或者变量进行操作的符号 表达式:用运算符把常量或者变量连接起来符合java语法的式子就可以称为表达式. 不同运算符连接的表达式体现的是不 ...