使用如下代码,分别实现 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="testone" 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>
<p class="">Some Text</p>
</div>
<div id="testtwo" 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>
<p class="">Some Text</p>
</div>
</div>
<input type="button" id="btn1" value="11" />
<input type="button" id="btn2" value="12" />
<input type="button" id="btn3" value="13" />
<script>
function getAllListItem() {
// 返回页面中所有li标签
var n = document.getElementsByTagName("li")
}
function findAllHtmlSpanInOneSection(sectionId) {
// 返回某个section下所有span中内容为HTML的span标签
var obj = document.getElementById(sectionId).getElementsByTagName("span");
var str = [];
var i = 0;
for (i = 0; i < obj.length; i++) {
if (obj[i].innerHTML == "HTML") {
str.push(obj[i].innerHTML);
}
}
alert(str);
}
function findListItem(sectionId, spanCont) {
// 返回某个section下,所有所包含span内容为spanCont的LI标签
var obj = document.getElementById(sectionId).getElementsByTagName("span");
var str = [];
var i = 0;
for (i = 0; i < obj.length; i++) {
if (obj[i].innerHTML == spanCont) {
str.push(obj[i].parentNode)
}
}
alert(str)
}
function getActiveLinkContent(sectionId) {
// 返回某个section下,class为active的链接中包含的文字内容
var obj = document.getElementById(sectionId).getElementsByClassName("active");
for (i = 0; i < obj.length; i++) {
alert(obj[i].innerHTML);
}
}
</script>
</body>
</html>