HTML DOM(学习笔记二)
嗯,在HTML DOM(学习笔记一)中简单描述了一下HTML DOM 是什么,这一篇将记录下来有关HTML DOM的内容!
1:DOM节点
首先,再来看一下HTML DOM的树状结构,如下图所示:
这就是我们要处理的HTML DOM 也就是一种HTML文档的另一种表现的形式,更加接近我们的HTML文档的表现形式的样式是这样的,如下图所示:
在HTML DOM中,所有的事物都是节点。HTML DOM就是被视为节点树的HTML。根据W3C的HTML DOM标准,HTML文档中所有内容都是节点,如上图所示,整个文档是一个文档节点;每一个HTML元素是一个元素节点;HTML元素的文本是文本节点;每一个HTML元素的属性是属性节点;而注释是注释节点。通过HTML DOM,树中的所有节点均能通过JAVASCRIPT进行访问。所有的HTML节点都可以被修改、也可以被创建和删除。
如果学习过数据结构中的树,那么对于理解树形数据结构的特点来说是非常容易的,不过即使没有学习过,通过看下面的图也是非常容易理解的。
了解树形数据结构的特点,对于理解通过HTML节点的属性来找其他的HTML节点是非常有帮助的!
2:DOM方法
如果想操作HTML节点,必须先获得对应的节点才可以,而获得HTML节点的常用方式有两种,一是:通过HTML节点的方法(主要用来控制我们能够执行的动作);二是:通过HTML节点的属性(主要用来控制我们能够获取或者设置的值,以及根据树形结构的特点获取与其相关联的其他HTML节点)
下面是一些我们在实际的开发工作中常使用到的方法:
1)getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用,如果有多个HTML节点的ID属性是一样的则返回第一个,这个方法非常常用。
2)getElementsByName() 方法可返回带有指定名称的对象的集合,注意是集合。
3)getElementsByTagName()方法可返回带有指定标签名的所有元素,注意是集合。
3)write() 方法可向文档写入 HTML 表达式或 JavaScript 代码。
4)appendChild() 方法向节点添加最后一个子节点。
5)removeChild() 方法指定元素的某个指定的子节点。
6)setAttribute() 方法添加指定的属性,并为其赋指定的值。
7)getAttribute() 方法返回指定属性名的属性值。
当然,还有许多的方法,这些是最常用的一些而已,最后总结的时候我会将所有的方法都列出来一下,这个工作W3C已经做的很好了!使用任何方法在联网的情况下也是非常简单的,当然,如果想了解的深入和熟练最好自己多加的练习!
3:DOM属性
属性通常控制着HTML节点的状态特性,我们可以通过HTML节点的属性来获取或者设置对应的HTML节点的状态值。
在实际的开发工作中常用的属性如下:
1)innerHTML属性,用于获取HTML节点的内容,此属性对于获取或者替换HTML节点的内容是非常有用的。
2)parentNode属性,用于获取HTML节点的父节点,注意是单个。
3)childNodes属性,用于获取HTML节点的子节点们,注意很可能是多个。
4)attributes属性,用于获取HTML节点的属性集。
注意:对于不同的HTML节点类型而言其对应的nodeName属性、nodeValue属性、nodeType属性的值是不一样的,归类如下:
nodeName属性用于规定HTML节点的名称:
1)nodeName是只读的。
2)元素节点的nodeName与对应的HTML标签名相同。
3)属性节点的nodeName与对应的HTML属性名相同。
4)文本节点的nodeName始终是#text。
5)文档节点的nodeName始终是#document。
nodeValue属性用于规定HTML节点的值:
1)元素节点的nodeValue是undefined或者null。
2)文本节点的nodeValue是文本本身。
3)属性节点的nodeValue是属性值。
nodeType属性用于规定HTML节点的类型,也是只读的:
下面是比较重要的几种HTML节点的类型
1)元素节点——1
2)属性节点——2
3)文版节点——3
4)注释节点——8
5)文档节点——9
嗯,我觉得以上内容就是HTML DOM的最为核心的知识点了:
1)换一种视角来看待HTML文档,将HTML文档看作是一棵DOM树,文档的所有内容都可以映射为DOM树的节点
2)使用DOM方法来控制HTML DOM的行为或者说来展现它的行为,当然最为关键的就是查找对应的HTML节点的方法了。
3)使用DOM属性来控制HTML DOM的状态,获取它的状态值或者重新的设置他的状态值。
不过这样只是了解个大概的情况,并不能在客户端或者服务器端通过脚本来灵活的控制或者构建复杂多变、灵活实用、丰富多彩的HTML页面,如果想达到这个地步就需要继续深入、全面、系统的学习了,让自己的知识像一棵茁壮繁茂的DOM树一样。自己熟知树上的每一个节点,并且可以很快的定位到自己想定位的任何一个节点,熟知每一个节点的属性可以根据自己的需要做出自己想要的调整!
推荐看看下面的文档并且动手实验实验:
感谢W3C!感谢互联网!
HTML DOM(学习笔记二)的更多相关文章
- AJax 学习笔记二(onreadystatechange的作用)
AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...
- Typescript 学习笔记二:数据类型
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- amazeui学习笔记二(进阶开发4)--JavaScript规范Rules
amazeui学习笔记二(进阶开发4)--JavaScript规范Rules 一.总结 1.注释规范总原则: As short as possible(如无必要,勿增注释):尽量提高代码本身的清晰性. ...
- 微信小程序学习笔记二 数据绑定 + 事件绑定
微信小程序学习笔记二 1. 小程序特点概述 没有DOM 组件化开发: 具备特定功能效果的代码集合 体积小, 单个压缩包体积不能大于2M, 否则无法上线 小程序的四个重要的文件 *js *.wxml - ...
- WPF的Binding学习笔记(二)
原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...
- [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计
源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...
- JMX学习笔记(二)-Notification
Notification通知,也可理解为消息,有通知,必然有发送通知的广播,JMX这里采用了一种订阅的方式,类似于观察者模式,注册一个观察者到广播里,当有通知时,广播通过调用观察者,逐一通知. 这里写 ...
- java之jvm学习笔记二(类装载器的体系结构)
java的class只在需要的时候才内转载入内存,并由java虚拟机的执行引擎来执行,而执行引擎从总的来说主要的执行方式分为四种, 第一种,一次性解释代码,也就是当字节码转载到内存后,每次需要都会重新 ...
- Java IO学习笔记二
Java IO学习笔记二 流的概念 在程序中所有的数据都是以流的方式进行传输或保存的,程序需要数据的时候要使用输入流读取数据,而当程序需要将一些数据保存起来的时候,就要使用输出流完成. 程序中的输入输 ...
- 《SQL必知必会》学习笔记二)
<SQL必知必会>学习笔记(二) 咱们接着上一篇的内容继续.这一篇主要回顾子查询,联合查询,复制表这三类内容. 上一部分基本上都是简单的Select查询,即从单个数据库表中检索数据的单条语 ...
随机推荐
- 报错:Caused by: java.io.FileNotFoundException: d:\youTemprepository\upload_77faffc1_1580a9240ca__8000_00000001.tmp (系统找不到指定的路径。)
org.apache.commons.fileupload.FileUploadBase$IOFileUploadException: Processing of multipart/form-dat ...
- SVN:通过Client端打tag
教你如何使用svnClient打tag~给公司人用的! 1.进入代码主目录 2.右击空白处“TortoiseSVN”—->“Branch/tag” 3.点地址栏右侧的 (选择tags存放目录) ...
- Mysql分区技术
注:分区的语法可以看手册中有详细的写法和例子: show plugins; 此命令查看可有partition这个选项,有则mysql支持分区,没有的话,就可以升级一下mysql 实时监控一个命令执行情 ...
- JMM & synchronized概述(转)
根据Java语言规范中的说明,JVM系统中存在一个主内存(Main Memory),Java中所有的变量存储在主内存中,对于所有的线程是共享的(相当于黑板,其他人都可以看到的).每个线程都有自己的工作 ...
- c# 存档修改 读取 写入
内涵图
- 手把手教你玩转Git分布式版本控制系统!
目录 Git诞生历史 Git环境准备 Git安装部署 Git常用命令 Git基本操作 Git管理分支结构 Git管理标签 GitLab安装部署 GitHub托管服务 Git客户端工具 1 Git诞生历 ...
- c++代码模板
c++代码模板 &代码: #include <bits/stdc++.h> using namespace std; typedef long long ll; const int ...
- [MySQL] 两个优化数据库表的简单方法--18.3
这里介绍两个简单的优化MySQL数据库表的方法 一.定期分析表和检查表 1.分析表语法如下: alalyze [local|no_write_to_binlog] table table_name1[ ...
- STM32的串口
一:2个状态位_itstatus与_flagstatus的区别: _flagstatus:只是读状态标志,不管中断是否使能或发生.例如使用查询方式发送数据就需要读改状态位. _itstatus:和中断 ...
- Laravel中URL,ACTION,ROUTE区别
创建路由如下所示: Route::get('articles',['uses'=>'ArticlesController@index','as'=>'articles.index']); ...