第一百零一篇:DOM节点类型
好家伙，
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 树的根节点） |
|
| DocumentFragment | 表示轻量级的 Document 对象，其中容纳了一部分文档。 |
|
| DocumentType | 向为文档定义的实体提供接口。 | None |
| ProcessingInstruction | 表示处理指令。 | None |
| EntityReference | 表示实体引用元素。 |
|
| Element | 表示 element（元素）元素 |
|
| Attr | 表示属性。 |
|
| Text | 表示元素或属性中的文本内容。 | None |
| CDATASection | 表示文档中的 CDATA 区段（文本不会被解析器解析） | None |
| Comment | 表示注释。 | None |
| Entity | 表示实体。 |
|
| 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节点类型的更多相关文章
- 第一百零七篇:基本数据类型(undefined,null,boolean类型)
好家伙, 本篇内容为<JS高级程序设计>第三章学习笔记 1.数据类型 ECMAScript有6种简单数据类型(称为原始类型): Undefined, Null, Boolean, Numb ...
- 第一百零六篇:变量的不同声明(var,let和const的不同)
好家伙,JS基础接着学, 本篇内容为<JS高级程序设计>第三章学习笔记 1.变量 ECMAScript 变量是松散类型的,意思是变量可以用于保存任何类型的数据. (确实松散,不像C或C++ ...
- 深入理解DOM节点类型第一篇——12种DOM节点类型概述
× 目录 [1]元素 [2]特性 [3]文本[4]CDATA[5]实体引用[6]实体名称[7]处理指令[8]注释[9]文档[10]文档类型[11]文档片段[12]DTD 前面的话 DOM是javasc ...
- 深入理解DOM节点类型第五篇——元素节点Element
× 目录 [1]特征 [2]子节点 [3]特性操作[4]attributes 前面的话 元素节点Element非常常用,是DOM文档树的主要节点:元素节点是html标签元素的DOM化结果.元素节点主要 ...
- “全栈2019”Java第一百零九章：匿名内部类实现唯一抽象类或接口
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- “全栈2019”Java第一百零七章：匿名内部类与构造方法注意事项
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- “全栈2019”Java第一百零六章：匿名内部类与抽象类接口注意事项
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- “全栈2019”Java第一百零五章：匿名内部类覆盖作用域成员详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- “全栈2019”Java第一百零四章：匿名内部类与外部成员互访详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- “全栈2019”Java第一百零三章：匿名内部类详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
随机推荐
- 【小测试】golang中数组边界检查的开销大约是1.87%~3.12%
作者:张富春(ahfuzhang),转载时请注明作者和引用链接,谢谢! cnblogs博客 zhihu Github 公众号:一本正经的瞎扯 对比C/C++, golang等类型安全的语言会在数组访问 ...
- [西湖论剑 2022]web部分题解（更新中ing
[西湖论剑 2022]Node Magical Login 环境!启动!(ノへ￣.) 这么一看好像弱口令啊,(不过西湖论剑题目怎么会这么简单,当时真的傻),那就bp抓包试一下(这里就不展示了,因为是展 ...
- 【验证码逆向专栏】最新某验三代滑块逆向分析，干掉所有的 w 参数！
声明 本文章中所有内容仅供学习交流使用,不用于其他任何目的,不提供完整代码,抓包内容.敏感网址.数据接口等均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关! 本文章未经许 ...
- ChatGenTitle：使用百万arXiv论文信息在LLaMA模型上进行微调的论文题目生成模型
ChatGenTitle:使用百万arXiv论文信息在LLaMA模型上进行微调的论文题目生成模型 相关信息 1.训练数据集在Cornell-University/arxiv,可以直接使用: 2.正式发 ...
- LyScriptTools 调试控制类API接口手册
LyScriptTools模块中的DebugControl类主要负责控制x64dbg调试器的行为,例如获取或设置寄存器组,执行单步命令等,此类内的方法也是最常用的. 插件地址:https://gith ...
- 设计模式-2 简单工厂模式Factory Method
设计模式-2 简单工厂模式 1 意图: 定义一个用户创建对象的接口,让子类决定实例化那个类.Factory Method使一个类的实例化延迟到其子类 使用场景:将一个类的实例化延迟到其子类结构: 优缺 ...
- 【C语言进阶】atoi函数的模拟实现【C的深度解剖】超详细的解释和注释
[C语言进阶]atoi函数的模拟实现[C的深度解剖]超详细的解释和注释 那么这里博主先安利一下一些干货满满的专栏啦! 作者: #西城s 这是我的主页:#西城s 在食用这篇博客之前,博主在这里介绍一下其 ...
- 【可观测性系列】 Opentelemetry 介绍
作者简介:大家好,我是蓝胖子 ️博客首页:博客园主页蓝胖子的编程梦 每日一句:人生的烦恼,多在于明白的太多,而做的太少 大家好,我是蓝胖子,随着微服务的流行,服务的可观测性概念被越来越多人提及到,究竟 ...
- 零基础入门Vue之皇帝的新衣——样式绑定
回顾 大致掌握了上一节的 插值语法 我已经可以把想要的数据显示到页面上,并且仅需要修改变量,页面就会跟着实时改变 但如果对于已经熟悉前端的人来说,单单有数据还是不太行,还需要css对数据进行样式的修饰 ...
- 零基础入门学习JAVA课堂笔记 ——DAY08
异常 1.什么是异常? Exception 异常是指程序在运行过程中出现的不期而至的各种状况 异常发生在程序运行期间,它影响了正常程序执行流程 通俗易懂的表达就是,程序在发生意料之外或者拿到的不是想要 ...