【JS总结】——Document Object Model(DOM)

来源:互联网 发布:高性能网络编程框架 c 编辑:程序博客网 时间:2024/05/27 16:40

    上一篇说道BOM,了解了什么是浏览器对象模型,下面就来了解一个新的模型。


简介:

    DOM:文档对象模型,是W3C组织推荐的处理可扩展标识语言的标准编程接口。BOM——浏览器对象模型到现在为止还是谁用谁自己加条件,还没有人为它做一个通用的标准,但是习惯上,经常用DOM作为BOM的事实标准。


基本介绍:

1、节点

    加载HTML页面时,Web浏览器会生成一个树形结构,用HTML做界面时,也会涉及到树形结构。DOM将这种树形结构就理解为节点组成,这里面的每一层都是一个节点。


    其实节点就是HTML中的标签,标签有父标签、子标签,那么节点也有父节点和子节点,如图所示,head和body就是html的子节点,html就是head和body的父节点,而且html是没有父节点的,说明html这个节点在树形结构中层次是最高的。


2、节点分类

    如图,一个树形结构中有很多节点,就像大树有很多枝,它们分为营养枝和繁殖枝,繁殖枝是用来结种子繁殖后代的,营养枝是为了提供营养的。那么这些节点也有不同的分类,同样不同种类的节点功能也不同。


    节点共有三种:元素节点、文本节点、属性节点,根据名字其实也能大概了解这三种节点是什么样子的,

<span style="font-family:KaiTi_GB2312;font-size:18px;"><div title="标签">测试</div></span>

在这句HTML代码中,“div”就是元素节点,“title='标签'”就属于属性节点,“测试”就属于文本节点。


3、节点属性

    在DOM模型下,每个节点都有自己的属性,每个节点有三个属性,

信息节点属性节点类型nodeNamenodeTypenodeValue元素元素名称1null属性属性名称2属性值文本#text3文本内容(不包含html)

    除掉节点的基本属性,它还可以使用层次节点属性来获取与它相关的层次的节点。

层次节点属性属性说明childNodes获取当前元素节点的所有子节点firstChild获取当前元素节点的第一个子节点lastChild获取当前元素节点的最后一个子节点ownerDocument获取该节点的文档根节点,相当于DocumentparentNode获取当前节点的父节点previousSibling获取当前节点的前一个同级节点nextSibling获取当前节点的后一个同级节点attributes获取当前元素节点的所有属性节点集合


4、节点操作

    对于节点的定位,W3C给我们提供了很多方法,以便对元素的操作,下面就是操作的几种方法:

元素节点方法方法说明getElementById()获取特定ID的节点getElementsByTagName()获取相同元素的节点列表getElementsByName()获取相同名称的节点列表getAttribute()获取特定元素节点的属性值setAttribute()设置特定元素节点的属性值removeAttribute()移除特定元素节点属性    由每个方法实现的功能也能看出,他们传入的参数不同,返回值也不同,每个方法都是传入相应的参数,来获得相应的返回值。


    DOM不仅仅可以查找节点,也可以创建节点、复制节点、插入节点、删除节点和替换节点,每一种实现都有相应的方法:

操作方法方法说明write()这个方法可以把任意字符串插入到文档中createElement()创建一个元素节点appendChild()将新节点追加到子节点列表的末尾createTextNode()创建一个文件节点insertBefore()将新节点插入在前面replaceChild()用新节点替换旧节点cloneNode()复制节点removeChild()移除节点

总结

    DOM是JavaScript对网页元素的一个抽象,或者说它是一个网页中所有元素的集合,它涉及到网页中的每一个节点,并能对每一个节点进行操作,这些还都是基础,对于DOM进一步的学习,接下来再介绍。




0 0
原创粉丝点击