本文详细介绍了DOM中的Node和Document类型，包括节点类型判断、节点关系、节点操作等，并讲解了Document类型的特性，如文档子节点、文档信息、元素查找等。
10.1.1 Node类型 205
Node接口，由DOM中所有节点类型实现。除了IE之外可以直接在浏览器中访问到这个类型。拥有nodeType属性，可以判断节点类型。在Node中有常量可以判断，IE只能通过数字来判断。
1、nodeName 和 nodeValue属性 206
对于元素类型的判断==1代表元素节点 在非IE中可以通过Node.ELEMENT_NODE来判断。
元素节点类型nodeName为标签名，nodeValue===null
2、节点关系 206
在节点的父子关系可以通过parentNode和childNodes的属性来获得。其中childNode属性为一个NodeList对象，类似Array，其特点是其中对象为动态，Dom结构变化自动反应在NodeList对象中。
小说明：想转化为数组可以使用 方法
非ie中
var arrayOfNodes=Array.prototype.silce.call(someNode.childNodes,0);转化为数组
ie中只能通过遍历，可以写一个方法，通过try catch机制来判断该方法是否会报错，然后来进行数组转换。
previousSibling和nextSibling可以获取上一个和下一个同胞节点，如果为fist或者last节点时，会报Null
父节点的firstChild和lastChild可以获取子节点的第一个元素和最后一个元素。
hasChildNodes()能够判断是否含有子节点。
3、操作节点 208
appendChild()可以操作节点关系指针，举个例子
ul1.appendChild(lis[0]); 运行后，lis[0]的节点指向改变为ul1的子节点的lastChild,且原来的节点不保留(移动)。 return a
insertBefore(a,b)接受两个参数a为新的节点，b为节点位置，运行后a节点成为b节点的previousSibling ,如果b==null则，a为父节点的lastChild ,return a
replaceChild()进行节点替换，删除被替换的节点
var returnedNode = someNode.replaceChild(newNode,someNode.firstChild); 返回的为被删除的节点
移除节点在dom中的位置指针使用removeChild();函数
var formerFirstChild=someNode.removeChild(someNode.firstChild); 返回被移除节点
以上方法需要实现获取parentNode，如果没有子节点的元素调用以上方方法会报错
4、其他方法 209
cloneNode()可以进行节点复制
var deepList=myList.cloneNode(true);复制myList节点及整个子节点树 false为只复制当前节点。
注意：cloneNode()不进行dom节点中的JavaScript属性，如事件处理，只复制其特性。但是在ie中会进行事件处理程序的复制。建议在复制前先移除事件处理程序。
10.1.2 Document类型 210
Document表示文档，在浏览器中其对象为HTMLDocument(继承自Document)的一个实例表示了整个html页面，是window对象的一个属性，可以直接访问到。
特点：
nodeTyoe=9
nodeName="#document"
nodeValue=null
parentNode=null
子节点可为 DocumentType/Element/ProcessingInstruction（xml中
对象可表示处理指令） or Comment（代表XML注释）
1、文档的子节点 210
document.documentElement属性，指向html页面的<html>元素
document.documentElement==document.childNodes[0]==document.firstChild
//true
document.body 指向<body>元素
document.doctype 指向<!DOCTYPE>标签。各个浏览器对该属性的支持差别很大，需要个别测试并判断结果(各个版本都不同，随时可能会进行改变)：
1ie中，文档类型声明被解释为一个注释，作为comment节点，其document.doctype return null;
2FireFox:文档类型声明作为第一个节点，document.firstChild和document.childNodes[0]也可以获取到。
3Safari、Chrome和Opera:文档类型声明进行解析，不作为文档子节点不会出现在document.childNodes中，只能通过document.doctype获取到
在对于注释的处理中，在docment.childNodes的判断中，各个浏览器也不相同，按照实际情况进行处理即可。
2、文档信息 211
因为集成HTMLDocument的关系，所以可以获取部分网页信息
document.title获取网页标题栏
document.title="New page title" 设置文档标题 不会改变<title>标签中的内容
var url=document.URL;获取页面完成的URL,地址；栏中的信息
var domain=document.domain;页面域名
var referrer=document.referrer;获取链接到道歉页面的页面URL ，可能为空
其中domain属性可以修改，其他两个都不可以修改，修改主要在使用内嵌框架是，如果分别加载自 p2p.wrox.com 和
www.wrox.com
可以统一将domain属性修改为一样，如wrox.com。但是在设置为wrox.com后，不能再设置为www.wrox.com，即，松散的无法设置为紧绷的，否则将报错。
document.domain="wrox.com";
document.domain="p2p.wrox.com"报错
3、查找元素 213
Document类型为查找dom元素类型提供了两种方法getElementById()和getElementsByTagName()
getElementById()接受一个参数，元素的ID,如果不存在相应ID的元素，则返回null。（严格区分大小写，虽然部分浏览器也可以使用）
如果有多个元素的id值相同，则获取后，只返回第一个元素的id值。 在ie7及更早版本中可以通过该方式获取name元素匹配的表单元素（input textarea button select），且如果id与name有元素相同，也只返回第一个。在设置name于id时，尽量做到不重复。
getElementsByTagName()同样接受一个参数，即要获取的元素的标签名，返回的为HTMLCollection，该对象与NodeList非常相似（childNodes）同样可以通过item()和直接[]来获取其中的项。
HTMLCollection有一个方法，namedItem()，可以通过元素的name特性取得集合中的项。
<img name="myImage" src="myimage.gif"/>
获取该元素可以通过
var myImage=document.getElementsByTagName("img").namedItem("myImage");
支持直接通过按名称访问
var myImage=document.getElementsByTagName("img")["myImage"];
在getElementsByTagName()中传入"*"表示获取全部元素，根据html页面的顺序排列，另：在ie中将会将注释节点也放在其中（将注释Comment实现为元素Element的原因）。
ps:虽然标注规定了，标签名要区分大小写，但是在HTML页面中document.getElementsByTagName()不需要区分大小写，但是在XML页面中需要区分。
只有在HTMLDocument类型中才有的元素，getElementsByName()，返回带有给定name特性的元素。其返回的类型也是HTMLCollection类型的集合（等同getElementsByTagName()方法的返回），但是其namedItem()方法只返回第一个元素。
4、特殊集合 214
docuemnt包含的特殊对象，返回都为HTMLColllection对象，主要用来访问常用部分：
document.anchors 返回name特性匹配的M<a>标签
document.applets 返回文档的所有applet元素
document.forms 返回文档中所有的form元素，与document.getElementsByTagName("form")返回结果相同
document.images 返回img元素，与document.getElementsByTagName("img")返回结果相同
document.links 返回带有href特性的a元素
上述特殊对象，也可伊尔直接通过HTMLDocument对象访问到。
5、DOM一致性检测
Dom分为多个部分，在使用时可以检测浏览器实现了DOMd的哪些部分。可以使用document.implementation属性，获取相应的信息和功能对象。
DOM1级中规定了一个方法：document.implementation.hasFeature()传入两个参数：名称与版本号。如果浏览器和版本的功能正确，则该方法返回true
var hasXmlDom=document.implementation.hasFeature("XML","1.0");
可以检测的值及版本号表在 215
该检测方式并不完全准确，带有部分欺骗性，在检测hasFeature()同时需要进行能力检测。
6、文档写入
document.write() 与 document.writeln();
ps:部分敏感的标签在拼接需要注意，如：document.write("<script></scr"+"ipt>"); 这样分开后，</script>就不会因为解析被提前结束节点了。
如果document.write()写到window.onload中，那么在页面完全加载后执行函数，函数执行后，整个页面会被重写。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
