好家伙，

 

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. [转帖]APIServer dry-run and kubectl diff

    https://kubernetes.io/blog/2019/01/14/apiserver-dry-run-and-kubectl-diff/ Monday, January 14, 2019 A ...

  2. Linux bridge使用dummy接口调用IPVS的问题

    Linux bridge使用dummy接口调用IPVS的问题 在IPVS: How Kubernetes Services Direct Traffic to Pods一文中,作者给出了一个简单的组网 ...

  3. 袋鼠云数栈产品中 AI+ 实现原理剖析

    生产力工具 + AI 是不可逆转的趋势,慢慢的大模型能力通过 AI Agent 落地的工程化能力也开始趋于成熟.作为大数据产品的数栈也必然是需要借助 AI 能力提升产品竞争力. 去年 12 月,我们在 ...

  4. [置顶] python常用web开发框架

    Flask篇 第一篇:初识Flask.快速启动 第二篇:Flask四剑客 第三篇:Flask的配置文件 第四篇:Flask路由 第五篇:Flask模板渲染 第六篇:Flask的请求与响应 第七篇:Fl ...

  5. webservice 发布与使用

    WebService,即Web服务,能使得运行在不同机器上的不同应用无须借助,专门的第三方软件或硬件,就可相互交换数据或集成. 第一次选择WebService,是为了替代数据库远程连接.我们都知道当S ...

  6. TienChin 渠道管理-权限分配

    添加权限 如果您不想手动添加可以使用我如下的SQL,但是有一个注意点就是 parent_id 是渠道管理菜单的主键 id 即可一键插入. INSERT INTO `TienChin`.`sys_men ...

  7. Flowable 源码目录结构

    title: Flowable 源码目录结构 date: 2023-8-17 23:47:20 tags: - Flowable 下载源码 下载地址:flowable/flowable-engine ...

  8. 10.1 C++ STL 模板适配与迭代器

    STL(Standard Template Library)标准模板库提供了模板适配器和迭代器等重要概念,为开发者提供了高效.灵活和方便的编程工具.模板适配器是指一组模板类或函数,它们提供一种适配机制 ...

  9. 【C++深度剖析】为什么C++支持函数重载而C不支持--C++程序编译链接过程--符号表生成规则【Linux环境超详细解释C++函数重载底层原理】

    文章目录 前言 Linux环境g++编译器的配置以及一些准备工作 源文件的符号表生成以及分析 尾声 前言 先赞后看好习惯 打字不容易,这都是很用心做的,希望得到支持你 大家的点赞和支持对于我来说是一种 ...

  10. Java 将PDF转为PowerPoint （2行代码）

    通过编程实现PDF转PPT的功能,可以自动化转换过程,减少手动操作的工作量,并根据需要进行批量转换.将PDF文件转换为PPT文档后,可以利用PPT的丰富功能和动画效果,达到更好的演示效果. 在Java ...