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

港控/mmm° 2021-11-10 09:52 467阅读 0赞

### 目录： ###

*  一、为什么要获取页面元素？
 *  二、获取元素的5种方式：
 *   *   *  1.根据id获取元素
         *  2.根据标签名获取元素
         *  3.根据name获取元素
         *  4.根据类名获取元素
         *  5.根据选择器获取元素
         *  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()