17 获取与设置DOM元素的内容

在上一篇教程中，我们讨论了如何利用jQuery处理Ajax响应，理解了如何与服务器进行数据交互。在本篇中，我们将深入探讨DOM操作，重点在于如何获取和设置DOM元素的内容。这对于动态更新网页内容极为重要。

什么是DOM？

DOM（文档对象模型）是一种表示网页结构的对象模型，允许开发者通过编程方式访问和修改网页的内容、结构和样式。每个HTML元素都是一个DOM节点，因此我们可以通过jQuery方便地操作这些节点。

获取DOM元素的内容

获取文本内容

要获取元素的文本内容，可以使用text()方法。它会返回匹配元素的文本内容。

$(document).ready(function() {
    let content = $("#myElement").text();
    console.log(content); // 输出：元素内部的文本内容
});

案例分析

假设我们有如下HTML结构：

<div id="myElement">Hello, World!</div>

通过text()方法，可以轻松获取到该div的文本内容。

获取HTML内容

要获取元素的HTML内容，可以使用html()方法。它将返回匹配元素的HTML代码。

$(document).ready(function() {
    let htmlContent = $("#myElement").html();
    console.log(htmlContent); // 输出：元素内部的HTML代码
});

案例分析

对于以下HTML结构：

<div id="myElement"><strong>Hello, World!</strong></div>

使用html()方法，我们将得到<strong>Hello, World!</strong>这段HTML内容。

获取属性值

如果你需要获取元素的某个属性值，可以使用attr()方法。

$(document).ready(function() {
    let srcValue = $("#myImage").attr("src");
    console.log(srcValue); // 输出：图像的src属性值
});

案例分析

考虑以下HTML：

<img id="myImage" src="image.png" alt="Sample Image" />

通过attr("src")，我们可以获取到image.png。

设置DOM元素的内容

设置文本内容

对于改变元素的文本内容，可以使用text()方法，传入新的文本。

$(document).ready(function() {
    $("#myElement").text("新文本内容");
});

设置HTML内容

要设置元素的HTML内容，可以使用html()方法。

$(document).ready(function() {
    $("#myElement").html("<strong>新HTML内容</strong>");
});

设置属性值

要改变元素的属性值，使用attr()方法。

$(document).ready(function() {
    $("#myImage").attr("src", "new-image.png");
});

综合案例

假设我们有以下HTML结构：

<div id="content">原始文本</div>
<img id="myImage" src="old-image.png" alt="Old Image" />

我们可以同时更改文本和图像：

$(document).ready(function() {
    $("#content").text("更新后的文本");
    $("#myImage").attr("src", "new-image.png");
});

结果：

• div中的文本将变为更新后的文本
• 图像的src属性更改为new-image.png

小结

在本章中，我们了解了如何使用jQuery获取和设置DOM元素的内容。掌握这项技能后，您可以轻松动态更新网页内容，提升用户体验。下篇将深入探讨DOM元素遍历，帮助您更高效地处理多个DOM元素。

通过本系列教程，逐步提升您的jQuery技能，为构建动态网页打下坚实的基础！