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.getElementByClassNamevar eg1 = document.getElementByClassName('hello');// 2.querySelectorvar eg2 = document.querySelector('.world'); // 类选择器var eg3 = document.querySelector('#good'); // id选择器// 3.querySelectorAllvar eg4 = document.querySelectorAll('li'); // 标签选择器

5. 获取特殊元素

1. 获取body元素

   document.body // 返回body元素对象

2. 获取html元素

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

原文转载：http://www.shaoqun.com/a/485801.html

笨鸟：https://www.ikjzd.com/w/2713

vava：https://www.ikjzd.com/w/2780

wish：https://www.ikjzd.com/w/105

DOM获取元素1.如何获取页面元素DOM在实际开发中主要用来操作元素。获取页面中的元素可以使用以下几种方式：根据ID获取根据标签名获取通过HTML5新增的方法获取（推荐）特殊元素获取2.根据ID获取使用getElementById()方法可以获取戴有ID的元素对象。（古老方法不太推荐）<divid="fruit">apple</div><scrip
stylenanda官网：https://www.ikjzd.com/w/1675.html
vincent：https://www.ikjzd.com/w/1642
泰国购物注意事项 - ：http://tour.shaoqun.com/a/51475.html
重庆景区推"女人味"营销 - ：http://tour.shaoqun.com/a/13037.html
桂林黄姚古镇要门票吗？：http://tour.shaoqun.com/a/5786.html