百度前端技术学院第十九天：找到那个DOM

最新推荐文章于 2022-04-02 10:36:32 发布
最新推荐文章于 2022-04-02 10:36:32 发布
阅读量513 收藏
点赞数
分类专栏： 前端 文章标签： JavaScript HTML 百度前端技术学院
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Xiaoyi_Xie/article/details/82429713
版权

刚刚开始学前端，依照着百度前端学院学习，之前的代码都没保存，想了想辛辛苦苦敲的还是做个记录。

查找元素练习

在这个练习中仅允许使用以下 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>
   console.log(getAllListItem());
   //console.log(findAllHtmlSpanInOneSection("news-normal"));
   //console.log(findListItem("news-normal", "CSS"));
   //console.log(getActiveLinkContent("news-normal"));
    function getAllListItem() {
        // 返回页面中所有li标签
    var x=document.getElementsByTagName('li');
    return x;
    }

    function findAllHtmlSpanInOneSection(sectionId) {
        // 返回某个section下所有span中内容为HTML的span标签
        var x=document.getElementById(sectionId);
       var y=x.getElementsByTagName("span");
       var f=new Array();
       for(var i=0;i<y.length;i++){
           if(y[i].innerHTML=="HTML"){
               f.push(y[i]);
           }
       }
      return f; 
    }

    function findListItem(sectionId, spanCont) {
        // 返回某个section下，所有所包含span内容为spanCont的LI标签
        var x=document.getElementById(sectionId);
        var y=x.getElementsByTagName("span");
        var f=new Array();
       for(var i=0;i<y.length;i++){
           if(y[i].innerHTML==spanCont){
               f.push(y[i].parentNode);
           }
       }
       return f;
    }

    function getActiveLinkContent(sectionId) {
        // 返回某个section下，class为active的链接中包含的文字内容
        var x=document.getElementById(sectionId);
        var y=x.getElementsByTagName('a');
        var f=new Array();
        for(var i=0;i<y.length;i++){
            if(y[i].className=="active"){
                f.push(y[i].innerHTML);
            }
          }
          return f; 
    }

    </script>
</body>
</html>

使用querySelector及querySelectorAll

<!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>
   console.log(getAllListItem());
   //console.log(findAllHtmlSpanInOneSection("news-normal"));
   //console.log(findListItem("news-normal", "CSS"));
   //console.log(getActiveLinkContent("news-normal"));
    function getAllListItem() {
        // 返回页面中所有li标签
     var x=document.querySelectorAll("li");
    return x; 

    }

    function findAllHtmlSpanInOneSection(sectionId) {
        // 返回某个section下所有span中内容为HTML的span标签
       var x=document.getElementById(sectionId);
      var y=x.querySelectorAll("span");
      var f=new Array();
        for(var i=0; i <y.length; i++) {
            if(y[i].innerHTML =="HTML") {
                f.push(y[i]);
            }
        }
        return f;

    }

    function findListItem(sectionId, spanCont) {
        // 返回某个section下，所有所包含span内容为spanCont的LI标签
        var x=document.getElementById(sectionId);
        var y=x.querySelectorAll("span");
        var f=new Array();
       for(var i=0;i<y.length;i++){
           if(y[i].innerHTML==spanCont){
               f.push(y[i].parentNode);
           }
       }
       return f;
    }

    function getActiveLinkContent(sectionId) {
        // 返回某个section下，class为active的链接中包含的文字内容
         var x=document.getElementById(sectionId);
        var y=x.querySelector("a.active");
        return y.innerHTML;  

    }

    </script>
