【乔二参】JavaScript HTML DOM详解

最新推荐文章于 2024-10-18 17:51:23 发布

乔二参

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量761

点赞数 20

分类专栏： javascript 文章标签： javascript html 开发语言

本文链接：https://blog.csdn.net/2302_79483741/article/details/140120068

版权

javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

https://gitee.com/qercan/software-sharing

非常感谢您的支持！您的点赞、关注和评论是我创作的动力。我会继续努力，提供高质量内容，如有任何建议，请随时与我联系。

JavaScript HTML DOM（文档对象模型）

定义

JavaScript HTML DOM（Document Object Model）是JavaScript与HTML之间的接口。它提供了一种方式来让JavaScript能够访问和操作HTML文档的内容、结构和样式。DOM将HTML文档表示为一个由多个节点（如元素节点、属性节点、文本节点等）组成的树状结构，每个节点都代表文档的一部分。

用途

动态内容：通过JavaScript和DOM，可以动态地修改网页内容，而无需重新加载整个页面。这对于创建交互式网页应用至关重要。
样式操作：可以读取和修改HTML元素的样式，实现动态的视觉效果。
事件处理：通过DOM事件，可以响应用户的操作（如点击、键盘输入等），并据此执行JavaScript代码。
表单验证：在表单提交前，可以通过DOM来检查表单数据的有效性和完整性。

基本语法

DOM操作主要依赖于JavaScript的语法，但这里有一些基本的DOM操作示例：

选择元素：
- 使用document.getElementById(id)通过元素的ID选择元素。
- 使用document.getElementsByTagName(name)通过元素的标签名选择元素（返回一个HTMLCollection）。
- 使用document.getElementsByClassName(name)通过元素的类名选择元素（返回一个HTMLCollection）。
- 使用document.querySelector(selector)和document.querySelectorAll(selector)通过CSS选择器选择元素（querySelector返回第一个匹配的元素，querySelectorAll返回所有匹配的元素的NodeList）。
操作内容：
- element.innerHTML：获取或设置元素的HTML内容。
- element.textContent：获取或设置元素的文本内容，不包括HTML标签。
操作属性：
- element.getAttribute(attributeName)：获取元素的属性值。
- element.setAttribute(attributeName, value)：设置元素的属性值。
- element.removeAttribute(attributeName)：移除元素的属性。
操作样式：
- 直接操作元素的style属性来设置CSS样式，如element.style.color = "red";。
事件处理：
- 通过为元素添加事件监听器来响应事件，如element.addEventListener('click', function() { /* 处理函数 */ });。

常见示例

假设我们有以下HTML结构：

<!DOCTYPE html>
<html>
<head>
    <title>DOM 示例</title>
</head>
<body>
    <h1 id="myHeader">欢迎来到我的网页</h1>
    <p>这是一个段落。</p>
    <button id="myButton">点击我</button>

    <script src="script.js"></script>
</body>
</html>

在script.js文件中，我们可以进行以下DOM操作：

// 1. 选择元素
var header = document.getElementById('myHeader');
var button = document.getElementById('myButton');

// 2. 修改内容
header.textContent = '欢迎访问我的新网页';

// 3. 添加事件监听器
button.addEventListener('click', function() {
    alert('按钮被点击了！');
});

// 4. 修改样式
header.style.color = 'blue';

// 5. 读取和设置属性
var pElements = document.getElementsByTagName('p');
for (var i = 0; i < pElements.length; i++) {
    pElements[i].setAttribute('class', 'text-style');
}

在这个示例中，我们首先通过ID选择了<h1>和<button>元素。然后，我们修改了<h1>元素的文本内容，并为<button>元素添加了一个点击事件监听器，以便在用户点击时显示一个警告框。接着，我们修改了<h1>元素的文字颜色，并给所有的<p>元素添加了一个类名。这些操作都展示了如何使用JavaScript和DOM来动态地与HTML文档进行交互。