你好，神奇的 JavaScript 开发者？

浏览器提供了一个称为文档对象模型 (DOM) 的编程接口，它允许脚本（特别是 JavaScript）与网页布局进行交互。网页的文档对象模型 (DOM) 是一种分层树状结构，它将页面的组件排列成对象，由浏览器在加载时创建。借助此范例，文档的样式、组织和内容都可以动态访问和更改。

使用 DOM 进行交互

JavaScript可以对文档对象模型（DOM）进行很多操作，包括：

• 修改HTML元素的内容
• 添加或删除元素和属性
• 响应点击或按键等用户事件
• 在页面内创建新事件

例子

您可以使用 JavaScript 来更改元素的内容，方法是使用 document.getElementById() 函数定位元素，然后更改元素的 innerHTML 属性：

// Modify an element's content, access it using its ID
document.getElementById("myElement").innerHTML = "New content";

DOM结构

文档对象位于 DOM 的基础上，它被组织为对象树。每个 HTML 元素都表示为树中的一个节点，这些节点能够具有相关的事件、方法和属性。通过提供导航和使用这些节点的方法，DOM 使脚本能够实时更改页面。

以下是典型 HTML 文档的 DOM 树的基本示例：

document
├── html
│ ├── head
│ │ └── title
│ └── body
│ ├── h1
│ └── p

DOM 在 Web 开发中的作用

出于多种原因，DOM 对于 Web 开发至关重要。

• 通过让脚本响应用户输入来更改页面的样式和内容，可以创建动态和交互式网页。
• 它通过为各种浏览器提供标准化接口来与在线页面交互和操作，从而确保跨平台的一致性。
• 单页应用程序 (SPA) 依赖 DOM 刷新页面而不需要重新加载，因此这对其操作至关重要。

DOM 级别和标准

万维网联盟 (W3C) 维护 DOM 标准，该标准保证了其在各种 Web 浏览器和系统中的可靠性和一致性。该标准分为各个部分和级别，包括：

• 所有文档类型的基础范例是 * Core DOM:.
• XML 文档模型称为 XML DOM.
• HTML DOM： 该模型是专门为 HTML 文件创建的。

每个 DOM 标准版本都添加了更多功能和功能，从而实现更复杂的在线文档操作和交互。

DOM 操作的真实世界插图

下面是如何使用 DOM 与 HTML 文档进行通信的真实示例：

Hello, World!
Change Header

在此示例中，单击按钮会调用changeHeader() 函数，该函数使用DOM 通过其ID 来访问

元素。然后它会更改文本内容和标题的颜色。

基本 DOM 技术

1. 查询选择

使用 document.querySelector() 精确地抓取元素。

说明： querySelector() 允许您使用 CSS 选择器选择元素，使其成为访问 DOM 元素的强大且灵活的方式。

例子

// Select the first element with class 'myClass'

const element = document.querySelector('.myClass');

// Select a specific element by ID
const header = document.querySelector('#header' );

// Select the first 
 inside a 

const paragraph = document.querySelector('div p');





  
  
  2. 动态内容


修改innerHTML或textContent以动态更新页面内容。 

说明：innerHTML 或 textContent 允许您动态更改元素的内容，从而实现交互式和响应式网页。


  
  
  例子




// Using innerHTML (can include HTML tags)

document.querySelector('#myDiv').innerHTML = 'New content!';

// Using textContent (plain text only, safer for user inputs)

document.querySelector('#myParagraph').textContent = 'Updated text content';





  
  
  3. 事件监听


将 addEventListener() 附加到元素以实现交互式用户体验。 

说明： addEventListener() 可让您响应用户操作，例如单击、按键或鼠标移动，从而创建交互式 Web 应用程序。


  
  
  例子




const button = document.querySelector('#myButton' );

button. addEventListener( 'click', function( ) {
     alert( 'Button clicked!')
});

// Using arrow function
document.addEventListener('keydown', (event) => {
     console. log( 'Key pressed:', event.key);
});





  
  
  4.DOM遍历


使用parentNode、children 和siblings 属性在DOM 树中导航。 

说明： DOM 遍历允许您在文档结构中移动，根据相关元素在 DOM 树中的位置访问相关元素。


  
  
  例子




const child = document.querySelector('#childElement');

// Access parent
const parent = child.parentNode;

// Access siblings
const nextSibling = child.nextElementSibling;
const prevSibling = child.previousElementSibling;

// Access children
const firstChild = parent.firstElementChild;
const allChildren = parent.children;





  
  
  结论


DOM 是 JavaScript 中的一个强大工具，使开发人员能够创建丰富的交互式 Web 体验。通过理解和利用 DOM，开发人员可以控制网页的行为和外观，使它们更具吸引力并响应用户交互。