document的使用方法

素颜马尾好姑娘i 2021-12-11 13:09 242阅读 0赞

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）.集合是动态的，可能这一条不好理解，不用担心，后面会有代码演示。

语法结构：