JavaScript DOM 文档对象模型
JavaScript 教程
收录了这篇文章

JavaScript DOM(Document Object Model)简介是关于如何使用JavaScript语言来与网页文档进行交互的基础概念。DOM是一种将HTML或XML文档解析为可编程对象的模型,使得开发者可以通过脚本(通常是JavaScript)动态地查询、修改、添加或删除文档的内容、结构和样式。

基本概念

  • 节点(Node): DOM将文档中的每一个部分视为节点,包括元素(如<p>、<a>)、属性(如class、id)、文本内容等。整个文档是一个文档节点,每个HTML标签是一个元素节点,标签内的文本是文本节点,等等。

  • 树状结构: DOM将文档表示为一个节点树,根节点是document对象,其他节点按照层次关系排列。每个节点可能有子节点、父节点和同级节点。

常用操作

  • 查找元素:

    • getElementById(id):根据ID获取单个元素。
    • getElementsByClassName(className):根据类名获取元素集合。
    • getElementsByTagName(tagName):根据标签名获取元素集合。
    • querySelector(selector):返回文档中匹配指定CSS选择器的第一个元素。
    • querySelectorAll(selector):返回文档中所有匹配指定CSS选择器的元素集合。
  • 修改内容和属性:

    • innerHTML: 设置或获取元素的内部HTML。
    • textContent: 设置或获取元素及其后代的纯文本内容。
    • setAttribute(name, value): 为元素设置属性。
    • getAttribute(name): 获取元素的属性值。
  • 样式操作:

    • 通过元素的style属性可以直接修改行内样式,如element.style.color = 'red';。
  • 增删改查操作:

    • createElement(tagName): 创建新元素。
    • appendChild(node), insertBefore(node, referenceNode), removeChild(node), replaceChild(newNode, oldNode): 分别用于添加、插入、删除和替换节点。
  • 事件处理:

    • 使用addEventListener(event, function)为元素添加事件监听器,如点击、鼠标悬停等。

实际应用

DOM操作是Web开发中的核心技能之一,广泛应用于实现网页的动态效果、表单验证、构建交互式UI、实现AJAX请求后的页面局部更新等功能。掌握DOM操作,可以让网页更加动态、响应迅速,提升用户体验。

通过学习和实践JavaScript DOM,开发者能够创造出丰富多样的网页交互体验,是前端开发不可或缺的一部分。

 

举个例子:

了解了您想深入学习JavaScript DOM的需求,这里为您提供一个简明的示例,展示如何使用JavaScript DOM操作来改变一个网页上的文本内容和样式。假设我们有一个简单的HTML文档,里面有一个段落元素(<p>),我们将通过JavaScript来修改这个段落的文字和颜色。

HTML 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript DOM 示例</title>
</head>
<body>

<p id="myParagraph">这是一个会被JavaScript修改的段落。</p>

<script>
// 使用JavaScript DOM操作

// 通过ID获取段落元素
var paragraph = document.getElementById("myParagraph");

// 修改段落的文本内容
paragraph.textContent = "现在,这个段落的内容已经被JavaScript改变了!";

// 修改段落的颜色样式
paragraph.style.color = "blue";
paragraph.style.fontSize = "20px"; // 同时改变字体大小

// 为段落添加点击事件,点击后改变文本和背景色
paragraph.addEventListener("click", function() {
    this.textContent = "你刚刚点击了这段文字!";
    this.style.backgroundColor = "lightgray";
});
</script>

</body>
</html>

 

解释

  1. 获取元素: 使用getElementById方法通过元素的ID选取页面中的一个特定元素。

  2. 修改内容: 通过修改textContent属性直接改变元素内的文本内容。

  3. 修改样式: 利用style属性可以直接操作元素的CSS样式,如颜色(color)和字体大小(fontSize)。

  4. 事件监听: 使用addEventListener方法给元素添加事件监听器,这里是为段落添加了一个点击事件。当用户点击段落时,会执行匿名函数内的代码,改变段落的文本内容和背景色。

这个例子展示了JavaScript DOM操作的基本用法,包括读取和修改元素内容、样式以及添加事件处理程序。通过掌握这些基本概念,您可以进一步探索DOM的高级功能,比如动态创建和删除元素、遍历节点树等。

声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
随机推荐
Debian11 安装笔记1:编译安装Nginx、Naxsi 和 Njs
HTML input checkbox 复选按钮
JavaScript Proxy 代理
JavaScript 工作者线程
JavaScript 操作表单
MySQL 使用 DATE_FORMAT() 和 FROM_UNIXTIME() 格式化时间
JavaScript 事件流
Express 使用 body-parser 处理 HTTP 请求