在 HTML 中按索引、class 或 NTML 标签选择元素

最新推荐文章于 2024-03-21 13:11:56 发布

kllo__

最新推荐文章于 2024-03-21 13:11:56 发布

阅读量465

点赞数

分类专栏： javascript 文章标签： html elementui

本文链接：https://blog.csdn.net/kllo__/article/details/122824664

版权

javascript 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

按照索引逐节点遍历

<html>
 <head>
 </head>
 <body>
<h1>Seven wonders of the world</h1>
<p>Do you know the seven wonders of the world?</p>
<div id="content">
    <h2>Wonders from Antiquity</h2>
    <p>This list comes to us from ancient times.</p>
    <ul class="wonders" id="ancient">
        <li class="exists">Great Pyramid of Giza</li>
        <li>Hanging Gardens of Babylon</li>
        <li>Lighthouse of Alexandria</li>
        <li>Statue of Zeus at Olympia</li>
        <li>Temple of Artemis at Ephesus</li>
        <li>Mausoleum at Halicarnassus</li>
        <li>Colossus of Rhodes</li>
    </ul>
    <h2>Modern wonders of the world</h2>
    <p>This list was decided by vote.</p>
    <ul class="wonders" id="new">
        <li class="exists">Petra</li>
        <li class="exists">Great Wall of China</li>
        <Li class="exists">Christ the Redeemer</Li>
        <Li class="exists">Machu Picchu</Li>
        <li class="exists">Chichen Itza</li>
        <li class="exists">Colosseum</li>
        <li class="exists">Taj Mahal</li>
    </ul>
    <h2>References</h2>
    <ul>
        <li><a href="https://en.wikipedia.org/wiki/Seven_Wonders_of_the_Ancient_World">Seven Wonders of the Ancient World</a></li>
        <li><a href="https://en.wikipedia.org/wiki/New7Wonders_of_the_World">New Wonders of the World</a></li>
    </ul>
</div>
  
  </body>
</html>


// Show the "Wonders from Antiquity" h2 element

console.log(document.body.childNodes[5].childNodes[1].innerHTML);

输出：

这种方法非常容易出错，且可读性很差

根据 HTML 标签选择元素

所有元素都有一个名为 getElementsByTagName() 的方法。它以 NodeList 对象的形式返回一个包含作为参数传递的标记名称的项目列表。搜索将通过调用该方法遍历该节点的所有子元素——而不仅仅是它的直接元素。

使用这个方法，选择上面的 h2 元素将变得非常容易。

<html>
 <head>
 </head>
 <body>
<h1>Seven wonders of the world</h1>
<p>Do you know the seven wonders of the world?</p>
<div id="content">
    <h2>Wonders from Antiquity</h2>
    <p>This list comes to us from ancient times.</p>
    <ul class="wonders" id="ancient">
        <li class="exists">Great Pyramid of Giza</li>
        <li>Hanging Gardens of Babylon</li>
        <li>Lighthouse of Alexandria</li>
        <li>Statue of Zeus at Olympia</li>
        <li>Temple of Artemis at Ephesus</li>
        <li>Mausoleum at Halicarnassus</li>
        <li>Colossus of Rhodes</li>
    </ul>
    <h2>Modern wonders of the world</h2>
    <p>This list was decided by vote.</p>
    <ul class="wonders" id="new">
        <li class="exists">Petra</li>
        <li class="exists">Great Wall of China</li>
        <Li class="exists">Christ the Redeemer</Li>
        <Li class="exists">Machu Picchu</Li>
        <li class="exists">Chichen Itza</li>
        <li class="exists">Colosseum</li>
        <li class="exists">Taj Mahal</li>
    </ul>
    <h2>References</h2>
    <ul>
        <li><a href="https://en.wikipedia.org/wiki/Seven_Wonders_of_the_Ancient_World">Seven Wonders of the Ancient World</a></li>
        <li><a href="https://en.wikipedia.org/wiki/New7Wonders_of_the_World">New Wonders of the World</a></li>
    </ul>
</div>
  
  </body>
</html>

// Get all h2 elements into an array
const titleElements = document.getElementsByTagName("h2");

console.log(titleElements[0].innerHTML);     // Show the first h2
console.log(titleElements.length); // 3 (total number of h2 elements in the page)

输出结果：

使用 element（或者当变量包含多个节点时使用 Elements）作为与 DOM 元素节点关联的 JavaScript 变量的后缀是一种流行的命名约定。

