如何获取页面元素
- 根据ID获取
- 根据标签名获取
- 通过H5新增的方法获取
- 特殊元素获取
根据ID获取
使用getElementByld()方法可以获取带有ID的元素对象。
语法：
var element = document.getElementById(id);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>id</title>
</head>
<body>
<div id="time">2021</div>
<script>
var timedata=document.getElementById('time');
console.log(timedata);
// console.dir(timedata) 打印返回的元素对象，更好的查看里面的属性和方法
</script>
</body>
</html>
结果演示
根据标签名获取
使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合，返回的是获取过来元素对象的集合，以伪数组的形式存储的。
语法：
document.getElementsByTagName('li')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通过标签</title>
</head>
<body>
<ul id='lb'>
<li>渣渣龙</li>
<li>渣渣龙2</li>
<li>渣渣龙</li>
<li>渣渣龙</li>
<li>渣渣龙</li>
</ul>
<script>
var lis = document.getElementsByTagName('li');
console.log(lis);
// 返回的是获取过来元素对象的集合，以伪数组的形式存储的,如果页面中没有这个元素，返回的是空的伪数组
console.log(lis[1]);
// 获取标签元素的不同方法
//通过父级元素获取
// var ul = document.getElementsByTagName('ul'); //[ul]
// console.log(ul[0].getElementsByTagName('li'));
//通过父级ID获取
// var ul = document.getElementById('lb');
// console.log(ul.getElementsByTagName('li'));
</script>
</body>
</html>
结果演示
通过H5新增的方法获取(推荐）
语法：
document.getElementsByClassName('类名') //返回集合
document.querySelector('选择器') //返回第一个元素的对象 （ 标签 .类 #选择器）
//var ip=document.querySelector('div');
document.querySelectorAll('选择器') //返回指定选择器的所有元素，和第一个getElementsByClassName一样
获取特殊元素
获取body元素
document.body;
获取html元素
document.documentElement;
自定义属性的操作
自定义属性的目的：为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中。自定义属性名字按照H5的规范，即data-名字
element.gerAttribute(‘属性’) //自己添加的属性，成为自定义属性.，和上面获取元素操作有以下区别：
- 上面写的都是获取内置属性值（元素本身自带的属性，比如src、type等）
- 而element.getAttribute(‘属性’) 主要获取自己定义的属性
<div data-zdyid="demo" data-zdy="1"></div>
<script>
var d=document.querySelector('div');
var d1=d.getAttribute('data-zdyid');//获取自定义属性
var d2=d.getAttribute('data-zdy');
//var d2=d.dataset.zdy;
d2.setAttribute('data-zdy',2); //主要针对自定义属性的设置值，设置d2里面的属性data-zdy为2。
//当然也可以修改元素自带的属性,以及可以自己新定义一个属性值
</script>
- 移除属性 d2.removeAttribute(‘zdy’);
案例
分析：
- tab栏切换有2个大的模块
- 上面的模块选项卡，点击某一个，当前底色变红色，其余不变（排他思想）修改类名
- 下面的模块内容，会跟随上面的选项卡变化，所以下面模块变化写到点击事件里面
- 下面模块显示内容与上面的选项卡一一对应，
- 核心思路：给上面的tablist里面的所有li添加自定义属性，属性值从0开始编号
- 当点击tablist里面的某个li，让模块里面对应序号里的内容显示，其余隐藏（排他思想）
<script>
// 获取元素
var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');
var items = document.querySelectorAll('.item');
// for循环绑定点击事件
for (var i = 0; i < lis.length; i++) {
// 开始给5个小li 设置索引号
lis[i].setAttribute('index', i);
lis[i].onclick = function() {
// 1. 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式
// 干掉所有人 其余的li清除 class 这个类
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
// 留下我自己
this.className = 'current';
// 2. 下面的显示内容模块
var index = this.getAttribute('index');
// console.log(index);
// 干掉所有人 让其余的item 这些div 隐藏
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
// 留下我自己 让对应的item 显示出来
items[index].style.display = 'block';
}
}
</script>
结果演示
