十年专注于品牌网站建设 十余年专注于网站建设_小程序开发_APP开发,低调、敢创新、有情怀!
南昌百恒网络微信公众号 扫一扫关注
小程序
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络微信小程序

百恒网络

南昌百恒网络

文档的子节点读取方法document.firstChild

百恒网络 2013-09-26 6104

JavaScript通过Document类型表示文档。在浏览器中,docLunent对象是HTMLDocument(继承自Document类型)的一个实例,表示整个HTML页面。而且,document对象是window对象的一个属性,因此可以将其作为全局对象来访问。Document节点具有下列特征:

⊙nodeType的值为9;

⊙nodeName的值为"#document";

⊙nodeValue的值为null;

⊙parentNode的值为null;

⊙其子节点可能是一个DocumentType(最多一个)、Element(最多一个)、ProcessingInstruction或Comment,

Document类型可以表示HTML页面或者其他基于XML的文档。不过,最常见的应用还是作为HTMLDocument实例的document对象。通过这个文档对象,不仅可以取得与页面有关的信息,而且还能操作页面的外观及其底层结构。

南昌网站设计公司技术员提醒大家,除了IE之外,可以在任何浏览器中通过脚本访问Document类型的构造函数和原型.但在所有浏览器中都可以访问HTMLDocument类型的构造函数和原型,包括IE8及后续版本.

文档的子节点

虽然DOM标准规定Document节点的子节点可以是DocumentType、Element、Processinglnstruction或conrrnent,但还有两个内置的访问其子节点的快捷方式。第一个就是documentElement属性,该属性始终指向HTML页面中的元素。另一个就是通过childNodes列表访问文档元素,但通过documentElement属性则能更快捷、更直接地访问该元素。以下面这个简单的页面为例:

(/body>

这个页面在经过浏览器解析后,其文档中只包含一个子节点,即元素。可以通过documentElement或childNodes列表来访问这个元素,如下所示:

var html=document.documentElement; //取得对的引用

alert (html===document. childNodes[O]); //true

alert (html===document. firstChild); //true这个例子说明,documentElement、firstChild和childNodes[o]的1直相同,都指向元素。

作为HTMLDocument的实例,document对象还有一个body属性,直接指向元素。因为开发人员经常要使用这个元素,所以document.body在JavaScript代码中出现的频率非常高,其用法如下:

var body=docurnent.body; //取得对的引用

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

Document另一个可能的子节点是DocumentType。通常将标签看成一个与文档其他部分不同的实体,可以通过doctype属性(在浏览器中是document.doc type)来访问它的信息:

var doctype=document .doctype; //取得对的引用浏览器对docuInent.doc type的支持差别很大,可以给出如下总结①。

⊙IE:如果存在文档类型声明,会将其错误地解释为一个注释并把它当作Cornment节点;而

document.doctype的值始终为null。

⊙Firefox:如果存在文档类型声明,则将其作为文档的第一个子节点;document.doctype是一个DocumentType节点,也可以通过document,firstChild或document.childNodes[0]访 问同一个节点。

⊙Safari. Chrome和Opera:如果存在文档类型声明,则将其解析,但不作为文档的子节点。document.doctype是一个DocumentType节点,但该节点不会出现在doclunent.childNodes中。

由于浏览器对document.doctype的支持不一致,因此这个属性的用处很有限。从技术上说,出现在元素外部的注释应该算是文档的子节点。然而,不同的浏览器在是否解析这些注释以及能否正确处理它们等方面,也存在很大差异。以下面简单的HTML页面为例:

看起来这个页面应该有3个子节点:注释、元素、注释。从逻辑上讲,我们会认为document.childNodes中应该包含与这3个节点对应的3项。但是,现实中的浏览器在处理位于外部的注释方面存在如下差异。

⊙IE、Safari 3.1及更高版本、Opera和Chrome只为第一条注释创建节点,不为第二条注释创建节点。结果,第一条注释就会成为document.childNodes中的第一个子节点。

⊙Firefox以及Safari 3.1之前的版本会完全忽略这两条注释。

同样,浏览器间的这种不一致性也导致了位于元素外部的注释没有什么用处。

多数情况下,我们都用不着在document对象上调用appendChild()、removeChild()和replaceChild()方法,因为文档类型(如果存在的话)是只读的,而且它只能有一个元素子节点(该节点通常早就已经存在了)。

本文仅限内部技术人员学习交流,不得作于其他商业用途.原创文章出自:南昌网站建设公司-百恒网络 http://www.jxbh.cn 如转载请注明出处!

400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络小程序

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
售后服务 售后服务
 
备案专线 备案专线
 
×