document的使用方法

最新推荐文章于 2024-05-01 08:14:49 发布

mikibiubiu

最新推荐文章于 2024-05-01 08:14:49 发布

阅读量5.8k

点赞数 2

文章标签： javascript基础理论

本文链接：https://blog.csdn.net/mikibiubiu/article/details/95168003

版权

document.querySelector("#box");获取单个标签,IE8以后不支持

document.getElementById(“box”);获取单个标签,所有浏览器支持

document.getElementsByClassName();获取的是集合==类数组,通过class名称获取元素ie8不支持,.

document.getElementsByTagName("*");通过标签名称获取元素集合

document.getElementsByName("");*/获取元素集合

document.querySelector("#");
document.querySelector(".");
document.querySelector(". span");
document.querySelector(".>span");
document.querySelector(“tagName”);

document.querySelectorAll(".");获取元素集合

//利用通配符兼容ie8获取所有className命名的元素集合
	/*var li = getEleByClassName("oli");
	console.log(li);
	for (var i = 0; i < li.length; i++) {
		li[i].onclick = function(){
			alert(this.innerHTML);
		}
	}
	function getEleByClassName(className){
		//通过元素名称获取所有元素集合
		var eles = document.getElementsByTagName("*");
		var arr = [];
		for (var i = 0; i < eles.length; i++) {
			//判断元素是否有以className命名的元素，
			if(eles[i].className === className){
				//把className命名的元素push到一个新数组中
				arr.push(eles[i]);
			}
		}
		//返回这个数组
		return arr;
	}*/

getElementsByTagName()

掌握一个方法的功能，可以首先从它的名称入手，getElementsByTagName由四个单词合成：

（1）.get：具有“获取”的意思。

（2）.elements：具有“元素”的意思，是复数形式，由此可以推想此方法不止获取一个元素。

（3）.by：具有“通过”的意思，表示获取元素的手段。

（4）.TagName：具有“标签名称”的意思，比如div、p或者span等

知晓名称的构成，很容易推测功能，此方法可以获取具有指定标签名的元素集合。

特别说明：

（1）.方法的返回值是一个集合，即便集合只有一个元素。

（2）.集合中元素的索引位置是从0开始。

（3）.集合是动态的，可能这一条不好理解，不用担心，后面会有代码演示。

语法结构：

[JavaScript] 纯文本查看复制代码
1
elem.getElementsByTagName(tagname)
参数解析：

（1）.tagname：必需，标签名称，比如p、div或者span等。

浏览器支持：

（1）.IE浏览器支持此方法。

（2）.edge浏览器支持此方法。

（3）.谷歌浏览器支持此方法。

（4）.opera浏览器支持此方法。

（5）.火狐浏览器支持此方法。

（6）.safria浏览器支持此方法。