1、通过ID获取元素:(静态获取)
var oDiv = document.getElementById('div1');
2、通过标签获取元素:(动态获取)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
/*
#list {} var oUl = document.getElementById('list');静态方法
li {} document.getElementsByTagName('li'); 动态方法
#list li {} var aLi = oUl.getElementsByTagName('li');
// aLi => [ li, li, li ] 元素的集合
aLi.length 3
aLi[0]
// 在用 TagName 的时候,必须要加上:[]
*/
window.onload = function (){
// var oUl = document.getElementById('list');
var oUl = document.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
// document.getElementsByTagName('li');
// alert( aLi.length );
};
</script>
</head>
<body>
<ul id="list">
<li></li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
</ol>
</body>
</html>
3、特殊标签的获取:
如果一个页面中只有一个这样的标签,那么可以这样获取该标签:
例如body、title...
document.body
document.title
......
4、静态与动态获取方法的区别:
① 通过ID来获取元素只能用document.不能用其他的,如果用tag来获取某个元素,(比如获取id=“oUl”的ul下面的li)
var oUl = document.getElementById('oUl');
var oLi = oUl.getElementsByTagName('li');
② 静态获取方法在使用时只会获取一次,如果没有获取到元素即便在获取语句的后面通过JS添加了元素进去,也不会获取到。
动态获取方法会一直尝试获取元素,直到所有的代码加载完毕,即便当时没有获取到,但是后面如果通过JS添加了也是可以获取到的。
③ 静态方法获取的元素可以直接使用,但是动态方法获取的元素是一个集合,在使用时必须加上指定的下标。注意:动态方法获取的不是数组而是集合,但是这个集合有数组的属性,但没有数组的一些方法。