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树一样。自己熟知树上的每一个节点,并且可以很快的定位到自己想定位的任何一个节点,熟知每一个节点的属性可以根据自己的需要做出自己想要的调整!

推荐看看下面的文档并且动手实验实验:

HTML DOM实例。

HTML DOM参考。

感谢W3C!感谢互联网!

时间: 2024-07-30 10:18:54

HTML DOM(学习笔记二)的相关文章

DOM学习笔记二

DOM中document:代表html的文档对象(重要) document演示: 该对象将标记型文档进行封装 该对象的作用,是对可标记型文档进行操作 常见操作,想要实现动态效果,需要对节点操作,那么先获取到这个节点,想获取节点,就必须先获取节点所属的文档对象document 获取节点的方法体现: getElementById();提高标签的id属性值获取该标签节点,返回该标签节点 getElementsByName();通过标签的name属性获取节点,返回的是一个数组/容器 getElement

js的dom学习笔记二

作者的自白: 知道个大概的原理和意思,这能减少实际操作中所出现的错误,使用起来,能更加的得心应手. 1.识别对象.(清楚你要操作的是谁) html给了网页的控件,css给了网页的样式,js提供动态的网页效果,具体就是用户的交互(事件),当用户通过input设备给予浏览器某个事件信息后,浏览器要回应用户.浏览器怎么回应用户,浏览器里的html文件所以js的操作对象就是html控件和html元素的样式.对象要对应上需求,能更容易达到效果,更容易想出实现的步骤.(不能用不是该对象的方法来操作该对象,清

JavaScript--基于对象的脚本语言学习笔记(二)

第二部分:DOM编程 1.文档象模型(DOM)提供了访问结构化文档的一种方式,很多语言自己的DOM解析器. DOM解析器就是完成结构化文档和DOM树之间的转换关系. DOM解析器解析结构化文档:将磁盘上的结构化文档转换成内存中的DOM树 从DOM树输出结构化文档:将内存中的DOM树转换成磁盘上的结构化文档 2.DOM模型扩展了HTML元素,为几乎所有的HTML元素都新增了innerHTML属性,该属性代表该元素的"内容",即返回的某个元素的开始标签.结束标签之间的字符串内容(不包含其它

Ajax学习笔记(二)

二.prototype库详解 1.prototype库的使用 //导入下载好的prototype.js文件 <script type="text/javascript" src="prototype.js"></script> //在自己的js中直接使用Prototype对象 <script type="text/javascript"> document.writeln("Prototype库的版本

AJax 学习笔记二(onreadystatechange的作用)

AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了onreadyStateChange事件实现这一功能.这类似于回调函数的做法.onreadyStateChange事件可指定一个事件处理函数来处理XMLHttpRequest对象的执行结果,如: 复制代码 代码如下: ajaxObj=createAjaxObject(); var url="/MyTod

Caliburn.Micro学习笔记(二)----Actions

Caliburn.Micro学习笔记(二)----Actions 上一篇已经简单说了一下引导类和简单的控件绑定 我的上一个例子里的button自动匹配到ViewModel事件你一定感觉很好玩吧 今天说一下它的Actions,看一下Caliburn.Micro给我们提供了多强大的支持 我们还是从做例子开始 demo的源码下载在文章的最后 例子1.无参数方法调用 点击button把textBox输入的文本弹出来 如果textbox里没有文本button不可点,看一下效果图 看一下前台代码 <Stac

2. 蛤蟆Python脚本学习笔记二基本命令畅玩

2. 蛤蟆Python脚本学习笔记二基本命令畅玩 本篇名言:"成功源于发现细节,没有细节就没有机遇,留心细节意味着创造机遇.一件司空见惯的小事或许就可能是打开机遇宝库的钥匙!" 下班回家,咱先来看下一些常用的基本命令. 欢迎转载,转载请标明出处:http://blog.csdn.net/notbaron/article/details/48092873 1.  数字和表达式 看下图1一就能说明很多问题: 加法,整除,浮点除,取模,幂乘方等.是不是很直接也很粗暴. 关于上限,蛤蟆不太清楚

小猪的数据结构学习笔记(二)

小猪的数据结构学习笔记(二) 线性表中的顺序表 本节引言: 在上个章节中,我们对数据结构与算法的相关概念进行了了解,知道数据结构的 逻辑结构与物理结构的区别,算法的特性以及设计要求;还学了如何去衡量一个算法 的好坏,以及时间复杂度的计算!在本节中我们将接触第一个数据结构--线性表; 而线性表有两种表现形式,分别是顺序表和链表;学好这一章很重要,是学习后面的基石; 这一节我们会重点学习下顺序表,在这里给大家一个忠告,学编程切忌眼高手低,看懂不代表自己 写得出来,给出的实现代码,自己要理解思路,自己

马哥学习笔记二十四——分布式复制快设备drbd

DRBD: 主从 primary: 可执行读.写操作 secondary: 文件系统不能挂载 DRBD: dual primay, 双主(基于集群文件系统的高可用集群) 磁盘调度器:合并读请求,合并写请求: Procotol:drbd数据同步协议 A: Async, 异步  数据发送到本机tcp/ip协议栈 B:semi sync, 半同步  数据发送到对方tcp/ip协议 C:sync, 同步  数据到达对方存储设备 DRBD Source: DRBD资源 资源名称:可以是除了空白字符外的任意

【Unity 3D】学习笔记二十八:unity工具类

unity为开发者提供了很多方便开发的工具,他们都是由系统封装的一些功能和方法.比如说:实现时间的time类,获取随机数的Random.Range( )方法等等. 时间类 time类,主要用来获取当前的系统时间. using UnityEngine; using System.Collections; public class Script_04_13 : MonoBehaviour { void OnGUI() { GUILayout.Label("当前游戏时间:" + Time.t