在本文中，我们将讨论 文档对象模型（DOM） )以及用于操作文档的属性和方法，并通过示例了解它们的实现。

null

文档对象模型（DOM）是一个 编程接口 对于 HTML 和 XML （可扩展标记语言）文档。它定义了 逻辑结构 以及文件的存取和操作方式。

笔记：它被称为逻辑结构，因为DOM没有指定对象之间的任何关系。

DOM是一种以结构化分层方式表示网页的方法，这样程序员和用户就可以更轻松地浏览文档。有了DOM，我们可以使用Document对象提供的命令或方法轻松访问和操作标记、ID、类、属性或元素。

为什么需要DOM？

HTML用于结构网页和Javascript用于添加行为到我们的网页。当HTML文件加载到浏览器中时，javascript无法直接理解HTML文档。因此，创建了一个相应的文档（DOM）。 DOM基本上是同一个HTML文档的表示，但使用对象时格式不同 .Javascript很容易解释DOM，即Javascript无法理解HTML文档中的标记（

H

），但可以理解DOM中的对象h1。现在，Javascript可以使用不同的函数访问每个对象（h1、p等）。

DOM的结构 ：DOM可以被认为是一棵树或森林（不止一棵树）。术语 结构模型 有时用于描述文档的树状表示。DOM结构模型的一个重要特性是 结构同构 ：如果使用任意两个DOM实现来创建同一文档的表示，它们将创建具有完全相同的对象和关系的相同结构模型。

为什么称之为对象模型？ 文档是使用对象建模的，模型不仅包括文档的结构，还包括文档的行为，以及由HTML中具有属性的类似标记元素组成的对象。

DOM的性质 ：让我们看看document对象可以访问和修改的document对象的属性。

DOM的表示

窗口对象： 窗口对象始终位于层次结构的顶部。
文档对象： 当HTML文档加载到窗口中时，它将成为一个文档对象。
窗体对象： 它的代表是类型标签。
链接对象 : 它的代表是链接标签。
锚定对象 : 它的代表是 a href 标签。
表单控制元素： ：表单可以有许多控制元素，如文本字段、按钮、单选按钮和复选框等。

文档对象的方法 :

写 （“字符串”）： 在文档上写入给定的字符串。
getElementById（） : 返回具有给定id值的元素。
getElementsByName（） : 返回具有给定名称值的所有元素。
getElementsByTagName（）： 返回具有给定标记名的所有元素。
GetElementsByCassName（） : 返回具有给定类名的所有元素。

例子： 在本例中，我们使用HTML元素id来查找DOM HTML元素。

HTML

                         <!DOCTYPE html>                       
                         <                                     html                                     >                       
           
                         <                                     body                                     >                       
                                                 <                                     h2                                     >GeeksforGeeks</                                     h2                                     >                       
                                   
                                                 <!-- Finding the HTML Elements by their Id in DOM -->                       
                                                 <                                     p                                     id                                     =                                     "intro"                                     >A Computer Science portal for geeks.</                                     p                                     >                       
           
                                   
                         <                                     p                                     >This example illustrates the <                                     b                                     >getElementsById</                                     b                                     > method.</                                     p                                     >                       
           
                                                 <                                     p                                     id                                     =                                     "demo"                                     ></                                     p                                     >                       
           
                                                 <                                     script                                     >                       
                                                 const element = document.getElementById("intro");                       
                                                 document.getElementById("demo").innerHTML =                       
                                                 "GeeksforGeeks introduction is: " + element.innerHTML;                       
                                                 </                                     script                                     >                       
                         </                                     body                                     >                       
           
                         </                                     html                                     >                       

输出：

通过getElementById（）方法获取HTML元素

实例：此示例描述树结构中HTML元素的表示。

