通过获取对象,进行操作(一般id不允许重复)
一、获取DOM对象的方法(4种):
第一种获取元素方式getElementById <object>类型
window.onload=function(){ //onload在页面加载完成后,调用该函数
var p1=document.getElementById("id");
console.log(p1);}
第二种,根据CSS名称获取,一组对象
var p2=document.getElementsByClassName("first");//一组对象,特征类似一组队列
var length=p2.length;
for (var i=0;i<length;i++) {
p2[0].className="blue";
}
第三种,根据getElementsByName 一组对象
var usernames=document.getElementsByName("username");
for (var i=0;i<usernames.length;i++) {
usernames[i].className="orange";
}
第四种 通过标签名字获取 一组对象
var ps=document.getElementsByTagName("p");
console.log(ps);
for (var i = 0; i < ps.length; i++) {
ps[i].className="blue";
}
DOM选择器扩展(获取对象):
<script type="text/javascript">
window.onload=function(){ //{//页面加载完成后,执行该函数
//以下是三种基本选择器
var obj1=document.querySelector("#c1");
console.log(obj1);
var obj2=document.querySelector(".c2");
console.log(obj2);
var obj3=document.querySelector("li");
console.log(obj3);
也支持复合选择器。
querySelector返回的是一个对象,有可能会丢失
querySelectorAll返回一组对象
var obj4=document.querySelectorAll("ul p"); //标签
console.log(obj4);
}
</script>