1.通过id来获取元素
语法:document.getElementByid(id);
作用:根据id获取元素(标签)对象
参数:id是一个字符串,区分大小写
返回值:元素对象(object) 或 null(空)
1.1演示代码
<body>
<div id="test">通过id获取元素</div>
<script>
var id=document.getElementById('test');
//返回的是一个匹配特定 ID的元素,<div id="test">通过id获取元素</div>
console.log(id);
//打印我们返回的元素对象 更好的查看里面的属性和方法
console.dir(id);
//返回元素数据类型,object
console.log(typeof id);
</script>
</body>
2.根据标签名来获取元素
语法:doucument.getElementsTagName('标签名')或者Element.getElementsByTagName('li');
作用:根据标签名获取元素对象集合
参数:标签名,字符串格式,区分大小写
返回值:元素对象集合(伪数组,数组元素是元素对象)
2.1演示代码
<body>
<ul>
<li>我是小1</li>
<li>我是小2</li>
<li>我是小3</li>
<li>我是小4</li>
<li>我是小5</li>
</ul>
<ol id="ele">
<li>我是ElementA</li>
<li>我是ElementB</li>
<li>我是ElementC</li>
<li>我是ElementD</li>
</ol>
<script>
//1.document.getElementsByTagName(‘标签名’);
var element=document.getElementsByTagName(‘li’);
//返回的是一个元素(li)对象集合,伪数组,字面的参数是元素对象
console.log(element);
//返回的是伪数组中第0个元素
//2.通过Element.getElementsByTagName(‘标签名’);方法获取元素
console.log(element[0]);
var nav=doucument.getElementById('ele');
//Element.getElementsByTagName('li');
//Element是在元素中搜索,document在整个网页中查找
var test=nav.getElementByTagName('li');
//遍历每个元素对象
for (var i=0;i<test.length;i++)
{
console.log[test[i]];
}
</script>
<body>
- 注意:getElementsByTagName()返回一个包括所有给标签名称的元素的集合。 返回的 HTML集合是动态的, 意味着它可以自动更新自己来保持和 DOM 树的同步而不用再次调用 document.getElementsByTagName() 。
3.H5新增获取元素方式
3.1 通过类名获取元素对象集合
语法:document.getElementsByClassName('类名');
用途: 通过类名获取元素对象集合
参数:类名
返回值:返回的是类的元素对象集合
兼容问题:支持ie9以上版本,包括ie9。
3.1.1 演示代码
<body>
<div class="apple">大苹果</div>
<div class="apple">小苹果</div>
<script>
var eat=document.getElementsByClassName('apple');
//返回的是一个伪数组,里面是所有相同类名的元素
console.log(eat);
</script>
</body>
3.2通过指定选择器,选择第一个元素对象
语法:document.querySelector('选择器');
用途:根据指定选择器选择第一个元素对象
参数:选择器 ,类选择器前面加.(点),id选择器前面加#号
兼容问题:支持ie9以上版本,包括ie9。
3.2.1 演示代码
<body>
<div class="banana">香蕉1</div>
<div class="banana">香蕉2</div>
<div id="zfb">1000万</div>
<ul>
<li>早上好</li>
<li>晚上好</li>
</ul>
<script>
//1.通过类选择器,选则第一个元素对象
var eat=document.querySelector('.banana');
// return: 香蕉1
console.log(eat);
//2.通过id选择器,选择第一个元素对象
var zfbs=document.querySelector('#zfb');
//return: 1000万
console.log(zfbs);
//3. 通过标签,选择第一个元素对象
var li=document.querySelector('li');
//return: 早上好
console.log(li);
</script>
</body>
3.3通过指定选择器,选择所有元素对象
语法:document.querySelectorAll('选择器');
作用:选择所有指定选择器的元素对象
参数:选择器是一个字符串,区分大小写。
兼容问题:支持ie9以上版本,包括ie9。
3.3.1 案例代码
<body>
<ul>
<li>早上好</li>
<li>中午好</li>
<li>下午好</li>
<li>晚上好</li>
</ul>
<script>
//选择所有li
var li=document.querySelectorAll('li');
//return: 返回的是伪数组,里面是所有元素对象
console.log(li);
</script>
</body>
总结:querySelector()和querySelectorAll()得区别,querySelector()是选择第一个元素对象,querySelectorAll()是选择所有相同名称元素。
4.获取特殊元素(HTML/body)
//1.获取html标签
var html=document.documentElement;
//return: <html></html>
console.log(html);
//2.获取body标签
var body=document.body;
//return: <body></body>
console.log(body);