根据 class 选择项目

另一种方法叫做 getElementsByClassName()。这个方式使用类名作为参数返回元素的 NodeList 对象。同样涵盖了调用该方法的节点的所有子元素。

请注意，NodeList 对象不是真正的 JavaScript 数组，因此并非所有数组操作都适用于它们。要将 NodeList 对象转换为数组，请使用 Array.from() 方法。要使用 class 选择和显示所有文档元素“ wonders”，可以编写以下代码。

<html>
 <head>
 </head>
 <body>
<h1>Seven wonders of the world</h1>
<p>Do you know the seven wonders of the world?</p>
<div id="content">
    <h2>Wonders from Antiquity</h2>
    <p>This list comes to us from ancient times.</p>
    <ul class="wonders" id="ancient">
        <li class="exists">Great Pyramid of Giza</li>
        <li>Hanging Gardens of Babylon</li>
        <li>Lighthouse of Alexandria</li>
        <li>Statue of Zeus at Olympia</li>
        <li>Temple of Artemis at Ephesus</li>
        <li>Mausoleum at Halicarnassus</li>
        <li>Colossus of Rhodes</li>
    </ul>
    <h2>Modern wonders of the world</h2>
    <p>This list was decided by vote.</p>
    <ul class="wonders" id="new">
        <li class="exists">Petra</li>
        <li class="exists">Great Wall of China</li>
        <Li class="exists">Christ the Redeemer</Li>
        <Li class="exists">Machu Picchu</Li>
        <li class="exists">Chichen Itza</li>
        <li class="exists">Colosseum</li>
        <li class="exists">Taj Mahal</li>
    </ul>
    <h2>References</h2>
    <ul>
        <li><a href="https://en.wikipedia.org/wiki/Seven_Wonders_of_the_Ancient_World">Seven Wonders of the Ancient World</a></li>
        <li><a href="https://en.wikipedia.org/wiki/New7Wonders_of_the_World">New Wonders of the World</a></li>
    </ul>
</div>
  
  </body>
</html>

// Show all elements that have the class "exists"
const existingElements = Array.from(document.getElementsByClassName("exists"));
existingElements.forEach(element => {
  console.log(element.innerHTML);
});

根据 ID 选择项目

document 变量提供了一个叫做 getElementById() 的方法，这个方法返回文档中所有具有指定 ID 的元素。如果没有找到关联的元素则返回 null。

<html>
 <head>
 </head>
 <body>
<h1>Seven wonders of the world</h1>
<p>Do you know the seven wonders of the world?</p>
<div id="content">
    <h2>Wonders from Antiquity</h2>
    <p>This list comes to us from ancient times.</p>
    <ul class="wonders" id="ancient">
        <li class="exists">Great Pyramid of Giza</li>
        <li>Hanging Gardens of Babylon</li>
        <li>Lighthouse of Alexandria</li>
        <li>Statue of Zeus at Olympia</li>
        <li>Temple of Artemis at Ephesus</li>
        <li>Mausoleum at Halicarnassus</li>
        <li>Colossus of Rhodes</li>
    </ul>
    <h2>Modern wonders of the world</h2>
    <p>This list was decided by vote.</p>
    <ul class="wonders" id="new">
        <li class="exists">Petra</li>
        <li class="exists">Great Wall of China</li>
        <Li class="exists">Christ the Redeemer</Li>
        <Li class="exists">Machu Picchu</Li>
        <li class="exists">Chichen Itza</li>
        <li class="exists">Colosseum</li>
        <li class="exists">Taj Mahal</li>
    </ul>
    <h2>References</h2>
    <ul>
        <li><a href="https://en.wikipedia.org/wiki/Seven_Wonders_of_the_Ancient_World">Seven Wonders of the Ancient World</a></li>
        <li><a href="https://en.wikipedia.org/wiki/New7Wonders_of_the_World">New Wonders of the World</a></li>
    </ul>
</div>
  
  </body>
</html>


// Show element with the ID "new"

console.log(document.getElementById("new").innerHTML);

注意，这个方法后面没有 's'。

kllo__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在 HTML 中按索引、class 或 NTML 标签选择元素

按照索引逐节点遍历<html> <head> </head> <body><h1>Seven wonders of the world</h1><p>Do you know the seven wonders of the world?</p><div id="content"> <h2>Wonders from Antiquity</h2>
复制链接

扫一扫

专栏目录