目录
1、使用getElementById('id名')方法获取带有id的元素对象
2、使用getElementsByTagName('标签名')方法返回带有指定标签名对象的集合
3、使用getElementsByClassName('类名')方法根据类名返回元素对象的集合
4、使用querySelector('选择器')方法根据类指定选择器返回第一个元素的对象,使用querySelectorAll('选择器')方法根据类指定选择器返回所有元素的对象
1、使用getElementById('id名')方法获取带有id的元素对象
<div id="u">用户名</div>
<script>
var t= document.getElementById('u');
console.log(t);
console.log(typeof t); //输出t的类型
</script>
2、使用getElementsByTagName('标签名')方法返回带有指定标签名对象的集合
<ul>
<li>宝塔镇河妖1</li>
<li>宝塔镇河妖2</li>
<li>宝塔镇河妖3</li>
<li>宝塔镇河妖4</li>
<li>宝塔镇河妖5</li>
</ul>
(1)返回的是获取过来元素对象的集合,以伪数组的形式存储
var a=document.getElementsByTagName('li');
console.log(a);
console.log(a[0]); //获取第一个li
//遍历数组
for (i=0;i<10;i++) {
console.log(a[i]);
}
(2)无论个数为1或10,返回的都是伪数组
(3)元素个数为0时,返回一个空的伪数组
var x=document.getElementsByTagName('a');
console.log(x);
(4)获取某个标签内部所有指定标签名的子元素(父元素必须是单个对象)
<ul>
<li>宝塔镇河妖1</li>
<li>宝塔镇河妖2</li>
<li>宝塔镇河妖3</li>
<li>宝塔镇河妖4</li>
<li>宝塔镇河妖5</li>
</ul>
<ol id="wx">
<li>吨吨吨6</li>
<li>吨吨吨7</li>
<li>吨吨吨8</li>
<li>吨吨吨9</li>
<li>吨吨吨0</li>
</ol>
//获取ol列表下的li
var ol=document.getElementById('wx');
console.log(ol.getElementsByTagName('li'));
console.log(typeof ol);
3、使用getElementsByClassName('类名')方法根据类名返回元素对象的集合
<div class="box">盒子</div>
var c=document.getElementsByClassName('box');
console.log(c);
4、使用querySelector('选择器')方法根据类指定选择器返回第一个元素的对象,使用querySelectorAll('选择器')方法根据类指定选择器返回所有元素的对象
<div id="u">用户名</div>
<div class="box">盒子</div>
var d=document.querySelector('div');
console.log(d);
var e=document.querySelector('#u');
console.log(e);
var f=document.querySelector('.box');
console.log(f);
var i=document.querySelectorAll('div');
console.log(i);
5、获取body元素
var m=document.body;
console.log(m);
console.log(typeof m);
6、获取html元素
var n=document.documentElement;
console.log(n);
console.log(typeof n);