百度前端技术学院第19天

要点:

querySelector()方法返回文档中匹配指定 CSS 选择器的一个元素。

querySelectorAll()方法返回文档中匹配指定 CSS选择器的所有元素。

使用DOM方法或属性

html

<!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标签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]);}}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()

html

<!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>// 使用querySelector及querySelectorAllfunction getAllListItem() {// 返回页面中所有li标签var x = document.querySelectorAll("li");return x;}function findAllHtmlSpanInOneSection(sectionId) {// 返回某个section下所有span中内容为HTML的span标签var x = document.querySelector(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.querySelector(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]);}}return f;}function getActiveLinkContent(sectionId) {// 返回某个section下，class为active的链接中包含的文字内容var x = document.querySelector(sectionId);var y = x.querySelectorAll('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>

百度前端技术学院第19天相关推荐

百度前端技术学院—斌斌学院题库转载 cristina-guan
Cristina_Guan https://github.com/CristinaGuan 博客园首页新随笔联系订阅管理随笔 - 34 文章 - 3 评论 - 2 百度前端技术学院-斌 ...
学计算机前端技术学院,百度前端技术学院(任务)
百度前端技术学院这一期高档班的标题列表在:ife/2015_spring/taskatmaster·baidu-ife/ife·GitHub下面的高档班(趁便吐槽一下知乎的链接无法识别URL中文锚点 ...
百度前端技术学院—斌斌学院题库
任务一:零基础JavaScript编码(一) 重要说明百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决 ...
百度前端技术学院--零基础--第二天给自己做一个在线简历吧
百度前端技术学院–零基础–第二天给自己做一个在线简历吧课程目标通过简单的实践,更加清楚地了解HTML是什么,HTML5是什么.学习基本的HTML标签,理解HTML语义化概念任务描述用code ...
百度前端技术学院—-小薇学院(HTML CSS课程任务)
任务一:零基础HTML编码课程概述作业提交截止时间:04-24 重要说明百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...
百度前端技术学院—-小薇学院(HTML+CSS课程任务)
任务一:零基础HTML编码课程概述作业提交截止时间:04-24 重要说明百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...
2018百度前端技术学院第五六课编码作业
2018百度前端技术学院第五六课编码作业一.课程题目这节课给出了三份文字内容相同的简历,但是样式布局不一样.题目要求我们使用同一份HTML结构内容,三份不同的CSS代码分别实现图片所示的样式, ...
沉迷百度前端技术学院的第一天
盼啊盼,终于等到了百度前端技术学院开课的日子,很激动,终于可以跟着学啦! 第一天,主要是了解前端,包括要学什么,用书签标记的方法,还有在codepen.GitHub.CSDN上注册账号,作为一个程序员 ...
2018年百度前端技术学院学习笔记
对百度前端技术学院心仪已久,今天开始正式学习了,特地开个博客记录今后的学习学了几个月的前端了,之前也做过一些百度前端学院的练习,终于等到2018年前端学院开始,在开头先立flag,本次前端学院的任务 ...

百度前端技术学院第19天

百度前端技术学院第19天

百度前端技术学院第19天相关推荐

最新文章

热门文章