JavaScript中dom是指什么

发布时间：2021-11-03 14:07:09 作者：iii
来源：亿速云阅读：186

# JavaScript中DOM是指什么

## 一、DOM的基本概念

DOM（Document Object Model，文档对象模型）是JavaScript与网页交互的核心接口。它是由W3C制定的标准编程接口，通过将HTML或XML文档解析为树状结构，使开发者能够用编程语言动态访问和修改文档内容、结构及样式。

### 1.1 DOM的本质
DOM不是JavaScript语言的一部分，而是独立于语言的跨平台API。浏览器将HTML文档解析为：
- **节点树**：文档中的元素、属性、文本等都是树的节点
- **对象模型**：每个节点被转化为JavaScript可操作的对象

### 1.2 标准演进
- DOM Level 1 (1998)：基础节点操作
- DOM Level 2 (2000)：添加事件模型
- DOM Level 3 (2004)：扩展XML支持
- DOM Living Standard：现代持续更新的标准

## 二、DOM树结构详解

### 2.1 节点类型
| 节点类型            | nodeType值 | 说明                  |
|---------------------|------------|-----------------------|
| Element             | 1          | HTML元素节点          |
| Attr                | 2          | 元素属性节点          |
| Text                | 3          | 文本节点              |
| Document            | 9          | 文档根节点            |
| DocumentFragment    | 11         | 文档片段节点          |

### 2.2 典型DOM树示例
```html
<!DOCTYPE html>
<html>
  <head>
    <title>示例</title>
  </head>
  <body>
    <h1>DOM解析</h1>
    <p>这是一个<em>演示</em>文本</p>
  </body>
</html>

对应的DOM树结构：

document
├─ html
   ├─ head
   │   └─ title
   │       └─ "示例"
   └─ body
       ├─ h1
       │   └─ "DOM解析"
       └─ p
           ├─ "这是一个"
           ├─ em
           │   └─ "演示"
           └─ "文本"

三、DOM操作核心API

3.1 节点查询

// 经典方法
document.getElementById('app')
document.getElementsByClassName('item')
document.querySelector('#container .item')

// 现代方法（返回NodeList）
document.querySelectorAll('div.highlight')

3.2 节点操作

// 创建节点
const newDiv = document.createElement('div')
const textNode = document.createTextNode('Hello')

// 添加节点
parent.appendChild(newDiv)
element.insertBefore(newNode, referenceNode)

// 删除节点
parent.removeChild(childNode)

3.3 属性与样式

// 属性操作
img.setAttribute('alt', '描述文字')
const value = input.getAttribute('value')

// class操作
div.classList.add('active')
div.classList.toggle('hidden')

// 样式操作
element.style.backgroundColor = 'red'

四、DOM事件机制

4.1 事件流三个阶段

捕获阶段：从window向下传播到目标元素
目标阶段：到达事件目标
冒泡阶段：从目标元素向上冒泡

4.2 事件绑定方式

// DOM0级
btn.onclick = function() { console.log('Clicked') }

// DOM2级
btn.addEventListener('click', handler, {
  capture: false,  // 是否捕获阶段触发
  once: true       // 只执行一次
})

// 事件委托示例
document.getElementById('list').addEventListener('click', function(e) {
  if(e.target.tagName === 'LI') {
    console.log('点击了列表项')
  }
})

五、性能优化实践

5.1 减少DOM操作

// 低效做法
for(let i=0; i<100; i++) {
  document.body.appendChild(document.createElement('div'))
}

// 高效做法（使用文档片段）
const fragment = document.createDocumentFragment()
for(let i=0; i<100; i++) {
  fragment.appendChild(document.createElement('div'))
}
document.body.appendChild(fragment)

5.2 批量样式修改

// 避免多次重排
element.style.display = 'none'
// 批量修改...
element.style.display = 'block'

// 使用class
element.classList.add('hidden')

六、现代DOM API发展

6.1 MutationObserver

监听DOM变化的现代API：

const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    console.log('DOM发生了变化', mutation)
  })
})

observer.observe(document.getElementById('app'), {
  attributes: true,
  childList: true,
  subtree: true
})

6.2 IntersectionObserver

高效检测元素可见性：

const io = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if(entry.isIntersecting) {
      console.log('元素进入视口')
    }
  })
})

io.observe(document.querySelector('.lazy-load'))

七、总结

DOM作为浏览器环境的核心API，具有以下关键特点： 1. 平台无关的标准化接口 2. 树形结构表示文档 3. 提供完整的CRUD操作能力 4. 包含完善的事件传播机制 5. 现代API持续增强性能

理解DOM的工作机制，是成为优秀前端开发者的必备基础。随着Web Components等新技术的发展，DOM操作正在向更声明式、组件化的方向演进，但其核心地位仍不可动摇。 “`

（注：实际字数为约1050字，可根据需要增减具体示例或扩展某些章节内容）