DOM获取元素

  • A+
所属分类:Web前端
摘要

DOM在实际开发中主要用来操作元素。获取页面中的元素可以使用以下几种方式:


DOM获取元素

1. 如何获取页面元素

DOM在实际开发中主要用来操作元素。获取页面中的元素可以使用以下几种方式:

  • 根据ID获取
  • 根据标签名获取
  • 通过HTML5新增的方法获取(推荐)
  • 特殊元素获取

2. 根据ID获取

使用getElementById()方法可以获取戴有ID的元素对象。(古老方法不太推荐)

<div id="fruit">apple</div> <script>     var eg = document.getElementById('fruit'); </script> 

3. 根据标签名获取

使用getElementByTagName()方法可以返回带有指定标签名的对象的集合。(古老方法不太推荐)

<div>apple</div> <div>banana</div> <div>watermelon</div> <script>     var eg = document.getElementByTagName('div');    // 得到的是一个对象的集合,以伪数组的形式存储     console.log(eg[0]);    // 返回第一个div对象 </script> 

注:

  1. 因为得到的是一个对象的集合,所以我们想要操作里面的元素就需要遍历
  2. 得到的元素对象是动态的
  3. 如果页面中只有一个这个元素,返回的还是伪数组的形式
  4. 如果页面中没有这个元素,返回的是空的伪数组的形式

还可以获取某个元素(父元素)内部所有指定标签名的子元素。

<ol id='fruit'>     <li>apple</li>     <li>banana</li>     <li>watermelon</li> </ol> <script>     var eg = document.getElemrntById('fruit');     console.log(eg.getElementByTagName('li'));    // 获取eg内的所有子元素 </script> 

注:父元素必须是单个对象(必须指明是哪一个元素对象),获取的时候不包括父元素自己。

4. 通过HTML5新增的方法获取

推荐使用这种方法。

// 1.根据类名返回元素对象集合 document.getElementByClassName('类名');  // 2.根据指定选择器返回第一个元素对象 document.querySelector('选择器');  // 3.根据指定选择器返回 document.querySelectorAll('选择器'); 
// 1.getElementByClassName var eg1 = document.getElementByClassName('hello');  // 2.querySelector var eg2 = document.querySelector('.world');    // 类选择器 var eg3 = document.querySelector('#good');    // id选择器  // 3.querySelectorAll var eg4 = document.querySelectorAll('li');    // 标签选择器 

5. 获取特殊元素

  1. 获取body元素

    document.body    // 返回body元素对象 
  2. 获取html元素

    document.documentElement    // 返回html元素对象