好家伙，

 

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. [转帖] Linux命令拾遗-文本处理篇

    https://www.cnblogs.com/codelogs/p/16060413.html 简介# 这是Linux命令拾遗系列的第二篇,本篇主要介绍Linux中与文本处理相关的命令,如xargs ...

  2. NativeMemoryTracking的再学习

    摘要 最近一段时间学习jvm比较多. 为了能够更加深入的进行一些调优和峰值性能的配置. 看了很多像是NMT,inline,堆区方法区以及分层编译等知识. 但是看到华为毕昇社区说的codecache相关 ...

  3. go中context源码解读

    context 前言 什么是context 为什么需要context呢 context底层设计 context的实现 几种context emptyCtx cancelCtx timerCtx val ...

  4. C++ Boost库 实现命令行解析

    Boost库中默认自带了一个功能强大的命令行参数解析器,以往我都是自己实现参数解析的,今天偶尔发现这个好东西,就来总结一下参数解析的基本用法,该库需要引入program_options.hpp头文件, ...

  5. Gin 中间件

    中间件 在Gin框架中,中间件(Middleware)指的是可以拦截http请求-响应生命周期的特殊函数,在请求-响应生命周期中可以注册多个中间件,每个中间件执行不同的功能,一个中间执行完再轮到下一个 ...

  6. AI PC两年要大卖1亿台！就靠它了

    Intel在中国北京召开了主题为"AI无处不在,创芯无所不及"的2023Intel新品发布会暨AI技术创新派对,正式发布了代号为"Meteor Lake"的面向 ...

  7. Tire树 学习笔记

    定义与基本求法 定义 又称字典树,用边表示字母,从根节点到树上某一节点路径形成一个字符串. 例如 \(charlie:\) 基本求法 廷显然的,往树中存就行了,查询也是显然的,通过一道例题来理解吧: ...

  8. raise的研究发现，弄懂，try except 一定要raise 否则非常不利于调试。

    现在很多人 都反应 下载订单后 提示下载成功,但是 软件中却没有这个订单,经过研究发现  原因是我用了 try except end; 这个结构导致的,当订单下载过程中 遇到错误的 时候,程序 没有 ...

  9. ASP.NET Core分布式项目实战（Consent Controller Get请求逻辑实现）--学习笔记

    任务20:Consent Controller Get请求逻辑实现 接着上一节的思路,实现一下 ConsentController 根据流程图在构造函数注入 IClientStore,IResourc ...

  10. Linux-特殊权限设置（SUID、SGID、SBIT）

    一.SUID权限 1．概念 当s这个标志出现在文件所有者的x权限上时,例如文件权限状态"-rwsr-xr-x",此时就被称为Set UID,简称SUID. 如果该属主权限位上有执行 ...