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查询,即从单个数据库表中检索数据的单条语 ...
随机推荐
- gcc和ld 中的参数 --whole-archive 和 --no-whole-archive
首先 --whole-archive 和 --no-whole-archive 是ld专有的命令行参数,gcc 并不认识,要通gcc传递到 ld,需要在他们前面加 -Wl,字串. --whole-ar ...
- 黄聪:Discuz自制模板带jquery时与discuz本身冲突解决办法
由于JQuery的效果很好,在制作模板时难免会用到各种jquery效果.可是做过模板的人就会发现加上自己的juery代码后,discuz自带的一些下拉功能就不可以使用了,其实原因就是discuz和JQ ...
- Git-Flow
Overview Git-Flow is a high-level command set wrapping low-level Git commands to support the "s ...
- SparkStreaming入门及例子
看书大概了解了下Streaming的原理,但是木有动过手啊...万事开头难啊,一个wordcount 2小时怎么都运行不出结果.是我太蠢了,好了言归正传. SparkStreaming是一个批处理的流 ...
- WindowsForm通过字符串名称实例化控件
private Control FindControl(Control control, string controlName) { Control c1; foreach (Control c in ...
- 【Java】PrettyTime
package test; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.D ...
- C#2
同名的两个类如果在不同的命名空间中,相互之间是不会混淆的. 一个名为TextHello的命名空间中创建一个名为Program的类,引用方法 TextHello.Program 我们常用的Console ...
- css针对(各大浏览器、各版本)调兼容
ie6\ie7\firefox之下各自识别的CSS符号 #1 { color: #333; } /* firefox */ * html #1 { color: #666; } /* IE6 */ * ...
- mycat未配置对应表导致报错
Caused by: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: can't find table define in sch ...
- Dynamics CRM 2011 权限管理(转)
http://www.cnblogs.com/LeoTang/p/3344265.html Dynamics CRM 2011 权限管理 CRM系统基于角色的权限主要通过部门.角色.用户.团队来 进行 ...