JavaScript属性操作（获取元素）——2018-02-24
2018-02-24 本文已影响0人
不2青年
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添加了也是可以获取到的。
③ 静态方法获取的元素可以直接使用，但是动态方法获取的元素是一个集合，在使用时必须加上指定的下标。注意：动态方法获取的不是数组而是集合，但是这个集合有数组的属性，但没有数组的一些方法。
