动态方法ByTagName

ById与ByTagName

区别1：ById前面就只能跟document，不能跟别的元素；ByTagName前面可以跟别的元素。

1
2
3

var oUI=document.getElementById('list');
document.getElementByTagName('li');
var aLi=oUI.getElementsByTagName('li');

区别2：ById的方法找到的是一个元素，而ByTagName方法实际上找到的是多个东西，是元素的集合，在使用TagName的时候，必须要加上中括号[],即使页面上只有一个该标签元素，其实找到的也是一个集合。也就是说以后只要见到ByTagName方法，后面必须要跟一个中括号。

html部分：

<body>
    <ul id="list">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

js部分：

window.onload = function() {
   //	var oUl = document.getElementById('list');
   var oUl = document.getElementsByTagName('ul')[0];
   var aLi = oUl.getElementsByTagName('li');

如在下例中，document.getElementByTagName找到的li，既包含了ul里面的li，又包含了ol里面的li。
html部分：

<body>
    <ul id="list">
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ol>
        <li></li>
        <li></li>
    </ol>
</body>

js部分：

1
2
3

window.onload = function() {
document.getElementsByTagName('li');
}

区别3：ById是静态方法，ByTagName是动态方法

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<script>
window.onload = function (){
	// document.title = 123;
	// document.body.innerHTML = 'abc';
	var aBtn = document.getElementsByTagName('input');
	
	// alert(aBtn.length);
	
	document.body.innerHTML = '<input type="button" value="按钮" /><input type="button" value="按钮" /><input type="button" value="按钮" />';
	
	// alert(aBtn.length);
	aBtn[0].onclick = function (){ alert(1); };
	aBtn[1].onclick = function (){ alert(1); };
	aBtn[2].onclick = function (){ alert(1); };
	
	// 重复执行某些代码
	// 每次执行的时候，有个数字在变化
};
</script>

</head>

<body>
</body>
</html>