使用 JQuery 在 WordPress 中操作 DOM

已发表: 2023-02-12

由于 WordPress 的开源平台和充满活力的开发人员社区，为该平台创建主题具有相当广泛的吸引力。然而，浏览构建 WordPress 站点所需的所有元素和内容可能具有挑战性，这取决于您的编程知识和经验。

幸运的是，文档对象模型 (DOM) 可以使操作或浏览网站的 HTML 代码变得更加容易。 DOM 的工作原理是使您能够创建由各种节点或对象组成的树。这为使用 jQuery 等 JavaScript 库更改站点的显示、结构或功能提供了机会。

在本文中，我们将解释什么是 DOM 以及您可能想要使用它的原因。然后，我们将提供一些标准的 jQuery 操作技术，以便在 WordPress 中使用 DOM。让我们开始吧！

什么是 DOM？

简单地说，DOM 是 HTML 的应用程序编程接口 (API)。它创建了一个代表网页内容和结构的对象树。它也是一个与平台和语言无关的脚本，这使得它非常通用。当 DOM 以这种方式表示 HTML 源代码时，它使它可以访问，以便各种编程语言可以连接到它。

为什么使用 DOM？

作为 WordPress 用户，每当您遇到动态交互时，您很可能会看到 DOM 正在运行。这可能包括在提交缺少信息的表单时返回错误。内容滑块是正在使用的 DOM 的另一个示例：

开发人员可以使用 DOM 来更新和更改网页上几乎所有的元素。您可以使用它来构建文档并导航其结构。 DOM 还可用于添加、修改或删除元素和对象。

使用 JQuery 操作 DOM

需要明确的是，DOM 和 HTML 并不相同，尽管它们应该包含相同的元素。 DOM 是 HTML 源代码的建模表示，可以通过客户端 JavaScript 进行更改。

下面，我们将研究 jQuery 库中用于测试一些 DOM 操作技术的方法。请记住，不同的浏览器以自己的方式处理 DOM，但您无需执行任何特殊操作即可开始使用它。所有浏览器都使用某种形式的 DOM 来使 JavaScript 可以访问页面。

DOM 操作技术

DOM 可以以多种方式使用。为了说明它的灵活性，让我们看一下可以帮助您开始使用这个有用的 API 的六种技术。

1. Before() 方法

顾名思义，当您想要在另一个目标元素之前插入任何元素时，将使用before()方法，如代码中所示。

在此示例中，该方法可用于在单击后在指定元素（例如按钮）上方添加带有文本的方形元素：

 $(this).before( "<div class='square'>另一个正方形</div>" );

页面放置和布局是使用此方法时要牢记的注意事项。您需要确保您的新元素不会破坏您的布局或在视觉上造成麻烦。

2. After() 方法

与before()方法允许您在另一个指定元素之前插入元素的方式相同， after()方法允许相反的操作。例如，一旦按钮被选中，它可以用于在按钮正下方添加一个元素：

 $(this).after( "<div class='square'>另一个正方形</div>" );

通过像这样使用 jQuery 操作 DOM 来添加交互式内容是获得交互性的可靠方法，同时不会在此过程中降低速度。

3. Append() 方法

您可能希望将新元素添加到现有元素上，而不是让单独的新元素出现。例如，也许您想添加文本“生日快乐！” 每当单击特定按钮时，都会在彩色区域内显示。

要将新元素附加到目标元素的现有内容，您可以在 HTML 源代码中插入append() jQuery 命令：

 $( ".box" ).append( "<p>生日快乐！</p>" );

此方法将操作添加到您在字符串中指示的元素的末尾，而不是将其放在之前或之后。在完整 HTML 文档的上下文中，您可以看到操作是如何发生的：

 <!doctype html>
 <title>例子</title>
 <样式>
 。盒子 {
 背景：橙色；
 白颜色;
 白颜色;
 宽度：150px；
 填充：20px；
 边距：10px；
 }
 </样式>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <脚本>
 $( 函数() {
 $(“按钮”).click(函数(){
 $(this).after( "<div class='box'>生日快乐！</div>" );
 });
 });
 </脚本>
 <button>创建一个盒子</button>

此技术为您提供了一个在密闭空间内创建交互性的简单选项。请记住，使用此特定方法，操作将显示为您指定的元素的扩展，而不是新的单个元素。

4. Prepend() 方法

作为append()方法的平衡， prepend()将向您在 jQuery 命令中指示的任何目标元素的末尾添加一个元素：

 $( ".banner" ).prepend( "<p>生日快乐！</p>" );

在这个例子中，文本“生日快乐！” 将出现在代码字符串中指示的横幅的开头。

值得注意的是，这些方法（包括before() 、 after()和append() ）都是简单使用的可接受方法。但是，我们确实建议使用其他技术来进行更复杂的插入。

5. Clone() 方法

接下来，就使用 jQuery 操作 DOM 而言， clone()方法是一个非常强大的选项。前面四种技术使您能够插入元素并四处移动它们，而 clone()使复制元素、将其从其原始位置删除以及重新插入或追加到其他位置成为可能。

例如，这一行意味着原始的 box 元素将保留在原处，而它的一个克隆将附加到 triangle 元素：

 $( ".box" ).clone().appendTo( ".triangle" );

此方法的缺点是它可能导致元素的id属性重复。这些属性是独一无二的。您可以通过使用类属性作为标识符并谨慎使用克隆方法来避免此问题。

6. Wrap() 方法

最后，如果您想将一个元素包裹在现有字符串周围，则wrap()方法很有用。例如，您可以通过识别类并指示正在实现的结构来将几个段落包装在一个新的 HTML 结构中：

 $( ".targetclass" ).wrap( "<div class='new'></div>" );

使用这种技术，您可以在与wrap()字符串中的目标类匹配的任何元素周围创建一个<div> 。虽然您可以创建几层深的环绕，但是，您应该确保只有一个最里面的元素。

DOM 故障排除

在使用 DOM 时，我们想强调一个您需要注意的关键方面。为了让您的页面保持快速加载并避免不必要的代码（特别是如果您正在开发主题），您应该注意不要使用任何不属于 DOM 树的元素。

如果您不确定某个元素是否是 DOM 的一部分，您可以通过您站点前端的浏览器检查每个元素。您可以检查页面上的元素，并确定它们在 DOM 树中的位置。

当另一个脚本更改了您站点的原始 HTML 时，这尤其有用。否则，您的 HTML 和 DOM 有时可能看起来完全一样。

探索其他 WP Engine 资源和工具

如果您将 DOM 视为您网站的有机组成部分，一种响应 HTML 源代码的活资源，那么它的可访问性的力量是相当惊人的。这就是为什么了解 DOM 以及如何使用它来增强您的项目可以帮助您的网站更上一层楼。

使用 jQuery 操作 DOM 凸显了 WordPress 开源平台的魅力。在 WP Engine，我们了解高质量的开发人员资源如何发挥重要作用。这就是为什么我们为 WordPres 用户提供大量帮助以及一流的托管计划！