刚刚开始学前端,依照着百度前端学院学习,之前的代码都没保存,想了想辛辛苦苦敲的还是做个记录。
查找元素练习
在这个练习中仅允许使用以下 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>