</body>
</html>
Xiaoyi_Xie
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端JS（DOM）学习第三十一天
StarAh的博客
04-15 845
web前端JS（DOM）学习第三十一天
百度Web前端技术学院
08-12
百度Web前端技术学院（Baidu Institute of Front-End Technology简称IFE）是一个由百度人力资源部校园招聘组、百度EFE团队联合出品的、面向在校大学生以及对前端技术有兴趣的前端在线学习平台，我们希望能够借助百度大量优秀的前端工程师以及丰富的前端知识积累。
百度前端技术学院--零基础--第七天到第八天：学习布局
m0_45317318的博客
08-18 321
第七天到第八天：学习布局 课程目标 通过大量练习，来学习布局的各种方式 阅读 MDN定位 MDN定位实战 MDN Flexbox 学习CSS布局 CSS布局(三) 布局模型 CSS布局(四) Float CSS布局(五) 网页布局方式 CSS布局(六) 对齐方式 七种实现左侧固定，右侧自适应两栏布局的方法 圣杯布局 双飞翼布局 圣杯布局和双飞翼布局 CSS深入理解流体特性和BFC特性下多栏自适应布局 三种三栏网页宽度自适应布局方法 阅读笔记 1.静态定位 静态定位是每个元素获取的默认值——它只是意味着“
百度前端技术学院html任务,百度前端技术学院（IFE）第一阶段任务
weixin_39719165的博客
06-21 536
任务一：零基础HTNL编码代码地址https://github.com/Sagitarioo/BaiduIFE/tree/master/firstgrade/task01演示https://sagitarioo.github.io/BaiduIFE/firstgrade/task01/index.html任务二：零基础HTML及CSS编码(一)代码地址https://github.com/...
前端工程师经常上哪些网站学习最新技术?
killbillgates的博客
04-02 5888
程序员这个职业，面试造火箭，工作拧螺丝，前端开发工程师也逃不出这个宿命。把自己修炼的十八般武艺样样精通，给自己多找些挣钱机会，才能让焦虑的职业生涯踏实下来。 所以，我们把前端工程师常用的网站分为两类：学习充电，接单挣钱。 学习充电 1.B站（https://www.bilibili.com/） 曾经我也只是把B站当做一个看番刷鬼畜的地方，但现在不错的课程也越来越多，之后想学些什么东西的时候，都会优先来B站搜一搜相关的学习视频。这里的视频可能不会把东西讲的很深，但在提兴趣，打基础方面非常有效。前端方面
百度前端技术学院第19天
weixin_43274526的博客
04-22 152
百度前端技术学院第19天的任务
Baidu-IFE:百度前端技术学院http
03-24
第十九天：找到那个DOM 第二十到第二十一天：让你和页面对话 第二十八天到第三十天给爱的人发个邮件吧 第三十一到第三十三天：我是精明的小卖家（一） 第三十四天到第三十六天：我是精明的小卖家（二） 第三...
2016ife-task:2016百度前端技术学院任务
05-11
在“2016ife-task:2016百度前端技术学院任务”中，我们可以看到一个针对前端开发者的训练计划，旨在提升他们在HTML、CSS和JavaScript这三个关键领域的技能。这个训练分为三个部分，每个部分都有特定的Demo项目，旨在...
IFE-2017:百度前端技术学院项目
03-24
【IFE-2017: 百度前端技术学院项目】是百度在2017年推出的一个前端技术教育项目，旨在培养和提升前端工程师的专业技能。该项目涵盖了丰富的前端技术内容，通过一系列的实践项目和课程，帮助学员深入理解前端开发的...
Baidu-Web-technology-college-9-11:百度前端技术学院零基础学院第九到十一天源代码
03-24
在本资源"Baidu-Web-technology-college-9-11:百度前端技术学院零基础学院第九到十一天源代码"中，我们可以深入学习百度前端技术学院为初学者设计的一系列课程内容。这个压缩包包含了从第九天到第十一天的学习材料，...
MyBaiduIFECode2018:我的百度前端技术学院代码仓库
05-10
"MyBaiduIFECode2018:我的百度前端技术学院代码仓库" 这个标题表明这是一个与百度前端技术学院相关的项目，时间定位在2018年，而“我的”则提示这可能是某位学员或开发者个人的学习成果或实践代码集合。关键词“代码...
第十九天：找到那个DOM]
weixin_33912638的博客
08-15 271
第十九天：找到那个DOM] 日期 总用时 学习目标 2018.08.15 4h DOM 学习目标 掌握 JavaScript 的核心之一：DOM，能够熟悉DOM相关操作，了解JavaScript事件机制 学习内容V 第十九天：找到那个DOM MDN DOM 学习笔记 对于后台程序员很简单，就不写了 作业： 练习 待深入的知...
百度前端学院day one
weixin_43769170的博客
07-04 197
github创建hello-world repository A repository is usually used to organize a single project Branching is the way to work on different versions of a repository at one time. saved changes are called commits. Pull requests show diffs, or differences, of the con
百度前端技术学院 第三天整理（上）
chen983234416的博客
02-25 527
1、用于样式文本的css属性通常可以分为两类 答：1、字体样式：什么类型的字体         2、文本布局风格：文本间距以及其他布局功能的属性 2、color：属性设置选中元素的前景内容的颜色 (通常指文本，不过也包含一些其他东西） 3、text-decoration：放置在文本上方或者下方的线 4、font-family: 表示字体的种类：arial类型的字体可以在任何电脑上找到 ...
百度前端技术学院——第五天和第六天—三种简历
qq_39158034的博客
12-05 711
1 盒模型的概念？ CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充和实际内容 简单的可以用一张图片来表示盒模型 其中content代表包含元素真实内容的区域。通常包含背景，颜色或者图片等，位于内容边界的内部 内边距padding延伸到包围padding的边框。如果内容区域设置了背景，颜色，或者图片，这些样式会延伸到padding上 边框border扩展了内边距区域...
2017百度前端技术学院习题-01
jiejiao509的博客
04-13 704
                                      习题任务-01任务一:零基础html编码   收获:    1.基础知识的巩固(h标签,p标签,a标签,ul列表,ol列表,table表格,标签的嵌套使用)    2.小常识(空格:&amp;nbsp;  加粗:strong标签)    3.input标签的使用(type: 单选框,复选框,下拉框)    4.代码没有布局...
百度前端技术学院（一）什么是web、什么是前端
Jaya先生的博客
10-17 497
什么是web、什么是前端 详细阅读下面几篇文章中关于基本概念的解释（不需要着急看具体的内容） Web 建站技术中，HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 是什么？ W3School的HTML教程 W3School的HTML5教程 MDN Web开发入门 新知识整理： PHP：一种常见的用来写服务器脚本的语...
IFE JavaScript Mission 1 （百度前端技术学院）
Sam.LIU的博客
03-16 1073
纯个人记录，大神勿喷。任务1的题目为用户可以在输入框中输入任何内容，点击“确认填写”按钮后，用户输入的内容会显示在“您输入的值是”文字的右边。初看题目很简单，不就是用getElementById配合点击事件。遂敲下代码(部分核心)let text=documet.getElementById("aqi-input"); document.getElementById("aqi-display")....
前端小计（查找元素的练习2）——百度前端技术学院第十九天：找到那个DOM
qq_45358338的博客
08-03 136
继上一篇我的内容，百度学院给了第二要求：再次晚上前面的几个查找元素的练习，但是使用querySelector及querySelectorAll。 我发现简单了许多。。。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>IFE ECMAScrip...
DOMScripting：前端设计与JavaScript核心技术
"DOM技术是前端设计中的核心技术，它与JavaScript紧密相连，是WebDesign的重要组成部分。DOM全称为Document Object Model，即文档对象模型，它是由W3C（万维网联盟）制定的一种标准，用于表示HTML或XML文档的结构，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值