<javascript>的DOM对象

秒速五厘米 2022-06-10 08:56 204阅读 0赞

DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。

html文件加载到内存之后会形成一颗dom树，根据这些节点对象可以进行脚本代码的动态修改  
在dom树当中 一切皆为节点对象  
![dom树][dom]  
这段代码可以用 DOM 绘制成一个节点层次图：  
DOM 节点层次图  
![dom树][dom 1]  
DOM 通过创建树来表示文档，从而使开发者对文档的内容和结构具有空前的控制力。  
W3C DOM 标准被分为 3 个不同的部分：

*  核心 DOM - 针对任何结构化文档的标准模型
 *  XML DOM - 针对 XML 文档的标准模型
 *  HTML DOM - 针对 HTML 文档的标准模型

XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。

*  HTML 的标准对象模型
 *  HTML 的标准编程接口
 *  W3C 标准

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。  
![HTML-DOM树][HTML-DOM]

*XML DOM与HTML DOM的关系*

XML DOM 定义了访问和处理 XML 文档的标准方法 
    HTML文档格式 符合XML语法标准，所以可以使用XML DOM API
    在XML DOM每个元素 都会被解析为一个节点Node，而常用的节点类型又分为
    元素节点  Element
    属性节点  Attr
    文本节点  Text
    文档节点  Document
    HTML DOM 定义了针对 HTML文档的对象，可以说是一套 更加适用于 JavaScript 技术开发 的API
    HTML DOM是对XML DOM的扩展
    进行 JavaScript DOM开发 可以同时使用 XML DOM和 HTML DOM

常用方法

getElementById() 方法
    getElementById() 方法返回带有指定 ID 的元素    
    
    getElementsByTagName() 方法
    getElementsByTagName() 返回带有指定标签名的所有元素。
    
    getElementsByName() 方法
    getElementByName() 返回带有指定name的所有元素。
    
    innerHTML属性
    获取元素内容的最简单方法是使用 innerHTML 属性。
    innerHTML 属性对于获取或替换 HTML 元素的内容很有用。

[dom]: /images/20220610/4dfe14f8724d4f7f95abf8c974a50e2f.png
[dom 1]: /images/20220610/24bd7006f043467d847107a7efea89a7.png
[HTML-DOM]: /images/20220610/d399b4cd63794913978668bda7d86d92.png