javascript教程系列39-2: 元素获取的常见问题

1 定义id属性的元素,不获取直接使用

由于id名具有唯一性，部分浏览器支持直接使用id名访问元素，但不是标准方式，生产环境下不推荐使用。

2 元素是对象

获取到的元素是DOM对象 ,DOM对象也有数据类型之分

//html
<div id="box"></div>

var box = document.getElementById('box');
console.dir(box); //HTMLDivElement --> 这是div元素在DOM中的对象类型 

3 获取页面元素的其他方式

1 根据name属性获取元素 (有兼容问题,不同的浏览器实现不同)

语法: document.getElementsByName('name属性的值')

作用: 在整个文档中查找所有name属性值为传入的值的元素,将这些所有符合条件元素的存放到一个伪数组中返回出来,如果没有就返回一个空的伪数组

//html
<div class="main"></div>
    
//js
var mains = document.getElementsByClassName('main');
//返回一个伪数组
for (var i = 0; i < mains.length; i++) {
  var main = mains[i];
  console.log(main);
}

2 根据类名获取元素 (有兼容问题,ie9+支持)

 

语法: document.querySelector('选择器');

作用: 在整个文档中查找所有符合选择器值的元素,但是只返回其中的第一个元素,如果没有返回null

注意: 如果想要所有符合选择器值的元素,请使用 querySelectorAll方法

querySelectorAll返回的是一个伪数组,如果没有则返回空的伪数组

//html
<div class="element">div1</div>
<div class="element">div2</div>
<div class="element">div3</div>

//js
//在整个文档中,查找类名为element的元素,
var div = document.querySelector('.element');
console.log(div); //返回的是所有符合条件中的第一个

var divs = document.querySelectorAll('.element');
//返回的是一个伪数组, 伪数组中存储了所有符合条件的元素
for (var i = 0; i < divs.length; i++) {
  var box = divs[i];
  console.log(box);
}

4 DOM中元素可以使用的获取元素的方法

element.getElementsByTagName('标签名')

element.getElementsByClassName('类名')

element.querySelector('选择器')

element.querySelectorAll('选择器')

//以上这些方法也可以使用获取到的DOM对象调用
//使用document调用这些方法是在整个页面中查找
//使用获取到的DOM对象调用这些方法,是在当前DOM对象的里面查找


//html
<div>中国</div>
<div id="center">
    北京
    <div>昌平</div>
    <div>海淀</div>
</div>

//js
var center = document.getElementById('center');
var divs = center.getElementsTagName('div');
console.log(divs); //返回的伪数组中只有昌平和海淀