<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--
使ie以IE8的模式运行
-->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
<script type="text/javascript">
/**
* 得到页面元素节点的几种方式
*/
//通过id选择器去得到
function getDom01() {
//获取一个
var div = document.getElementById("box1");
console.log(div);
}
//通过标签名得到元素
function getDom02(){
//会得到所有的 与名字相同的标签
var divs = document.getElementsByTagName("div");
console.log(divs[0]);
}
//根据名字得到
function getDom03(){
//只能得到 原生就有name属性的元素 不能是自定义的
var div = document.getElementsByName("box2");
document.getElementsByClassName("box1");
console.log(div[0]);
}
//IE7 以及以前的版本 不支持
function getDom04(){
var div = document.querySelector("#box1");
console.log(div);
}
//IE7 以及以前的版本 不支持
function getDom05(){
var span = document.querySelectorAll(".box > span");
console.log(span.length);
}
</script>
<style type="text/css">
.box{
border: 1px solid red;
450px;
height: 100px;
}
.box span{
border-left: 1px solid green;
border-right: 1px solid green;
margin: 0 10px;
padding: 0 5px;
}
</style>
</head>
<body>
<input type="button" onclick="getDom01()" value="getDom01"/>
<input type="button" onclick="getDom02()" value="getDom02"/>
<input type="button" onclick="getDom03()" value="getDom03" name="box2"/>
<input type="button" onclick="getDom04()" value="getDom04" name="box2"/>
<input type="button" onclick="getDom05()" value="getDom05" name="box2"/>
<hr/>
<div class="box" id="box1" name="box2">
<span>this is a span in div</span>
<span>this is a span in div</span>
<span>this is a span in div</span>
<span>this is a span in div</span>
</div>
</body>
</html>