document.getElementById()//根据id属性锁定,试用于单个属性
document.getElementsByTagName()更具标签锁定试用于相同的多个标签
且返回一个伪数组
通过 var x= document.getElementsByTagName("");
var y= Array.prototype.slice.call(x) ;
转化为数组
例子:
<button id="me"> love me </button>
<p>nonono</p>
<p>nonono</p>
<p>nonono</p>
<p>nonono</p>
<p>nonono</p>
<script>
var btn =document.getElementById("me");
btn.onclick = function(){
var x= document.getElementsByTagName("p");
for(var i=0;i<x.length;i++){
x[i].innerText="ojbk";//双标签改变文本内容用innerText
}
}
插排例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>红</button>
<button>红</button>
<button>红</button>
<button>红</button>
<button>红</button>
<button>红</button>
<button>红</button>
<script>
var x= document.getElementsByTagName("button");
console.log(x);
for(var i=0;i<x.length;i++){
x[i].onclick=function(){
for (var j=0;j<x.length;j++) {
x[j].innerText="红";
}
this.innerText="绿";通过this访问当前文档元素
}
}
</script>
</body>
</html>