DOM快速入门——DOM获取元素对象的6种方式

一、为什么要获取页面元素？

例如：我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，才进行后续操作。

二、获取元素的5种方式：

1.根据id获取元素

document.getElementById(“id属性的值”)

var div = document.getElementById("main");
console.log(div);

// 获取到的数据类型 HTMLDivElement，对象都是有类型的
// HTMLDivElement <-- HTMLElement <-- Element  <-- Node  <-- EventTarget

注意：由于id名具有唯一性，部分浏览器支持直接使用id名访问元素，但不是标准方式。

2.根据标签名获取元素

document.getElementsByTagName(“标签名”);

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
  var div = divs[i];
  console.log(div);
}
//document.getElementsByTagName("标签名");返回的是一个伪数组,
//无论获取的是一个标签,还是多个标签,最终都是在数组中存储的

3.根据name获取元素

document.getElementsByName(‘name名字’)

var inputs = document.getElementsByName('hobby');
for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  console.log(input);
}

注意：该方法属于H5的方法，在IE8及以下版本都不支持该方法。

4.根据类名获取元素

document.getElementsByClassName(‘类名’)

var mains = document.getElementsByClassName('main');
for (var i = 0; i < mains.length; i++) {
  var main = mains[i];
  console.log(main);
}

注意：该方法属于H5的方法，在IE8及以下版本都不支持该方法。

5.根据选择器获取元素

var text = document.querySelector('#text');
console.log(text);

var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
  var box = boxes[i];
  console.log(box);
}

6.根据选择器的方式获取元素

querySelector(“选择器名”);----返回来的是一个元素对象
querySelectorAll(“选择器名”);----返回来的是一个伪数组,里面保存了多个的DOM对象

<input type="button" value="显示效果" id="btn"/>

<script>
var btnObj= document.querySelector("#btn");
 btnObj.onclick=function () {
     alert("哈哈哈");
 };
 </script>

三、总结：

掌握
	getElementById()
	document.getElementsByName()
	getElementsByTagName()
	

了解
	getElementsByName()
	getElementsByClassName()
	querySelector()
	querySelectorAll()