html

                           <                                        table                                        >                         
                                                     <                                        ROWS                                        >                         
                                                     <                                        tr                                        >                         
                                                     <                                        td                                        >Car</                                        td                                        >                         
                                                     <                                        td                                        >Scooter</                                        td                                        >                         
                                                     </                                        tr                                        >                         
                                                     <                                        tr                                        >                         
                                                     <                                        td                                        >MotorBike</                                        td                                        >                         
                                                     <                                        td                                        >Bus</                                        td                                        >                         
                                                     </                                        tr                                        >                         
                                                     </                                        ROWS                                        >                         
                           </                                        table                                        >                         

树状结构中的HTML元素

DOM不是什么？

文档对象模型不是 二进制描述 它在接口中不定义任何二进制源代码。
文档对象模型不用于描述 XML或HTML格式的对象 而DOM将XML和HTML文档描述为对象。
文档对象模型不是由 数据结构集 ; 它是一个指定对象表示的接口。
文档对象模型不显示 物体的临界性 在文档中，即它没有关于文档中哪个对象适合上下文，哪个不适合上下文的信息。

DOM的级别 :

0级： 提供一组低级接口。
1级： DOM级别1可分为两部分：果心和 HTML .
- 果心提供可用于表示任何结构化文档的低级接口。
- HTML 提供可用于表示HTML文档的高级接口。
2级： 由六种规格组成： 核心2 , 意见 , 事件 , 风格 , 穿越和范围 .
- 核心2 ：扩展DOM级别1指定的核心功能。
- 意见：视图允许程序动态访问和操作文档内容。
- 事件：事件是当用户对网页做出反应时由浏览器执行的脚本。
- 风格：允许程序动态访问和操作样式表的内容。
- 穿越：这允许程序动态遍历文档。
- 范围：这允许程序动态识别文档中的一系列内容。
3级： 由五种不同的规格组成： 核心3 , 加载并保存 , 验证 , 事件和 XPATH .
- 核心3 ：扩展DOM级别2指定的核心功能。
- 加载并保存 ：这允许程序将XML文档的内容动态加载到DOM文档中，并通过序列化将DOM文档保存到XML文档中。
- 验证：这允许程序动态更新文档的内容和结构，同时确保文档保持有效。
- 事件：扩展DOM级别2指定的事件的功能。
- XPATH ：XPATH是一种可用于访问DOM树的路径语言。

例子： 这个例子说明了使用 getElementById（） 方法

HTML

                         <!DOCTYPE html>                       
                         <                                     html                                     >                       
           
                         <                                     head                                     >                       
                                                 <                                     title                                     >DOM manipulation</                                     title                                     >                       
                         </                                     head                                     >                       
           
                         <                                     body                                     >                       
                                                 <                                     label                                     >Enter Value 1: </                                     label                                     >                       
                                                 <                                     input                                     type                                     =                                     "text"                                     id                                     =                                     "val1"                                     />                       
                                                 <                                     br                                     />                       
                                                 <                                     br                                     />                       
                                                 <                                     label                                     >Enter Value 2: </                                     label                                     >                       
                                                 <                                     input                                     type                                     =                                     ".text"                                     id                                     =                                     "val2"                                     />                       
                                                 <                                     br                                     />                       
                                                 <                                     button                                     onclick                                     =                                     "getAdd()"                                     >Click To Add</                                     button                                     >                       
                                                 <                                     p                                     id                                     =                                     "result"                                     ></                                     p                                     >                       
           
                                   
                                                 <                                     script                                     type                                     =                                     "text/javascript"                                     >                       
                                                 function getAdd() {                       
                                   
                                                 // Fetch the value of input with id val1                       
                                                 const num1 = Number(document.getElementById("val1").value);                       
                                   
                                                 // Fetch the value of input with id val2                       
                                                 const num2 = Number(document.getElementById("val2").value);                       
                                                 const add = num1 + num2;                       
                                                 console.log(add);                       
                                   
                                                 // Displays the result in paragraph using dom                       
                                                 document.getElementById("result").innerHTML = "Addition : " + add;                       
                                   
                                                 // Changes the color of paragraph tag with red                       
                                                 document.getElementById("result").style.color = "red";                       
                                                 }                       
                                                 </                                     script                                     >                       
                         </                                     body                                     >                       
           
                         </                                     html                                     >                       