DOM

DOM是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。

IE中的所有DOM对象都是以COM对象的形式实现的。这意味着IE中的DOM对象与原生的JavaScript对象的行为或活动特点并不一致。

节点层次

<html>
    <head>Sample Page</head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

文档节点是每个文档的根节点。这个例子中，文档节点只有一个子节点，即html元素，我们称之为文档元素。文档元素是文档的最外层元素，文档中的其他所有元素都包含在文档元素中。每个文档只能有一个文档元素。在HTML页面中，文档元素始终都是<html>元素。在XML中，没有预定义的元素，因此任何元素都可能成为文档元素。

每一段标记都可以通过树中的一个节点来表示。

Node 类型

DOM1级定义了一个Node接口，该接口将由DOM中所有节点类型实现。这个Node接口在JavaScript中是作为Node类型实现的；除了IE之外，在其他所有浏览器中都可以访问到这个类型。JavaScript中的所有节点类型都继承自Node类型，因此所有节点类型都共享着相同的基本属性和方法。

每个节点都有一个nodeType属性，用于表面节点的类型。节点类型由在Node类型中定义的下列12个数值常量来表示，任何节点类型必居其一：

  • Node.ELEMENT_NODE(1);
  • Node.ATTRIBUTE_NODE(2);
  • Node.TEXT_NODE(3);
  • Node.CDATE_SECTION_NODE(4);
  • Node.ENTITY_REFERENCE_NODE(5);
  • Node.ENTITY_NODE(6);
  • Node.PROCESSING_INSTRUCTION_NODE(7);
  • Node.COMMENT_NODE(8);
  • Node.DOCUMENT_NODE(9);
  • Node.DOCUMENT_TYPE_NODE(10);
  • Node.DOCUMENT_FRAGMENT_NODE(11);
  • Node.NOTATION_NODE(12);
if (someNode.nodeType == Node.ELEMENT_NODE) { //在IE中无效
    alert("Node is an element.");
}
//由于IE没有公开Node类型的构造函数，因此上面的的代码在IE中会导致错误
if (someNode.nodeType == 1) { //适用于所有的浏览器
    alert("Node is an element.");
}

并不是所有节点类型都收到Web浏览器的支持。

nodeName 和 nodeValue 属性

对于元素节点，nodeName中保存的始终是元素的标签名，而nodeValue始终为null。

节点关系

每个节点都有一个childNodes属性，其中保存着一个NodeList对象。NodeList是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。NodeList对象的独特之处在于，它实际上是基于DOM结构动态执行查询的结果，因此DOM结构的变化能够自动反映在NodeList对象中。

var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1);
var count = someNode.childNodes.length;

另外，要注意length属性表示的是访问NodeList的那一刻，其中包含的节点数量。可以用Array.prototype.slice()方法将NodeList对象转化为数组。

//在IE8之前版本无效
var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes, 0);
//由于IE8之前的版本将NodeList实现为一个COM对象。要想在IE中将NodeList转化为数组，必须手动枚举所有成员。
function convertToArray (nodes) {
    var array = null;
    try {
        array = Array.prototype.slice.call(nodes, 0); //针对非IE浏览器
    } catch (ex) {
        array = new Array();
        for (var i = 0, len = nodes.length; i < len; i++) {
            array.push(nodes[i]);
        }
    }
return array;
}

每个节点都有一个parentNode属性，该属性指向文档树中的父节点。包含在childNodes列表中的所有节点都具有相同的父节点。此外，包含在childNodes列表中的每个节点相互之间都是同胞节点。通过使用列表中每个节点的previousSibling和nextSibling属性，可以访问同一列表中的其他节点。列表中的第一个节点的previousSibling属性值为null，而列表中最后一个节点的nextSibling属性的值同样也为null。

if (someNode.nextSibling === null) {
    alert("Last node in the parent`s childNodes list.");
} else if (someNode.previousSibling === null) {
    alert("First node in the parent`s childNodes list.");
}

当然，如果只有一个节点，那么该节点的previousSibling和nextSibling属性都为null。

父节点的firstChild和lastChild属性分别指向其childNodes列表中的第一个和最后一个节点。在只有一个子节点的情况下，firstChild和lastChild指向同一个节点。如果没有子节点，那么firstChild和lastChild的值均为null。

hasChildNodes()这个方法在节点包含一个或多个子节点的情况下返回true。

