好家伙，

 

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. [转帖]20191022-从Jenkins NativeOOM到Java8内存

    我把老掉牙的Jenkins升级了,它跑了几天好好的:后来我有一个python脚本使用JenkinsAPI 0.3.9每隔2.5分钟发送约300余get请求,结果过了3天,它就挂了:当我开两个脚本时,4 ...

  2. Linux策略路由详解

    概述 在Linux中,我们通常使用route命令来做路由信息的管理.但是该命令仅仅只能用于基本路由信息的管理,面对功能更加强大的基于策略的路由机制,route命令就显得捉襟见肘.在传统路由算法中,只能 ...

  3. vscode搜索框不见了如何显示

  4. golang: 学会几个语法上的新写法

    看了VictoriaMetrics,学会了几个新写法,记录下来: 1. 数组拷贝 以前: arr := make([]byte, 0, len(oldArr) arr = append(arr, ol ...

  5. Git的使用（二）：远程仓库

    在github上创建远程仓库 本地创建Git仓库适合自己一个人完成工程,但是实际情况中我们需要其他人来协作开发,此时就可以把本地仓库同步到远程仓库,同时还增加了本地仓库的一个备份.常用的远程仓库就是g ...

  6. 2.8 PE结构：资源表详细解析

    在Windows PE中,资源是指可执行文件中存放的一些固定不变的数据集合,例如图标.对话框.字符串.位图.版本信息等.PE文件中每个资源都会被分配对应的唯一资源ID,以便在运行时能够方便地查找和调用 ...

  7. vue + elementui 分页切换页面，缓存页码

    问题场景 列表页面输入查询条件,选择第3页,点击详情进入详情页,从详情页返回时,默认列表页面页码重置为1:此时想要缓存该页码,有两种方式:可按业务场景使用 方式一:用vue自带的 keep-alive ...

  8. 小团队如何妙用 JuiceFS

    早些年还在 ENJOY 的时候, 就已经在用 JuiceFS, 并且一路伴随着我工作过的四家小公司, 这玩意对我来说, 已经成了理所应当不可或缺的基础设施, 对于我服务过的小团队而言, 更是实实在在的 ...

  9. （C语言）我的第一个项目：命令行窗口下的学生成绩管理系统，及数据生成程序

    学生成绩管理系统 页面效果如图: 代码如下: #include <stdio.h> #include <stdlib.h> #include <string.h> ...

  10. Web-background information

    Client and Server A connection on the Internet takes place between 2 computers only: one that has th ...