DOM1级十二数值常量 Document 节点类型详解

最新推荐文章于 2023-08-04 08:40:02 发布

nuochen2615

最新推荐文章于 2023-08-04 08:40:02 发布

阅读量431

点赞数

分类专栏： web前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_39862865/article/details/114522478

版权

本文详细介绍了JavaScript中的Document节点，它是HTML页面的表示，具有nodeType为9的常量值。Document对象提供了如documentElement、body、getElementsByTagName等属性和方法来操作HTML页面，包括获取元素、文档信息和特殊集合。同时，文章讨论了不同浏览器对Document节点处理的差异，以及DOM一致性检测的方法。

摘要由CSDN通过智能技术生成

Ⅰ 基本概念

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

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

Document 节点具有如下特征

nodeType 的常量值为 9

nodeName 的值为 "#document"

nodeValue 的值为 null

parentNode 的值为 null

ownerDocument 的值为 null

其子节点可以是 DocumentType、Element、ProcessingInstruction 或 Comment

Ⅱ Document 类型子节点

虽然 DOM 标准规定 Document 节点的子节点可以是 DocumentType、Element、ProcessingInstruction 或 Comment，但还有两个内置的访问其子节点的快捷方式

第一个是 documentElement 属性，该属性始终指向HTML页面中的<html>元素

第二个是通过 childNodes 列表访问文档元素，但通过 documentElement 属性则能更快捷、更直接地访问该元素

如下页面在经过浏览器解析后，其文档中只包含一个子节点，即 <html> 元素，可通过 documentElement 或 childNodes 列表来访问这个元素

<html lang="en">
    <body>
        
    </body>
</html>
<script>
    var html = document.documentElement
    var child = document.childNodes[0]
    var first = document.firstChild

    console.log(html)
    console.log(child)
    console.log(first)
    
    console.log(html === first)
    console.log(html === child)
    console.log(first === child)
    
</script>

如下结果表明 documentElement、firstChild 和 childNodes[0] 的返回值相同，均指向 <html> 元素

document对象还有一个body 属性，直接指向 <body> 元素，其用法如下

<html lang="en">
    <body>

    </body>
</html>
<script>
    var html = document.documentElement
    var body = document.body

    console.log(html)
    console.log(body)

</script>

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