DOM-获取标签

 DOM : document object model 文档对象模型

 操作文档的 - html文档

 DOM要操作的是html文档

 

1.获取标签

标签名来获取

 var divs = document.getElementsByTagName('div')
 console.log(divs);

通过id名来获取

var div = document.getElementById('var')
console.log(div);

通过name属性来获取

var users = document.getElementsByName('username')
 console.log(users);

注意：通过name属性获取一般多用于表单中，表单一定要有name属性

 

通过类名获取

var boxs = document.getElementsByClassName('box')
console.log(boxs);

 

以上是比较不常用的，通用的两种获取方法：

document.querySelector(css选择器)

var div = document.querySelector('div')
var div = document.querySelector('#var')
//两者都可以获取id名为var的div
console。log （div）

满足css选择器的第一个标签

 

选择所有 :document.querySelectorAll('div')

var divs = document.querySelectorAll('div')
console.log(divs);
// 获取到的是一个集合 - 对象 - 伪数组
console.log(divs.length);
console.log(divs[0]);

操作集合 - 能取下标，能有长度，不能使用数组方法

for(var i=0;i<divs.length;i++){
     console.log(divs[i]);
 }
//遍历这个伪数组

想要document.querySelectorAll获取的div做个点击事件

for(var i=0;i<divs.length;i++){
     divs[i].onclick = function(){
         console.log(1111);
     }
 }

总结：

document.querySelector() - 在低版本ie中不兼容

document.querySelectorAll() - 在低版本ie中不兼容

document.getElementsByTagName() - 没有兼容问题

document.getElementById() - 没有兼容问题

document.getElementsByName() - 没有兼容问题

document.getElementsByClassName() - 在低版本ie中不兼容