好家伙，

 

DOM

DOM是javascript操作网页的接口，全称为文档对象模型(Document Object Model)。它的作用是将网页转为一个javascript对象，

从而可以使用javascript对网页进行各种操作(比如增删内容)。

浏览器会根据DOM模型，将HTML文档解析成一系列的节点，再由这些节点组成一个树状结构。

（把他当成一个文件夹结构来理解就好了）

DOM的最小组成单位叫做节点(node)，文档的树形结构(DOM树)由12种类型的节点组成。本文将主要说明DOM节点类型

 

1.Node类型

 
NodeType
Named Constant
1
ELEMENT_NODE
2
ATTRIBUTE_NODE
3
TEXT_NODE
4
CDATA_SECTION_NODE
5
ENTITY_REFERENCE_NODE
6
ENTITY_NODE
7
PROCESSING_INSTRUCTION_NODE
8
COMMENT_NODE
9
DOCUMENT_NODE
10
DOCUMENT_TYPE_NODE
11
DOCUMENT_FRAGMENT_NODE
12
NOTATION_NODE
三种常用类型：
节点类型 nodeType值
元素节点 1
属性节点 2
文本节点

3

 
 if ( someNode.nodeType == Node.ELEMENT_NODE ){

    alert (" Node is an element .＂);

}

（网上每一篇都有这个例子，然后我发现这个例子是红宝书的）

2.节点类型：

节点类型 描述 子元素
Document 表示整个文档（DOM 树的根节点）
  • Element (max. one)
  • ProcessingInstruction
  • Comment
  • DocumentType
DocumentFragment 表示轻量级的 Document 对象，其中容纳了一部分文档。
  • ProcessingInstruction
  • Comment
  • Text
  • CDATASection
  • EntityReference
DocumentType 向为文档定义的实体提供接口。 None
ProcessingInstruction 表示处理指令。 None
EntityReference 表示实体引用元素。
  • ProcessingInstruction
  • Comment
  • Text
  • CDATASection
  • EntityReference
Element 表示 element（元素）元素
  • Text
  • Comment
  • ProcessingInstruction
  • CDATASection
  • EntityReference
Attr 表示属性。
  • Text
  • EntityReference
Text 表示元素或属性中的文本内容。 None
CDATASection 表示文档中的 CDATA 区段（文本不会被解析器解析） None
Comment 表示注释。 None
Entity 表示实体。
  • ProcessingInstruction
  • Comment
  • Text
  • CDATASection
  • EntityReference
Notation 表示在 DTD 中声明的符号。 None

于是我们随便开个网页试一下：

<!DOCTYPE html>

<html>

<head> 

    <meta charset="utf-8"> 

    <title>报名表</title> 

</head>

<body>

    <h1 id="table">报名表</h1>

    <form action="demo-form.php">

        <input type="submit" value="提交">

    </form>

    <p>欢迎大家加入</p>

</body>

<script>

    if (table.nodeType == Node.ELEMENT_NODE) {

        alert("this is an element");

    }

</script>

</html>

 

再加两行来看看效果：

　　var txt = table.firstChild;

    console.log(txt.nodeType,txt.nodeName,txt.nodeValue)

效果如下

第一百零一篇:DOM节点类型的更多相关文章

  1. 第一百零七篇:基本数据类型(undefined,null,boolean类型)

    好家伙, 本篇内容为<JS高级程序设计>第三章学习笔记 1.数据类型 ECMAScript有6种简单数据类型(称为原始类型): Undefined, Null, Boolean, Numb ...

  2. 第一百零六篇:变量的不同声明(var,let和const的不同)

    好家伙,JS基础接着学, 本篇内容为<JS高级程序设计>第三章学习笔记 1.变量 ECMAScript 变量是松散类型的,意思是变量可以用于保存任何类型的数据. (确实松散,不像C或C++ ...

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

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

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

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

  5. “全栈2019”Java第一百零九章：匿名内部类实现唯一抽象类或接口

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  6. “全栈2019”Java第一百零七章：匿名内部类与构造方法注意事项

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  7. “全栈2019”Java第一百零六章：匿名内部类与抽象类接口注意事项

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  8. “全栈2019”Java第一百零五章：匿名内部类覆盖作用域成员详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  9. “全栈2019”Java第一百零四章：匿名内部类与外部成员互访详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  10. “全栈2019”Java第一百零三章：匿名内部类详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

随机推荐

  1. [转帖]window10下如何安装fio

    1.fio下载地址(实测有效): https://github.com/axboe/fio/releaseshttps://github.com/axboe/fio/releases 其他的地址如​​ ...

  2. [转帖]关于F5负载均衡你认识多少？

    https://www.cnblogs.com/xiexun/p/10718348.html 网络负载均衡(load balance),就是将负载(工作任务)进行平衡.分摊到多个操作单元上进行执行,例 ...

  3. [转帖]【k8s】1、基础概念和架构及组件

    文章目录 一.kubernetes概述 1.什么是kubernetes? 2.应用程序部署方式的演变 3.为什么要用kubernetes? 二.kubernetes 特性 三.Kubernetes集群 ...

  4. [转帖]Native Memory Tracking 详解（2）:追踪区域分析(一)

    https://www.modb.pro/db/529363 上篇文章 Native Memory Tracking 详解(1):基础介绍 中,分享了如何使用NMT,以及NMT内存 & OS内 ...

  5. [专题]中立遭质疑，提价遭反对，ARM的生存难题怎么破？

    中立遭质疑,提价遭反对,ARM的生存难题怎么破? https://news.cnblogs.com/n/669715/ ARM税要提高.. RISC-V的机会? 文/黎文婕 来源:锌刻度(ID:znk ...

  6. 【团队效率提升】Python-PyWebIO介绍

    作者:京东零售 关键 Q&A快速了解PyWebIO Q:首先,什么是PyWebIO? A:PyWebIO提供了一系列命令式的交互函数,能够让咱们用只用Python就可以编写 Web 应用, 不 ...

  7. 8.4 Windows驱动开发：文件微过滤驱动入门

    MiniFilter 微过滤驱动是相对于SFilter传统过滤驱动而言的,传统文件过滤驱动相对来说较为复杂,且接口不清晰并不符合快速开发的需求,为了解决复杂的开发问题,微过滤驱动就此诞生,微过滤驱动在 ...

  8. 爆了！Sealos 三天支持 1000 个帕鲁私服

    Sealos 的帕鲁私服模板从第一天发布之后就起了 100 多个私服,第二天直接上到 500 多个,第三天直接上千,还在加速增长中.来讲讲我们只用一个晚上怎么做到上线一个专属可用区的,还有一些帕鲁实践 ...

  9. GoodSync(最好的文件同步软件)

    GoodSync是一款使用创新的最好的文件同步软件,可以在你的台式机.笔记本.USB外置驱动器等设备直接进行数据文件同步软件. GoodSync将高度稳定的可靠性和极其简单的易用性完美结合起来,可以实 ...

  10. Webpack基础学习（一） （未完结）

    一.Webpack介绍与基本使用 1.1.Webpack是什么? Webpack 是一个静态资源打包工具. 它会以一个或多个文件作为打包的入口,将我们整个项目所有文件编译组合成一个或多个文件输出出去. ...