所有节点都有的最后一个属性是ownerDocument，该属性指向表示整个文档的文档节点。

操作节点

因为关系指针是只读的，所有DOM提供了一些操作节点的方法。
appendChild()用于向childNodes列表的末尾添加一个节点。更新完成后，appendChild()返回新增的节点。

var  returnedNode = someNode.appendChild(newNode);
alert(returnedNode == newNode); //true
alert(returnedNode.lastChild == newNode); //true

如果传入到appendChild()中的节点已经是文档的一部分了，那结果就是将该节点从原来的位置转移到新位置。
因此，如果在调用appendChild()时传入了父节点的第一个子节点，那么该节点就会成为父节点的最后一个子节点。

//someNode有多个子节点
var returnedNode = someNode.appendChild(someNode.firstChild);
alert(returnedNode == someNode.firstChild); //false
alert(returnedNode == someNode.lastChild); //true

insertBefore()方法可以把节点放在childNodes列表中某个特定的位置上。这个方法接收两个参数：要插入的节点和作为参考的节点。插入节点后，被插入的节点会变成参考节点的前一个同胞节点（previousSibling），同时被方法返回。如果参考节点是null，则insertBefore()与appendChild()执行相同的操作。

//插入后成为最后一个子节点
returnedNode = someNode.insertBefore(newNode, null);
alert(newNode == someNode.lastChild); //true

//插入后成为第一个子节点
var returnedNode = someNode.insertBefore(newNode, someNode.firstChild);
alert(returnedNode == newNode); //true
alert(newNode == someNode.firstChild); //true

//插入到最后一个子节点前面
returnedNode = someNode.insertBefore(newNode, someNode.lastChild);
alert(newNode == someNode.childNodes[someNode, childNodes.length - 2]); //true

replaceChild()方法接收两个参数：要插入的节点和要替换的节点。要替换的节点将由这个方法返回并从文档树中被移除，同时由要插入的节点占据其位置。

//替换第一个子节点
var returnedNode = someNode.replaceChild(newNode, someNode.firstChild);

//替换最后一个子节点
returnedNode = someNode.replaceChild(newNode, someNode.lastChild);

在使用replaceChild()插入一个节点时，该节点的所有关系指针都会从被它替换的节点复制过来。尽管从技术上讲，被替换的节点仍然还在文档中，但它在文档中已经没有了自己的位置。

removeChild()方法接收一个参数，既要移除的节点。被移除的节点将成为方法的返回值。

//移除第一个子节点
var formerFirstChild = someNode.removeChild(someNode.firstChild);

//移除最后一个子节点
var formerLastChild = someNode.removeChild(someNode.lastChild);

通过removeChild()移除的节点仍然为文档所有，只不过在文档中已经没有了自己的位置。

如果在不支持子节点的节点上调用了这些方法，将会导致错误发生。

其他方法

有两个方法是所有类型的节点都有的：

  • cloneNode()，用于创建调用这个方法的节点的一个完全相同的副本。接收一个布尔值参数，表示是否执行深复制。在参数为true时，执行深复制，也就是复制节点及其整个子节点树；在参数为false，执行浅复制，即只复制节点本身。复制后返回的节点副本属于文档所有，但并没有为它制定父节点。
  • normalize()，这个方法唯一的作用就是处理文档树中的文本节点。由于解析器的实现或DOM操作等原因，可能会出现文本节点不包含文本，或者连接出现两个文本节点的情况。当某个节点上调用这个方法时，就会在该节点的后代节点中查找上述两种情况。如果找到了空文本节点，则删除它；如果找到相邻的文本节点，则将它们合并为一个文本节点。

cloneNode()方法不会复制添加到DOM节点中的JavaScript属性，例如事件处理程序等。这个方法只复制特性、（在明确指定的情况下也复制）子节点，其他一切都不会复制。IE在此存在一个BUG，即它会复制事件处理程序，所以我们建议在复制之前最好先移除事件处理程序。

Document 类型

在浏览器中，document对象是HTMLDocument（继承自Document类型）的一个实例，表示整个HTML页面。而且，document对象是window对象的一个属性，因此可以将其作为全局对象来访问。

