不管是 getElementById 还是 getElementsByTagName，在传递参数的时候，并不是所有浏览器都必须区分大小写，为了防止不必要的错误和麻烦，我们必须坚持养成区分大小写的习惯。
一、通过标签名获取节点
1、getElementsByTagName()方法通过标签名获取节点，因为标签名会重复，所以返回一个对象数组 HTMLCollection(NodeList)，这个数组保存着所有相同元素名的节点列表。
<script type="text/javascript">
window.onload = function () {
if(document.getElementsByTagName){ //判断是否支持 getElementsByTagName
var li = document.getElementsByTagName(‘li‘); //参数传入一个标签名即可，传入*表示获取所有元素
alert(li); //返回的是一个数组集合HTMLCollection
alert(li.length); //返回数组的数量
alert(li[0]); // HTMLHtmlElement节点对象，这里是第一个li标签
alert(li.item(0)); //同上
//获取到了节点对象后就可以通过节点对象来获取内容等等属性
alert(li[0].tagName);
alert(li[0].innerHTML);
}else{
alert("浏览器不兼容，请更换")
}
};
</script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
2、通过通配符获取HTML中的所以标签元素，IE 浏览器在使用通配符的时候，会把文档最开始的 html 的规范声明当作第一个元素节点。火狐浏览器的firebug会算上一个，关闭掉就不算了
<script type="text/javascript">
window.onload = function () {
if(document.getElementsByTagName){ //判断是否支持 getElementsByTagName
var li = document.getElementsByTagName(‘*‘); //参数传入一个标签名即可，传入*表示获取所有元素
alert(li); //返回的是一个数组集合HTMLCollection
alert(li.length); //返回数组的数量
alert(li[0]); // 返回第一个HTMLHtmlElement节点对象
alert(li.item(0)); //同上
alert(li[0].tagName); //在IE浏览器中第一个元素是文档的声明 !
}else{
alert("浏览器不兼容，请更换")
}
};
</script>
</head>
<body>
<div id="box">测试Div</div>
</body>
</html>
3、获取body节点对象;因为在一个HTML文档中只能有一个body节点对象，所以可以这样获取：
window.onload = function () {
if(document.getElementsByTagName){ //判断是否支持 getElementsByTagName
var body = document.getElementsByTagName(‘body‘)[0]; //如果没有加[0]返回的是数组，加上[0]返回的是body节点对象
alert(body);
}else{
alert("浏览器不兼容，请更换")
}
};
4、也可以先通过getElementById获取id后，再通过getElementByTagName获取这个id下面的的指定的元素，而不是获取整个文档中的那个元素
时间： 2024-08-02 06:58:23