DOM: 文档对象模型( Document Object Model ,简称DOM) .
DOM树
文档:一个页面就是一个文档,在DOM中使用document表示
元素:页面中的所有标签都是元素,DOM中使用element表示
节点:网页中的所有内容都是节点(标签、属性、文本、注释等) , DOM中使用node表示
DOM以上内容都看做对象。
如何获取元素:
1根据ID获取
.getElementById()
<div id="name">hellow world</div>
<script>
var name_div=document.getElementById('name');
console.log(name_div);
</script>
2通过标签名获取
.getElementsByTagName()
<ul>
<li>A1</li>
<li>A2</li>
<li>A3</li>
<li>A4</li>
</ul>
<script>
var lis=document.getElementsByTagName('li');
console.log(lis);
</script>
注意 : 返回的值是以伪数组的形式来存储的,可以通过遍历的方式 来取出所有的元素对象
<ul>
<li>A1</li>
<li>A2</li>
<li>A3</li>
<li>A4</li>
</ul>
<script>
var lis=document.getElementsByTagName('li');
console.log(lis);
for(var i = 0;i<lis.length;i++){
console.log(lis[i]);
}
3 通过类名获取
.getElementsByClassName()
getElementsByClassName <div class="box">A1</div>
<div class="box">A2</div>
<script>
var boxs=document.getElementsByClassName('box')
console.log(boxs);
4 根据指定的选择器返回第一个元素对象
.querySelector() 填入选择器
<div class="box">A1</div>
<div class="box">A2</div>
<script>
var firstbox=document.querySelector('.box');
console.log(firstbox);
这是选择了 类名为box的第一个元素对象
<ul id="nav">
<li>A1</li>
<li>A2</li>
<li>A3</li>
</ul>
<script>
var firstli=document.querySelector('#nav');
console.log(firstli);
选择了 id为 nav的第一个元素对象
5根据指定选择器返回
.querySelectorAll()
<div class="box">A1</div>
<div class="box">A2</div>
<script>
var boxs=document.querySelectorAll('.box');
console.log(boxs);
获取特殊元素
1获取body元素
document.body
var aa=document.body;
console.log(aa);
2获取HTML元素
.documentElement
var aa=document.documentElement;
console.log(aa);
我们可以写一个小案例 如何实现页面中表格的隔行变色
var tr=document.querySelectorAll('tr');
for(var i=0;i<tr.length;i++){
if(i%2==0){
tr[i].style.backgroundColor="pink";
console.log("2");
}
}
其中 div的布局就是普通的表格布局
<table>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<td>B4</td>
</tr>
</table>
我们通过
var tr=document.querySelectorAll('tr');
获取到所有的 tr元素,因为存储在一个伪数组里 所以 通过遍历,
for(var i=0;i<tr.length;i++){
}
当i的值可以被2整除后就使这个对应的tr元素的背景变色
tr[i].style.backgroundColor="pink";