按选择器查找
按选择器查找:
1. 如果只找一个:
var elem=parent.querySelector("selector");
2. 如果找多个:
var elems=parent.querySelectorAll("selector");
返回非动态集合(non-live collection):
实际存储完整数据，反复访问，也不用重新查找DOM树
优: 不会造成反复查找
笔试题: getElementsXXXX vs querySelector
1. 返回值:
getElements返回动态集合:
优: 首次查找效率高
缺: 可能造成反复查找DOM树
querySelector返回非动态集合:
优: 包含完整属性，无需反复查找DOM树
缺: 首次查找效率低
2. 易用性:
querySelector更灵活, 且更简单
getElements每次只能查找一种结果，无法设置查找条件
更繁琐
总结: jQuery中:
如果一次查找就能找到元素时，首选getElements
如果查找条件复杂时，就用querySelector
html
<!DOCTYPE HTML>
<html>
<head>
<title>1. 实现伸缩二级菜单</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/7_1.css" />
<script src="js/7_1.js"></script>
</head>
<body>
<ul class="tree">
<li>
<span class="open" >考勤管理</span>
<ul class="show">
<li>日常考勤</li>
<li>请假申请</li>
<li>加班/出差</li>
</ul>
</li>
<li><span class="closed" >信息中心</span>
<ul class="hide">
<li>通知公告</li>
<li>公司新闻</li>
<li>规章制度</li>
</ul>
</li>
<li><span class="closed" >协同办公</span>
<ul class="hide">
<li>公文流转</li>
<li>文件中心</li>
<li>内部邮件</li>
<li>即时通信</li>
<li>短信提醒</li>
</ul>
</li>
</ul>
<script src="js/7_1.js"></script>
</body>
</html>
js
//找class为tree的ul下的span，保存在spans中
var spans = document.querySelectorAll("ul.tree span");
//遍历spans中每个span
for (i = 0; i < spans.length; i++) {
//为当前span绑定单击事件为toggle
spans[i].onclick = toggle;
}
function toggle() {//定义函数toggle
if (this.className == "open") {//如果当前span的className为open
//修改当前span的className为closed
this.className = "closed";
//获取当前span的下一个兄弟，修改其class为hide
this.nextElementSibling.className = "hide";
} else {//否则
//找class为tree的ul下class为open的span
var span = document.querySelector(
"ul.tree span.open"
);
if (span) {//如果span不是null
//修改span的className为closed
span.className = "closed";
//获取span的下一个兄弟，修改其class为hide
span.nextElementSibling.className = "hide";
}
//修改当前span的className为open
this.className = "open";
//获取当前span的下一个兄弟，修改其class为show
this.nextElementSibling.className = "show";
}
}
