单个对象：
var box = document.getElementsById("box");console.dir(oBox);//打印对象详情 var wrap = document.querySelector("#box .wrap"); 不兼容ie7及一下浏览器
多个对象
集合：需要通过【序号】来获取对应的标签节点，即便只有一个
document.getElementsByClassName()不兼容ie678及一下浏览器
document.getElementsByTagName()
document.getElementsByName()
document.querySelectorAll()
不兼容ie7及一下浏览器通过id直接获取 极其不推荐，但是调试好用，在控制台直接打印box就行
<div id="box"></div>
console.dir(box);通过document 直接获取 包括head title body
console.log(document.head); 获取元素document.head 给元素赋值document.title="hello";
通过类名获取 获取的时一个类数组 ie8以下不兼容
var box = document.getElementsByClassName("box");box[0]代表第一个box
通过标签获取 获取的时一个类数组
var divs = document.getElementsByTagName("div");通过name获取 获取的时一个类数组
<input type="text" name="user">
var ipts = document.ElementsByName("user");对于类名/标签名/name 我们可以先确定选择范围 在进行下一步选择
第一步 var obox = document.getxxxx
第二步 obox.getxxxxx 进行进一步查找
通过querySelector 查询选择器 ,性能极低
<div id="box">
<div class="wrap"></div>
</div>
<div class="wrap"></div>
var wrap = document.querySelector("#box .wrap");需要注意的是一定要带上选择器的标识符，id就要写# class就要写点
var wrap = document.querySelector(".wrap");此时满足条件的有两个，但是只会取第一个 <div id="box"><div class="wrap"></div></div>
var wrap = document.querySelectorAll(".wrap");
如果精准获取就document.querySelectorAll("#box .wrap")但是也得加下标 wrap[0]此时是个集合，会取所有满足条件的 wrap[1]代表取第一个
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="season">
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
</ul>
要获取夏
var mytext = document.querySelector(".season>li:nth-child(2)").innerHTML;判断时应该注意什么
- 不要使用颜色做判断
console.log(getComputedStyle(oBox)["background-color"]);console.log(oBox.style.backgroundColor);两个的结果不一样 - 不能用复合属性做判断
- 不能用url做判断 涉及到字符串的转换 和相对/绝对路径
静态获取和动态获取
静态获取
- 对于getElementById 获取到元素之后不会重新获取 可以对他进行随意更改
动态获取
- 对于getElementByTagName getElementByClassName getElementByName 元素是动态获取 获取到元素之后不会重新获取
- querySelector querySelectorAll都为静态获取
<body>
<div id="box">123</div>
</body>
<script>
var oBox = document.getElementById("box");
oBox.id = "lisi";
oBox.innerHTML = "hahaha";
</script>成功执行
var aBox = document.getElementsByClassName("mybox");
var
aBox[0].className = "lisi";
aBox[0].innerHTML= "heihei";这样没有效果
var aBox = document.getElementsByClassName("mybox");
var mybox = aBox[0];
mybox.className = "lisi";
mybox.innerHTML= "heihei";这样就可以