id document.getElementById()
tagName node.getElementsByTagName()
name document.getElementsByName() 返回数组
className document.getElementsByClassName() 返回数组
通过封装函数 简化上述的操作
封装一个函数,可以拥有上述几种获取元素节点的功能
[注]css选择器
#id 通过id获取元素节点
.class 通过className获取元素节点
tagName 通过tagname获取元素节点
name=xxx 通过name获取元素节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dom_封装函数</title>
<script type="text/javascript">
/*
id document.getElementById()
tagName node.getElementsByTagName()
name document.getElementsByName() 返回数组
className document.getElementsByClassName() 返回数组
*/
/*
通过封装函数 简化上述的操作
封装一个函数,可以拥有上述几种获取元素节点的功能
[注]css选择器
#id 通过id获取元素节点
.class 通过className获取元素节点
tagName 通过tagname获取元素节点
name=xxx 通过name获取元素节点
*/
function $(vArg) {
//通过获取css选择器第一位符号判断
switch (vArg[0]) {
case "#":
return document.getElementById(vArg.substring(1));
break;
case ".":
return elementByClassName(document,vArg.substring(1))
break;
default:
//对参数前五个字符进行判断
var str =vArg.substring(0,5);
if (str == "name=") {
return document.getElementsByName(vArg.substring(5))
} else {//tagName
return document.getElementsByTagName(vArg)
}
break;
}
}
function elementByClassName(parent,classStr) {
var nodes = parent.getElementsByTagName('*');
var result = [];
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].className == classStr) {
result.push(nodes[i]);
}
}
return result;
}
// 调用封装函数
window.onload=function(){
// alert($("#div1").innerHTML); 输出“1111”
// alert($(".box")[0].innerHTML); 输出"22222"
// alert($(".box")[1].innerHTML); 输出"33333"
// alert($("name=hello")[0].innerHTML);输出“4444”
// alert($(".box").length);输出“2222”
}
</script>
</head>
<body>
<div id="div1">1111</div>
<div class="box">22222</div>
<div class="box">3333</div>
<div name="hello">44444</div>
</body>
</html>