Document节点具有下列特性：

  • nodeType的值为9
  • nodeName的值为“#document”
  • nodeValue的值为null
  • parentNode的值为null
  • ownerDocument的值为null
  • 其子节点可能是一个DocumentType（最多一个）、Element（最多一个）、ProcessingInstruction或Comment。

Document类型可以表示HTML页面或者其他基于XML的文档。不过，最常见的应用还是作为HTMLDocument实例的document对象。

在Safari、Firefox、Chrome和Opera中，可以通过脚本访问Document类型的构造函数和原型。但在所有浏览器中都可以访问HTMLDocument类型的构造函数和原型，包括IE8及后续版本。

文档的子节点
document对象的documentElement属性始终指向HTML页面中的<html>元素。

<html>
    <body>
    </body>
</html>

var html = document.documentElement; //取得对<html>的引用
alert(html === document.childNodes[0]); //true
alert(html === document.firstChild); //true

document对象还有一个body属性，直接指向<body>元素。

var body = document.body; //取得对<body>的引用

所有浏览器都支持document.documentElement和document.body属性。

Document另一个可能的子节点是DocumentType。通常将<!DOCTYPE>标签看出一个与文档其他部分不同的实体，可以通过doctype属性（在浏览器中是document.doctype）来访问它的信息。

var doctype = document.doctype; //取得对<!DOCTYPE>的引用

浏览器对document.doctype的支持差别很大：

  • IE8及之前的版本：如果存在文档类型声明，会将其错误地解释为一个注释并把它当作Comment节点；而document.doctype的值始终为null。
  • IE9+及Firefox：如果存在文档类型什么，则将其作为文档的第一个子节点；document.doctype是一个DocumentType节点，也可以通过document.firstChild或document.childNodes[0]访问同一个节点。
  • Safari、Chrome和Opera：如果存在文档类型声明，则将其解析，但不作为文档的子节点。document.doctype是一个DocumentType节点，但该节点不会出现在document.childNodes中。

从技术上说，出现在<html>元素外部的注释应该算是文档的子节点。然而，不同的浏览器在是否解析这些注释以及能否正确处理它们等方面，也存在很大差异。

<!-- 第一条注释 -->
<html>
    <body>
    </body>
</html>
<!-- 第二条注释 -->

从逻辑上讲，我们会认为document.childNodes中应该包含3项，但是实际上存在差异。

  • IE8及之前版本、Safari3.1及更高版本、Opera和Chrome只为第一条注释创建节点，不为第二条注释创建节点。结果，第一条注释就会成为document.childNodes中的第一个子节点。
  • IE9及更高版本会将第一条注释创建为document.childNodes中的一个注释节点，也会将第二条注释创建为document.childNodes中的注释子节点。
  • Firefox以及Safari3.1之前的版本完全忽略这两条注释。

文档信息
document对象还有一些标准的Document对象所没有的属性。

title属性包含着<title>元素中的文本。

//取得文档标题
var originalTitle = document.title;

//设置文档标题
document.title = "New page title";

URL属性中包含页面完整的URL（即地址栏中显示的URL）。
domain属性中只包含页面的域名。
referrer属性中保存着链接到当前页面的那个页面的URL。在没有来源的情况下，referrer属性中可能会包含空字符串。

//取得完整的URL
var url = document.URL;

//取得域名
var domain = document.domain;

//取得来源页面的URL
var referrer = document.referrer;

在这3个属性中，只有domain是可以设置的，但也有安全方面的限制。

//假设页面来自p2p.wrox.com域

document.domain = "wrox.com"; //成功

document.domain = "nczo.net"; //出错

当页面中包含来自其他子域的框架或内嵌框架时，能够设置document.domain就非常方便了。由于跨域安全限制，来自不同子域的页面无法通过JavaScript通信。而通过将每个页面的document.domain设置为相同的值，这些页面就可以互相访问对方包含的JavaScript对象了。
浏览器对domain属性还有一个限制，即域名一开始是松散的，那么不能将它再设置为紧绷的。

//假设页面来自于p2p.wrox.com域

document.domain = "wrox.com"; //松散的，成功
document.domain = "p2p.wrox.com"; //紧绷的，出错

所有浏览器中都存在这一限制，但IE8是实现这一限制的最早IE版本。

查找元素
getElementById()，接受一个参数：要取得的元素的ID。如果找到则返回该元素，没找到则返回null。这里的ID必须与页面中元素的id特性（attribute）匹配，包括大小写。

