DOM-文档对象模型

文档对象模型DOM（Document Object Model）：是针对HTML和XML文档的一个API，现在已经成为表现和操作页面标记的真正的跨平台、语言中立的一种标准。

1. DOM的组成

组成	说明
核心DOM	用于任何结构化文档和标准模型
XML DOM	用于XML文档的标准模型,定义了所有XML元素的对象和属性,以及访问它们的方法
HTML DOM	用于HTML文档的标准模型，定义了所有HTML元素的对象和属性,以及访问它们的方法

2. DOM级别

DOM级别	功能范围(依次扩大）	兼容性
DOM1	DOM Core ，DOM HTML	所有现代浏览器都支持
DOM2	DOM Views，DOM Events,DOM Style,DOM Traversal and Range	IE9+，Opera 7+,Safari 2+,Chrome 1+,Firefox 1+
DOM3	DOM Load and Save,DOM Validation	IE9+,Opear9+,Firefox1+

3. DOM树

DOM将HTML和XML文档映射成一个由不同节点组成的树型机构。俗称DOM树。

每种节点都对应于文档中的信息或标记，节点有自己的属性和方法，并和其他节点存在某种关系，节点之间的关系构成了节点层次，例如：

HTML DOM Node Tree

4. 节点

对文档DOM的操作最后都会落脚于对元素节点的操作，主要需要熟知元素节点的属性和方法。

4.1 节点主要属性

属性类型	属性名	属性名
节点自身相关	nodename	节点名字，即标签名
	nodetype	节点类型,共12种类型
	nodeValue	节点值,标签之间的内容

父级节点相关	owenerDocument	节点所属的document对象
	parentNode	节点的父节点

子级节点相关	children	直属子集节点的列表（只包含元素节点）
	firstChild	第一个直接子节点
	lastChild	最后一个直接子节点

兄弟节点相关	previousSibiling	前一个兄弟节点
	nextSibiling	后一个兄弟节点

节点主要方法有：

方法名	说明
hasChildNodes()	有子节点时返回true，否则返回false
appendChild()	在末尾添加子节点，返回新添加的节点。
removeChild()	移除节点并返回这个节点。
replaceChild(node,node)	传入新添加的节点和被替换的节点返回被替换的节点。
insertBefore(node,node)	传入新添加的节点和参照节点，
cloneNode(boolean)	复制节点，参数为true时，复制节点及其所有子节点树，为false时，只复制节点本身
normalize()	处理文档树中的文本节点，删除空文档节点或合并两个相邻的文本节点等

4.3 常用节点类型

4.3.1 Document类型节点

Document类型表示整个文档，document对象则是HTMLDocument（继承自Document类型）的一个实例，表示整个HTML页面。

同时，docuemnt对象也是window对象的一个属性，可以作为全局对象来访问。

document对象的主要属性为与页面相关的信息：

属性名称	属性说明
documentElement	指向<html>元素等同document.firstChild或document.childNodes[0]
body	指向<body>原因
doctype	表示<!DOCTYPE>相关信息，不同浏览器差异比较大，因此用处不大
title	指向<titile>元素
URL	地址栏URL
domain	页面域名
referrer	转向到该页面的URL，新开页面时为空字符串
implementation	提供浏览器对DOM实现情况的描述对象

document对象主要方法：

方法类型	方法名	说明
元素获取方法	getElementById()	根据id获取元素，如有相同只返回第一个
	getElemntsByTagName()	根据标签名返回NodeList
	getElementsByName()	返回name特性为传入参数值的元素集合
文档写入方法	write()	输出文本，接受一个参数：写入到输出流的文本
	writeln()	输出文本，并添加换行符（\n），接受一个参数：写入到输出流的文本
	open()	打开网页输出流
	close()	关闭网页输出流
创建方法	createElement()	根据接收的标签名，创建新元素，并设置ownerDocument属性
	createTextNode()	根据接受的文本，创建文本节点，会同时设置ownerDocument
	createCDATASection()	在XML文件中创建CDATA区域，传入节点内容
	createDocumentFragment()	创建文档片段
	createAttribute()	创建新特性节点

document创建方法实现动态加载js或css文件：

function loadScript(url){                                                  //动态加载外部js文件（需要传入url)，也可以加载js代码，
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = url;
    document.body.appendChild(script);
}

function loadStyle(url){                                                  //动态加载外部css文件，或加载css代码
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.type = "text/css";
    link.href = url;
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(link);
}

4.3.1 Element类型节点（最常用）

Element类型用于表现XML或HTML元素，提供了对元素标签名、子节点以及特性的访问。

在HTML中，元素由HTMLElement类型（或其子类型）表示，HTMLElement继承了Element类型，并添加了对应每个HTML元素都存在的标准特性的属性。

HTMLElement元素类型常用属性

属性	说明
tagName	元素类型标签名，HTML中始终返回大写
id	元素id值
className	元素类名值
方法	说明
getAttribute()	获取属性值
setAttribute()	设置属性值
removeAttribute()	删除属性值

HTMLElement元素类型与定位相关属性和节点 (无单位)

offsetParent	离当前元素最近的一个有定位属性的父节点（只读属性）
offsetLeft	当前元素到定位父级的横向距离，偏移量（只读属性）
offsetTop	当前元素到定位父级的纵向距离，偏移量（只读属性）

clientWidth/Height	可视区宽/高（width + padding*2）
offsetWidth/Height	占位区宽/高 (width + padding2 + margin2

元素节点主要方法：操作节点属性及节点本身

	获取	创建/添加	修改	删除
属性	节点.getAttribute(属性名称)	节点.setAttribute(属性名称，属性值)	节点.setAttribute(属性名称，新值)	节点.removeAttribute(属性名称)
节点	getElementById() getElementsByTagName() …	document.createElement(标签名称）（创建游离元素，还未添加到页面上）父级.appendChild(要添加的元素）（父级下最后追加）父级.insertBefore(添加的元素，被插入的元素) （在指定父级下指定子级前插入元素）	父级.replaceChild(新节点，被替换的节点)； (在指定父级下替换指定节点）	父级.removeChild(要删除的元素); (删除指定父级下指定的元素）

4.4 操作表格

children等方式不适合表格内部元素的获取，可通过针对表格属性获取：

属性名称	说明
tHead	表格头（仅有一个）
tBodies	表格正文
tFoot	表格尾（仅有一个）
rows	行
cells	列

如下图：如何获取目标a: ]obj.tBodies[0].rows[2].cells[1] ,注意下标都从0开始。

最后：元素的DOM操作很多地方都存在兼容性，获取方式也不够灵活，熟知基础之上，利用JQuery更利于实际开发，随着实际工作联系，后面再总结JQ

posted @ 2015-08-12 21:22 331415706 阅读(1662) 评论(0) 编辑收藏举报

刷新页面返回顶部

Peng‘s Blog

DOM-文档对象模型

公告