HTML 获取某个类的子节点|极客教程

HTML 获取某个类的子节点

在HTML中，我们经常需要获取某个类的子节点，以便对这些子节点进行操作或者获取信息。在本文中，我们将介绍如何使用JavaScript来获取某个类的子节点，并提供详细的示例代码。

1. 使用querySelectorAll方法获取某个类的所有子节点

我们可以使用querySelectorAll方法来获取某个类的所有子节点。这个方法会返回一个NodeList对象，其中包含了所有符合条件的子节点。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>Get Child Nodes by Class</title>
</head>
<body>
    <div class="container">
        <p class="text">Hello, geek-docs.com!</p>
        <p class="text">Welcome to geek-docs.com!</p>
    </div>

    <script>
        const container = document.querySelector('.container');
        const textNodes = container.querySelectorAll('.text');

        textNodes.forEach(node => {
            console.log(node.textContent);
        });
    </script>
</body>
</html>

Output:

HTML 获取某个类的子节点

在这个示例中，我们首先通过querySelector方法获取了类名为container的元素，然后使用querySelectorAll方法获取了这个元素下所有类名为text的子节点，并遍历输出了这些子节点的textContent。

2. 使用children属性获取某个类的直接子节点

除了querySelectorAll方法，我们还可以使用children属性来获取某个类的直接子节点。这个属性会返回一个HTMLCollection对象，其中包含了所有直接子节点。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>Get Direct Child Nodes by Class</title>
</head>
<body>
    <div class="container">
        <p class="text">Hello, geek-docs.com!</p>
        <p class="text">Welcome to geek-docs.com!</p>
    </div>

    <script>
        const container = document.querySelector('.container');
        const directChildNodes = container.children;

        for (let node of directChildNodes) {
            console.log(node.textContent);
        }
    </script>
</body>
</html>

Output:

HTML 获取某个类的子节点

在这个示例中，我们同样首先通过querySelector方法获取了类名为container的元素，然后使用children属性获取了这个元素的直接子节点，并遍历输出了这些子节点的textContent。

3. 使用childNodes属性获取某个类的所有子节点

除了children属性，我们还可以使用childNodes属性来获取某个类的所有子节点，包括文本节点和元素节点。这个属性会返回一个NodeList对象，其中包含了所有子节点。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>Get All Child Nodes by Class</title>
</head>
<body>
    <div class="container">
        <p class="text">Hello, geek-docs.com!</p>
        <p class="text">Welcome to geek-docs.com!</p>
    </div>

    <script>
        const container = document.querySelector('.container');
        const allChildNodes = container.childNodes;

        allChildNodes.forEach(node => {
            if (node.nodeType === 1) {
                console.log(node.textContent);
            }
        });
    </script>
</body>
</html>

Output:

HTML 获取某个类的子节点