<div id="myDiv">Some text</div>

var div = document.getElementById("myDiv"); //取得<div>元素的引用

var div = document.getElementById("mydiv"); //无效的ID （在IE7及更早的版本可以）

IE8及较低版本不区分ID的大小写。
如果页面中多个元素的ID相同，getElementById()只返回文档中第一个出现的元素。
IE7及较低版本还为此方法添加了一个怪癖：name特性与给定ID匹配的表单元素（<input><textarea><button><select>）也会被方法返回。

<input type="text" name="myElement" value="Text field">
<div id="myElement">A div</div>
<!-- document.getElementById("myElement")会返回<input>元素 -->

getElementByTagName()，接受一个参数，即要取得的元素的标签名，返回的是包含零或多个元素的NodeList。在HTML文档中，这个方法会返回一个HTMLCollection对象，作为一个“动态”集合，该对象与NodeList非常相似。

var images = document.getElementById("img");
alert(images.length); //输出图像的数量
alert(images[0].src); //输出第一个图像元素的src特性
alert(images.item(0).src); //输出第一个图像元素的src特性

HTMLCollection对象有一个方法namedItem()，通过元素的name特性取得集合中的项。

<img src="myimage.gif" name="myImage">

var myImage = images.namedItem("myImage");

HTMLCollection还支持按名称访问项：

var myImages = images["myImage"];

对于HTMLCollection，在后台对数值索引就会调用item()，而对于字符串索引就会调用namedItem()。

//取得文档中的所有元素
var allElements = document.getElementsByTagName("*");
//由于在IE将注释（comment）实现为元素（element），因此在IE中调用getElementByTagName("*")将会返回所有的注释节点。

getElementsByName()方法返回带有给定name特殊的所有元素。返回的也是一个HTMLCollection。

特殊集合

除了属性和方法，document对象还有一些特殊的集合。这些集合都是HTMLCollection对象。

  • document.anchors 包含文档中所有带name特性的<a>元素。
  • document.applets 包含文档中所有的<applet>元素。
  • document.forms 包含文档中所有的<form>元素，等于document.getElementsByTagName("form")
  • document.images 包含了文档中所有的<img>元素
  • document.links 包含了文档中所有的带href特性的<a>元素

上面集合始终可以通过HTMLDocument对象访问到，而且和HTMLCollection对象类似，集合中的项也会随着当前文档内容的更新而更新。

DOM 一致性检测
document.implementation属性提供了浏览器实现DOM的哪些部分的相应信息和功能的对象。
DOM1级只为document.implementation规定了一个方法hasFeature()。该方法接受两个参数：要检测的DOM功能的名称及版本号。支持的话就返回true。

var hasXmlDom = document.implementation.hasFeature("XML","1.0");
DOM功能.png

有时候返回true也不意味着一定和规范一致。

文档写入

write()和writeln()方法都接受一个字符串参数，即要写入到输出流中的文本。write()会原样写入，而writeln()会在字符串的末尾添加一个换行符(\n)。

<html>
<head>
    <title>document.write() Example</title>
</head>
<body>
    <p>The current date and time is :
    <script>
        document.write("<strong>" + (new Date()).toString() + "</strong>");
    </script>
    </p>
</body>
</html>

open()和close()分别用于打开和关闭网页的输入流。

Element类型

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

  • nodeType的值为1；
  • nodeName的值为元素的标签名；
  • nodeValue的值为null
  • parentNode可能是Document或Element;
  • 其子节点可能是Element、Text、Comment、ProcessingInstruction、CDATASection或EntityReference

要访问元素的标签名，可以使用nodeName或tagName（主要为了清晰起见）属性。

<div id="myDiv"></div>

var div = document.getElementById("myDiv");
alert(div.tagName); //"DIV"
alert(div.tagName == div.nodeName); //true

在HTML中，标签名始终是全部大写；而在XML中，标签名则始终会与源代码一样。

HTML元素

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 159,015评论 4赞 362
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,262评论 1赞 292
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,727评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,986评论 0赞 205
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,363评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,610评论 1赞 219
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,871评论 2赞 312
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,582评论 0赞 198
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,297评论 1赞 242
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2赞 246
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1赞 260
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,385评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,035评论 3赞 236
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0赞 195
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2赞 274
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2赞 270

推荐阅读更多精彩内容