DOM（文档对象模型）

在这篇文章中，我们将讨论文档对象模型（DOM）及其用于操作文档的属性和方法。
简介：
文档对象模型 (DOM) 是HTML和XML （可扩展标记语言）文档的编程接口。它定义了文档的逻辑结构以及访问和操作文档的方式。
注意：它被称为逻辑结构，因为 DOM 没有指定对象之间的任何关系。
DOM 是一种以结构化的分层方式表示网页的方式，这样程序员和用户可以更轻松地浏览文档。借助 DOM，我们可以使用 Document 对象提供的命令或方法轻松访问和操作标签、ID、类、属性或元素。
DOM 的结构：
DOM 可以被认为是一棵树或森林（不止一棵树）。术语结构模型有时用于描述文档的树状表示。 DOM 结构模型的一个重要特性是结构同构：如果使用任何两个 DOM 实现来创建同一文档的表示，它们将创建相同的结构模型，具有完全相同的对象和关系。
为什么称为对象模型？
文档使用对象建模，模型不仅包括文档的结构，还包括文档的行为以及文档的对象，这些对象由具有 HTML 属性的类似标签元素组成。
DOM 的属性：
我们来看看文档对象可以访问和修改的文档对象的属性。

1. 窗口对象：窗口对象始终位于层次结构的顶部。
2. 文档对象：当一个 HTML 文档被加载到一个窗口中时，它就变成了一个文档对象。
3. 表单对象：由表单标签表示。
4. 链接对象：由链接标签表示。
5. 锚点对象：它由一个 href标签表示。
6. 表单控件元素：表单可以有许多控件元素，例如文本字段、按钮、单选按钮和复选框等。

文档对象的方法：

1. write(“字符串”)：将给定的字符串写入文档。
2. getElementById()：返回具有给定 id 值的元素。
3. getElementsByName()：返回具有给定名称值的所有元素。
4. getElementsByTagName()：返回具有给定标签名称的所有元素。
5. getElementsByClassName()：返回具有给定类名的所有元素。

示例：

html

   
      
         
         
      
      
         
         
      
   
Car
Scooter
MotorBike
Bus

什么 DOM不是？

1. 文档对象模型不是二进制描述，它没有在其接口中定义任何二进制源代码。
2. 文档对象模型不用于描述XML或HTML中的对象，而 DOM 将 XML 和 HTML 文档描述为对象。
3. 文档对象模型不是由一组数据结构表示的；它是一个指定对象表示的接口。
4. 文档对象模型没有显示在文档对象的重要程度，即它不具有哪些对象的文档中是合适的背景和这不是信息。

DOM 的级别：

1. 级别 0：提供一组低级别的接口。
2. 级别 1： DOM 级别 1 可以分为两部分： CORE和HTML 。
   • CORE提供可用于表示任何结构化文档的低级接口。
   • HTML提供了可用于表示 HTML 文档的高级接口。
3. 2级：由六个规格：CORE2，浏览，事件，风格，遍历和范围。
   • CORE2 ：扩展由 DOM 级别 1 指定的 CORE 的功能。
   • VIEWS ：视图允许程序动态访问和操作文档的内容。
   • 事件：事件是当用户对网页做出反应时由浏览器执行的脚本。
   • STYLE ：允许程序动态访问和操作样式表的内容。
   • TRAVERSAL ：允许程序动态遍历文档。
   • RANGE ：允许程序动态识别文档中的内容范围。
4. 级别 3：由五个不同的规范组成： CORE3 、 LOAD 和 SAVE 、 VALIDATION 、 EVENTS和XPATH 。
   • CORE3 ：扩展由 DOM 级别 2 指定的 CORE 的功能。
   • LOAD 和 SAVE ：允许程序将 XML 文档的内容动态加载到 DOM 文档中，并通过序列化将 DOM 文档保存到 XML 文档中。
   • VALIDATION ：允许程序动态更新文档的内容和结构，同时确保文档保持有效。
   • EVENTS ：扩展 DOM Level 2 指定的 Events 的功能。
   • XPATH ：XPATH 是一种可用于访问 DOM 树的路径语言。

dom操作示例：

HTML

  
    DOM manipulation
  
  
   Enter Value 1 
    
    
    Enter Value 2
    
    
    Click To Add
    
    
 
 
    
    
      function getAdd()
{
  //it will fetch the value of input with id val1
  const num1=Number(document.getElementById('val1').value);
   
  //It will fetch the value of input with id val2
  const num2=Number(document.getElementById('val2').value);
   
  //addition
  const add=num1+num2;
   
  console.log(add);
   
  //displaying the result in paragraph using dom
  document.getElementById('result').innerHTML="Addition : "+add;
   
  //it will change the color of paragraph with red
  document.getElementById('result').style.color='red';
}
    
  

输出：

参考：

1. https://codescracker.com/js/js-dom-levels.htm
2. https://www.w3.org/TR/DOM-Level-3-Core/introduction.html

HTML 是网页的基础，用于通过构建网站和 Web 应用程序进行网页开发。您可以按照此 HTML 教程和 HTML 示例从头开始学习 HTML。