JS获取DOM元素|极客笔记

JS获取DOM元素

在网页开发中，经常需要通过JavaScript来操作DOM（文档对象模型）元素，实现动态交互效果。本文将详细介绍如何使用JavaScript获取DOM元素的各种方法。

通过ID获取元素

在HTML文档中，我们可以为元素指定一个唯一的ID属性，通过该ID属性可以快速准确地获取到该元素。

<!DOCTYPE html>
<html>
<head>
    <title>通过ID获取元素</title>
</head>
<body>
    <div id="myDiv">这是一个div元素</div>
    <script>
        const element = document.getElementById('myDiv');
        console.log(element);
    </script>
</body>
</html>

运行以上代码，控制台将输出<div id="myDiv">这是一个div元素</div>，证明成功获取到了ID为myDiv的div元素。

通过类名获取元素

除了通过ID获取元素外，我们还可以通过元素的类名来获取元素。使用getElementsByClassName方法可以获取多个拥有相同类名的元素。

<!DOCTYPE html>
<html>
<head>
    <title>通过类名获取元素</title>
</head>
<body>
    <div class="myClass">这是第一个div元素</div>
    <div class="myClass">这是第二个div元素</div>
    <script>
        const elements = document.getElementsByClassName('myClass');
        console.log(elements);
    </script>
</body>
</html>

运行以上代码，控制台将输出包含两个div元素的HTMLCollection集合。

通过标签名获取元素

如果我们想获取某一类型的所有元素，可以使用getElementsByTagName方法。

<!DOCTYPE html>
<html>
<head>
    <title>通过标签名获取元素</title>
</head>
<body>
    <p>这是段落1</p>
    <p>这是段落2</p>
    <script>
        const paragraphs = document.getElementsByTagName('p');
        console.log(paragraphs);
    </script>
</body>
</html>

以上代码会输出两个p元素的HTMLCollection集合。

通过选择器获取元素

通过选择器获取元素是现代Web开发中最常用的方法之一，可以使用querySelector和querySelectorAll方法。

querySelector将返回第一个匹配的元素，querySelectorAll将返回所有匹配的元素。

<!DOCTYPE html>
<html>
<head>
    <title>通过选择器获取元素</title>
</head>
<body>
    <div class="container">
        <p class="text">这是段落1</p>
        <p class="text">这是段落2</p>
        <p class="text">这是段落3</p>
    </div>
    <script>
        const paragraph = document.querySelector('.text');
        console.log(paragraph);

        const paragraphs = document.querySelectorAll('.text');
        console.log(paragraphs);
    </script>
</body>
</html>

以上代码中，第一个console.log输出第一个匹配的段落元素，第二个console.log输出包含三个段落元素的NodeList集合。

通过父元素获取子元素

我们还可以通过父元素获取其子元素，使用parentNode和childNodes属性。

<!DOCTYPE html>
<html>
<head>
    <title>通过父元素获取子元素</title>
</head>
<body>
    <ul id="myList">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <script>
        const list = document.getElementById('myList');
        const items = list.childNodes;
        console.log(items);
    </script>
</body>
</html>

运行以上代码，控制台将输出包含三个li元素的NodeList集合。

通过前一个和后一个兄弟元素获取元素

如果我们想获取某个元素的前一个和后一个兄弟元素，可以使用previousSibling和nextSibling属性。

<!DOCTYPE html>
<html>
<head>
    <title>通过前一个和后一个兄弟元素获取元素</title>
</head>
<body>
    <p>这是段落1</p>
    <p>这是段落2</p>
    <p>这是段落3</p>
    <script>
        const paragraph2 = document.getElementsByTagName('p')[1];
        const previousParagraph = paragraph2.previousSibling;
        const nextParagraph = paragraph2.nextSibling;
        console.log(previousParagraph);
        console.log(nextParagraph);
    </script>
</body>
</html>

以上代码中，previousParagraph将输出前一个兄弟元素，nextParagraph将输出后一个兄弟元素。