如何在 Javascript 中选择 HTML 元素

Posted on by

在 Javascript 中，可以通过代码选择 HTML 元素。这让我们可以直接与特定元素交互，并改变它们。

我们为什么要选择 HTML 元素？#

我们希望以特定 HTML 元素为目标的原因有很多。它可能是向它添加一个事件– 例如，当用户单击按钮时我们可以做一些事情。另一个原因，可能是以编程方式更改元素的 CSS。无论我们出于何种原因这样做，我们都可以使用许多函数在 Javascript 中执行此操作。

如何选择 Javascript 中的所有匹配元素#

我们可以使用在 CSS 中使用的相同选择器在 Javascript 中查找特定元素。要选择具有特定选择器的所有元素，我们可以使用querySelectorAll. 例如，如果我们想针对所有divs，我们可以这样写：

let allDivs = document.querySelectorAll('div');

现在我们可以针对每个目标div并对其执行一些操作。当我们像这样定位多个 HTML 元素时，它会返回一个NodeList。我们通常可以使用 迭代这些元素中的每一个forEach，但并非所有浏览器都实现了这一点。您可以在此处阅读更多相关信息。

let allDivs = document.querySelectorAll('div');

allDivs.forEach(function(item) {
    // the variable 'item' is each of our divs.
    // So we can change it. The code below will make all divs have red text!
    item.style.color = 'red';
});

只选择第一个匹配的元素

与 类似querySelectorAll，我们可以使用querySelector只选择第一个匹配的元素。这意味着我们不必循环我们的结果forEach：

// The below only targets the first div it finds.
let oneDivOnly = document.querySelector('div');

按 ID 选择元素#

我们还可以通过 ID 选择元素。我们可能会使用它的原因是因为通过 ID 选择内容比基于查询选择器搜索文档要快得多。例如，假设我们给了一个 HTML 元素一个名为‘my-id’ 的 ID。我们可以使用以下方式选择它getElementById：

<div id="my-id"></div>

let myId = document.getElementById('my-id');

等待文档加载#

我们有时会在加载 HTML 之前运行我们的 Javascript。如果您的 Javascript 位于文档的头部，则可能会发生这种情况。如果您的 Javascript 位于页面底部，您可能不必担心。

但是，如果您的 Javascript 位于页面顶部，则您需要等到文档加载完毕。如果不这样做，HTML 将不会加载，因此 Javascript 文件将无法选择 HTML 元素——这将引发错误。我们可以使用事件侦听器并等待加载 DOM 内容来做到这一点。代码如下所示：

// Using the below line, we can wait for the HTML to load in the page
document.addEventListener('DOMContentLoaded', function() {
    // Everything inside this function, will run after the HTML document has loaded
    let allDivs = document.querySelectorAll('div');

    allDivs.forEach(function(item) {
        // the variable 'item' is each of our divs.
        // So we can change it. The code below will make all divs have red text!
        item.style.color = 'red';
    });
})

按类选择元素#

对于大多数用例，querySelector并将getElementById满足大多数需求。在某些情况下，您可能更喜欢使用getElementsByClassName. 的问题getElementsByClassName是它返回一个HTMLCollection，我们不能在其forEach上使用。因此，我们必须使用一些 Javascript 数组技巧来对每个匹配元素做一些事情。

例如，下面将选择具有活动类的每个元素并将其颜色设置为红色：

var allActive = document.getElementsByClassName('active');

Array.prototype.filter.call(allActive, function(item) {
    item.style.color = 'red';
});

推荐阅读：