好家伙，

 

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. Oracle DBCA 静默删除以及建库的脚本

    No.1 背景 公司最近有一个测试环境需要重新备份恢复 但是里面有6个数据库实例 400多G的数据文件. 一般情况下 需要drop user xxx cascade ; 然后执行 drop table ...

  2. Charles的基本使用

    今天介绍Charles常用的几个功能 一.map local 1.map local是测试中mock数据常用的功能,首先我们选择需要mock数据的接口,这里以百度为例 抓包抓住该接口后鼠标右击选择ma ...

  3. ElasticSearch集群灾难：别放弃，也许能再抢救一下 | 京东云技术团队

    ​ 1 前言 Elasticsearch作为一个分布式搜索引擎,自身是高可用的:但也架不住一些特殊情况的发生,如: 集群超过半数的master节点丢失,ES的节点无法形成一个集群,进而导致集群不可用: ...

  4. vue中keep-alive详细讲解

    场景 今天产品跑过来跟我说, 当我在A页面修改数据后,去B页面. 然后返回A页面.希望A页面保留我修改后的数据. 而不是数据又恢复最初的样子了.我心里想,尼玛,又要加班了? 看下面小粒子 数据被被重置 ...

  5. vue/cli3.0相对路径打包

    在项目下新增vue.config.js文件 module.exports={ productionSourceMap: false, publicPath: process.env.NODE_ENV ...

  6. Python 潮流周刊第 19 期摘要

    原文全文:https://pythoncat.top/posts/2023-09-09-weekly 文章&教程 1.Mojo 终于提供下载了! 2.我们能从 PEP-703 中学到什么? 3 ...

  7. TienChin 活动管理-搜索活动

    ActivityController @PreAuthorize("hasPermission('tienchin:activity:list')") @GetMapping(&q ...

  8. C/C++ 命名空间引用知识

    标准命名空间 命名空间的使用 #define _CRT_SECURE_NO_WARNINGS #include <iostream> using namespace std; // 命名空 ...

  9. HarmonyOS 开发入门（三）

    HarmonyOS 开发入门(三) 日常逼逼叨 在开发入门(一)和开发入门(二)中我们描述了 HarmonyOS 开发的语言ArKTs以及Ts简单的入门级语法操作以及开发环境的搭建,接下来我们进入第三 ...

  10. [JVM] CPU缓存一致性协议

    CPU缓存一致性协议 CPU高速缓存 CPU缓存是位于cpu和内存之间的临时数据交换器,它的容量比内存小的夺但是交换速度要比内存快得多,主要是为了解决cpu运行时的处理速度与内存读写速度不匹配的问题. ...