前端小计（查找元素的练习）——百度前端技术学院第十九天：找到那个DOM-CSDN博客

本文链接：https://blog.csdn.net/qq_45358338/article/details/98342213

本文通过具体实例，详细介绍了如何使用基本的DOM方法如getElementById(), getElementsByTagName()等来操作HTML元素，包括获取页面中所有li标签，查找特定内容的span标签，定位包含指定span内容的li标签，以及获取特定类名的链接文字。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

感觉有点困难，不过还是完成了要求。
百度学院的页面
`

IFE ECMAScript

Some title

Some Text

Some title

Some Text

它的要求是：

使用上诉代码，分别实现 script 标签中的几个函数。
在这个练习中仅允许使用以下 DOM 方法或属性，不得使用高级选择器
getElementById()
getElementsByTagName()
childNodes
parentNode

我的结果就是这样的：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">    
    <title>IFE ECMAScript</title>
</head>
<body>        
    <div id="wrapper">
        <div id="news-top" class="section">
            <h3>Some title</h3>
            <div class="content">
                <ul>
                    <li><span>HTML</span><a href="">Some Link1</a></li>
                    <li><span>JS</span><a class="active" href="">Some Link2</a></li>
                    <li><span>CSS</span><a href="">Some Link3</a></li>
                    <li><span>JS</span><a href="">Some Link4</a></li>
                </ul>
            </div>
            <img src="">
            <p class="">Some Text</p>
        </div>
        <div id="news-normal" class="section">
            <h3>Some title</h3>
            <div class="content">
                <ul>
                    <li><span>HTML</span><a href="">Some Link1</a></li>
                    <li><span>HTML</span><a href="">Some Link2</a></li>
                    <li><span>JS</span><a class="active" href="#">Some Link3</a></li>
                    <li><span>CSS</span><a href="">Some Link4</a></li>
                </ul>
            </div>
            <img src="">
            <p class="">Some Text</p>

        </div>      
    </div>
    <script>
    function getAllListItem() {
     **// 返回页面中所有li标签**
     //直接找到li组
     var li = document.getElementsByTagName('li');
     console.log(li);
     return(li);
    }

    function findAllHtmlSpanInOneSection() {
        **// 返回某个section下所有span中内容为HTML的span标签**
       	//选择一个section；
       var x=document.getElementById('news-normal');
       //找到span标签组
       var y=x.getElementsByTagName("span");
       	//定义一个新鲜数组，用来接收符合要求的元素
       var f=new Array();
       //遍历span组，找到符合要求（内容是HTML）的元素，重组新鲜数组
       for(var i=0;i<y.length;i++){
           if(y[i].innerHTML=="HTML"){
               f.push(y[i]);
           }
       }
      console.log(f);
		return（f）；
    }

    function findListItem() {
        **// 返回某个section下，所有所包含span内容为spanCont的LI标签**
        //选择一个section
        var sect = document.getElementById('news-normal');
          //找到span标签组
        var span = sect.getElementsByTagName('span');
        //定义一个新鲜数组，用来接收符合要求的元素
        var child = new Array();
         //遍历span组，找到符合要求（内容是JS（spanCont是在没找到，就换了一个））的元素，然后把它的父节点li，重组成新鲜数组
        for(var i = 0; i < span.length; i++){
          if (span[i].innerHTML == 'JS') {
            child.push(span[i].parentNode);
          }
        }    
        console.log(child);
        return（child）；  
            }

    function getActiveLinkContent() {
        **// 返回某个section下，class为active的链接中包含的文字内容**
        //选择一个section
        var sect = document.getElementById('news-top');
          //找到a标签组
        var a = sect.getElementsByTagName('a');
        //定义新鲜数组
        var arr = []
        //遍历a标签组，找到符合类名为‘active’的元素，然后把它的innerHTML（内容文档），重组成新鲜数组
        for (var i = 0; i < a.length; i++) {
          if (a[i].className == 'active') {
            arr.push(a[i].innerHTML);
          }          
        }
        console.log(arr);
        return（arr）；
    }
    //函数调用
    getAllListItem();
    findAllHtmlSpanInOneSection();
    findListItem();
    getActiveLinkContent();
    </script>
</body>
</html>

第一次把自己摸索的东西记录下来，挺不错的。