您的位置：首页 > Web前端 > HTML

HTML DOM

2014-03-23 15:26 134 查看

HTML DOM简介

HTML DOM(HTML Document Object Model)定义了访问和处理HTML文档的标准方法。

什么是DOM？

通过JS，可以重构整个HTML文档。可以添加、移出、改变或重排页面上的项目。要改变页面的某个东西，JS就需要对HTML文档中所有元素进行访问的入口。这个入口，连同对

HTML元素进行添加、移动、改变或移除的方法和属性，都是通过DOM来获得的。

1998年，W3C发布了第一级的DOM规范。这个规范允许访问和操作HTML页面中的每一个单独的元素。DOM可被JS用来读取、改变HTML,XHTML,XML。

DOM被分为不同的部分(核心、XML及HTML)和级别(DOM Level 1/2/3)。

Core DOM

定义了一套标准的针对任何结构化文档的对象。

XML DOM

定义了一套针对XML文档的对象。

HTML DOM

定义了一套针对HTML文档的对象。

HTML文档中的每个成分都是一个节点。

节点

根据DOM,HTML文档中的每个成分都是一个节点。

DOM是这样规定的：

每个文档是一个文档节点；

每个HTML标签是一个元素节点；

包含在HTML元素中的文本是文本节点；

每一个HTML属性是一个属性节点；

注释属于注释节点。

Node层次

节点彼此都有等级关系。

HTML文档中的所有节点组成了一个文档树(节点树)。HTML文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这

棵树最低级别的所有文本节点为止。

一棵节点数中的所有节点彼此都是有关系的

文档树(节点树)

节点树中的所有节点彼此都存在关系。

除文档节点之外的每个节点都有父节点。

大部分元素都有子节点。

当节点分享同一个父节点时，他们就是同级节点。

节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点。

节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点。

通过DOM可以访问HTML文档中的每个节点。

查找并访问节点

可以通过若干种方法来查找目标元素：

通过使用getElementById()和getElementsByTagName()方法；

通过使用一个元素节点的parentNode,firstChild,lastChild属性。

getElementById()&getElementsByTagName()

getElementById()和getElementsByTagName()这两种方法，可以查找整个HTML文档中的任何HTML元素。

这两种方法会忽略文档的结构，会提供任何所需要的HTML元素，不论他们在文档中所处的位置。getElementById()方法可以通过指定的id来返回元素。

getElementById()语法

EXAMPLE:document.getElementById("ID")

getElementById()方法无法工作在XML中。在XML文档中，必须通过拥有类型的id的属性来进行搜索，而此类型必须在XML DTD中进行声明。

getElementsByTagName()语法

EXAMPLE:document.getElementsByTagName("标签名称")或者document.getElementById("ID").getElementsByTagName("标签名称")

getElementsByTagName()方法会使用指定的标签名返回所有的元素(作为一个节点列表)，这些元素是你在使用此方法时所处的元素的后代。

getElementsByTagName()方法可被用于任何的HTML元素。

节点列表(nodeList)

当使用节点列表时，通常要把此列表保存在一个变量中：

EXAMPLE:var x=document.getElementsByTagName("标签名称")

现在这个变量x包含着页面的所有"标签名称"，并且我们可以通过他们的索引来访问这些"标签名称"元素。索引号从0开始。

可以通过使用length属性来循环遍历节点列表：

EXAMPLE:var x=document.getElementsByTagName("p");

for(var i=0;i<x.length;i++){

//do something

}

也可以通过索引号来访问某个具体的元素：

EXAMPLE:var y=x[2];

parentNode&firstChild&lastChild

这三个属性可遵循文档的结构。

对firstChild属性最普遍的用法是访问某个元素的文本:

EXAMPLE:var x=document.getElementsByTagName("p");

var text=x.firstChild.nodeValue;

parentNode属性常被用来改变文档的结构：

EXAMPLE:var x=document.getElementById("mainDiv");

x.parentNode.removeChild(x);

//先找到带有指定ID的节点，然后移至其父节点并执行removeChild()方法删除掉该节点。

根结点

有两种特殊的文档属性可以用来访问根结点：

document.documentElement

该属性可返回在于XML以及HTML文档中的文档根结点。

document.body

该属性是对HTML页面的特殊扩展，提供了对<body>标签的直接访问。

nodeName&nodeValue&nodeType包含有关于节点的信息

节点信息

每个节点都拥有包含着关于节点某些信息的属性。这些属性是：

nodeName(节点名称)

nodeValue(节点值)

nodeType(节点类型)

nodeName

nodeName属性还有某个节点的名称：

元素节点的nodeName是标签的名称；

属性节点的nodeName是属性名称；

文本节点的nodeName永远是#text;

文档节点的nodeName永远是#document；

nodeName所包含的XML元素的标签名称永远是大写的。

nodeValue

对于文本节点，nodeValue属性包含文本；

对于属性节点，nodeValue属性包含属性值；

nodeValue属性对于文档节点和元素节点是不可用的。

nodeType

nodeType属性可返回节点的类型

最重要的类型是：

元素类型 节点类型

元素 1

属性 2

文本 3

注释 8

文档 9

JS对象

对象 描述

Window JS层级中的顶层对象，表示浏览器窗口。

(HTML DOM Window对象详细暂略)

Navigator 包含客户端浏览器的信息。

(HTML DOM Navigator对象详细暂略)

Screen 包含客户端显示屏的信息。

(HTML DOM Screen对象详细暂略)

History 包含浏览器窗口访问过的URL。

(HTML DOM History对象详细暂略)

Location 包含了当前URL的信息。

(HTML DOM Location对象详细暂略)

HTML DOM对象

对象 描述

document 代表整个HTML文档，可被用来访问页面中的所有元素。

anchor 代表<a>元素。

area 代表图像映射中的<area>元素。

base 代表<base>元素。

body 代表<body>元素。

button 代表<button>元素。

event 代表某个事件的状态。

form 代表<form>元素。

frame 代表<frame>元素。

frameset 代表<frameset>元素。

iframe 代表<iframe>元素。

image 代表<image>元素。

input button 代表HTML表单中的一个按钮。

input checkbox 代表HTML表单中的复选框。

input file 代表HTML表中的文件上传。

input hidden 代表HTML表单中的隐藏域。

input password 代表HTML表单中的密码域。

input radio 代表HTML表单中的单选按钮。

input reset 代表HTML表单中的重置按钮。

input submit 代表HTML表单中的确认按钮。

input text 代表HTML表单中的文本输入域(文本框)。

link 代表<link>元素。

meta 代表<meta>元素。

object 代表<object>元素。

option 代表<option>元素。

select 代表HTML表单中的选择列表。

style 代表单独的样式声明。

table 代表table元素。

tableData----？

tableRow 代表<tr>元素。

textarea 代表<textare>元素。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航