百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

第十九天:找到那个DOM

普通

人数485人在学习该课程,有406人已经完成该课程

时间平均用时1.6

关键词JS

课程概述

作业提交截止时间:09-01

第十九天:找到那个DOM

课程目标

掌握 JavaScript 的核心之一:DOM,能够熟悉DOM相关操作,了解JavaScript事件机制

课程描述

阅读

编码

查找元素练习

<!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标签
    }

    function findAllHtmlSpanInOneSection(sectionId) {
        // 返回某个section下所有span中内容为HTML的span标签
    }

    function findListItem(sectionId, spanCont) {
        // 返回某个section下,所有所包含span内容为spanCont的LI标签
    }

    function getActiveLinkContent(sectionId) {
        // 返回某个section下,class为active的链接中包含的文字内容
    }

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

使用上诉代码,分别实现 script 标签中的几个函数。

在这个练习中仅允许使用以下 DOM 方法或属性,不得使用高级选择器

  • getElementById()
  • getElementsByTagName()
  • childNodes
  • parentNode

阅读

编码

再次晚上前面的几个查找元素的练习,但是使用querySelector及querySelectorAll

提交

把你今天觉得做得最好的代码放在Github后进行提交

总结

依然把今天的学习用时,收获,问题进行记录

下一个任务预告

明天我们继续学习 JavaScript 中 DOM 的相关知识

学员提交的作业 (-)
学员名称提交时间提交的代码预览效果评价数平均得分操作
课程优秀学习笔记
标题发布时间浏览量点赞量
如何记忆这些API2018-05-14 22:53120222
点击查看更多课程优秀笔记