【前端 11】初探DOM

JavaScript 对象 - DOM 初探

在Web开发中，DOM（Document Object Model，文档对象模型）是一个至关重要的概念。它不仅仅是一个API，更是Web页面与JavaScript代码之间的桥梁，允许开发者通过编程的方式动态地访问和更新网页的内容、结构和样式。下面，我们将深入探讨DOM的各个方面，包括如何获取DOM元素、操作DOM元素以及通过DOM实现交互。
请添加图片描述

DOM 的基本概念

DOM将HTML或XML文档抽象为一个由节点（Nodes）和对象（Objects）组成的结构。每个节点都是文档树中的一个部分，而对象则提供了对这些节点的操作接口。主要的节点类型包括：

Document：整个文档对象，代表整个HTML文档。
Element：元素对象，如<div>、<p>等HTML标签。
Attribute：属性对象，如元素的id、class等。
Text：文本对象，表示元素中的文本内容。
Comment：注释对象，表示HTML中的注释内容。

获取DOM元素

在JavaScript中，可以通过多种方式来获取DOM中的元素。最常见的方法是通过document对象提供的API：

document.getElementById(id)：通过元素的id属性获取单个元素对象。由于id在页面中是唯一的，因此这个方法只会返回一个元素。
```
javascript复制代码var elem = document.getElementById('myElement');
```

document.getElementsByTagName(tagName)：根据标签名获取一个元素集合（HTMLCollection）。返回的是所有指定标签名的元素数组。

var elems = document.getElementsByTagName('p');  
// 遍历所有<p>元素  
for (var i = 0; i < elems.length; i++) {  console.log(elems[i].textContent);  
}

document.getElementsByName(name)：根据元素的name属性获取元素集合。这个方法常用于获取表单元素。

document.getElementsByClassName(className)：根据元素的class属性值获取元素集合。由于一个元素可以有多个类，这个方法非常有用。

var elems = document.getElementsByClassName('myClass');  
// 遍历所有具有'myClass'类的元素  
for (var i = 0; i < elems.length; i++) {  console.log(elems[i].textContent);  
}

操作DOM元素

获取到DOM元素后，我们可以对这些元素进行各种操作，如更改其内容、样式或属性。

更改HTML内容：使用innerHTML属性可以获取或设置元素内部的HTML内容。
```
javascript复制代码elem.innerHTML = '<strong>新的内容</strong>';
```
更改CSS样式：可以通过修改元素的style属性来更改其CSS样式。
```
elem.style.color = 'red';  
elem.style.fontSize = '20px';
```

操作标签属性：除了上述的innerHTML和style，还可以直接访问和修改元素的其他属性，如src（用于图片、视频等媒体文件）、checked（用于复选框等表单元素）。

// 更改图片路径  
var img = document.getElementById('myImage');  
img.src = 'new-image-path.jpg';  // 更改复选框的选中状态  
var checkbox = document.getElementById('myCheckbox');  
checkbox.checked = true;

DOM 事件处理

DOM事件是用户与网页交互的基础。通过监听和响应DOM事件，可以创建动态和交互式的Web应用程序。JavaScript提供了addEventListener方法来为元素添加事件监听器。

elem.addEventListener('click', function() {  alert('元素被点击了！');  
});

这个示例展示了如何为元素添加一个点击事件的监听器，当元素被点击时，会弹出一个警告框。

总结

DOM是Web开发中不可或缺的一部分，它使得JavaScript能够操作HTML文档的结构、内容和样式。通过理解DOM的基本概念、学习如何获取和操作DOM元素，以及掌握DOM事件处理，你可以创建出更加丰富和交互式的Web应用程序。希望这篇文章能够帮助你更深入地理解DOM，并在你的开发实践中发挥它的巨大潜力。