第一百零一篇: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第 ...
随机推荐
- 详解Promise.race()可以解决多个异步请求那个请求先返回
Promise.race([]);接受一个参数,由promise组成的一个数组: 它的返回结果是promise对象: 它的结果和状态由什么去决定呢? 由第一个改变Promise状态的对象去决定:若是返 ...
- 佳能F-789SGA升级与超频——互联网Tips存档
佳能F-789SGA简介 佳能F-789SGA是一款性价比极高的科学函数计算器,功能与卡西欧fx-991ES近似,稍强于991ES,弱于991CNX. 来自電卓院亜紀良的评价 来自杨高峰的对比总结 来 ...
- Leetcode 98题验证二叉搜索树(Validate Binary Search Tree) Java语言求解
题目链接 https://leetcode-cn.com/problems/validate-binary-search-tree/ 题目内容 给定一个二叉树,判断其是否是一个有效的二叉搜索树. 假设 ...
- 深入浅出Java多线程(一):进程与线程
引言 大家好,我是你们的老伙计秀才. 在计算机系统的发展历程中,早期的计算机操作模式十分单一和低效.用户只能逐条输入指令,而计算机则按照接收指令的顺序逐一执行,一旦用户停止输入或进行思考,计算机会处于 ...
- SqlSugar导航查询/多级查询
1.导航查询特点 作用:主要处理主对象里面有子对象这种层级关系查询 1.1 无外键开箱就用 其它ORM导航查询 需要 各种配置或者外键,而SqlSugar则开箱就用,无外键,只需配置特性和主键就能使用 ...
- C/C++ 文件与指针操作笔记
创建临时文件 #include <stdio.h> int main(int argc, char *argv[]) { FILE *temp; char c; if ((temp = t ...
- 《字节码编程》PDF107页,11万字。既然市面缺少ASM、Javassist、Byte-buddy成体系的学习资料,那我来!
作者:小傅哥 博客:https://bugstack.cn - 汇总系列原创专题文章 沉淀.分享.成长,让自己和他人都能有所收获! 让人怪不好意思的,说是出书有点膨胀,毕竟这不是走出版社的流程,选题. ...
- DataSet类型转换实体
查询DataSet类型无法对每条数据进行循环转换,利用泛型对象使用反射机制将对象相关属性进行自动赋值. 基础调用 DataSet ds = DbHelper.Query(SQL); if (ds.Ta ...
- 2.3 实验:用linxerUnpack进行通用脱壳--《恶意代码分析实战》
Lab01-03.exe 实验内容: 1.将文件上传到http://www.VirusTotal.com 进行分析并查看报告.文件匹配到了已有的反病毒软件特征吗? 2.是否有这个文件被 ...
- kafka-Kafka3.4版本创建topic出现zookeeper is not a recognized option
问题描述:在linux云服务器上搭建了一套kafka3.0集群,然后按照以前的创建topic指令: ./kafka-topics.sh --zookeeper hadoop01:2181,hadoop ...