DOM简介
1.1 什么是ＤＯＭ
页面文档对象模型，是w3c组织推荐的处理可扩展标记性语言（HTML或XML）的标准编程接口
W3C 已经定义了一系列的DOM接口，通过这些接口可以改变页面的内容、结构和样式
1.2 DOM 树
■ 文档：每个页面都是一个文档，DOM中用document表示
■ 元素：页面中的所有标签都是元素，DOM中用element表示
■ 节点：网页中所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示
DOM把以上内容都看作对象
获取元素
2.1 获取网页元素
DOM在实际开发中主要用来操作元素
有以下几种方法获取元素：
■ 根据 ID 获取
■ 根据标签名获取
■ 通过 H5 新增方法获取
■ 特殊元素获取
根据 ID 获取
getElementById（）
Document的方法 getElementById()返回一个匹配特定 ID的元素. 由于元素的 ID 在大部分情况下要求是独一无二的，这个方法自然而然地成为了一个高效查找特定元素的方法。
<body>
<div id="time">2021-3-8</div>
<script>
// 文档页面从上往下加载，所以script需在标签下方
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
// console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
console.dir(timer);
</script>
</body>
如果需要查找到那些没有ID 的元素，你可以考虑通过CSS选择器使用 querySelector()。
根据标签名获取
getElementsByTagName()
1.返回带有指定标签名的对象的集合
<body>
<div id="time">2021-3-8</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var tagname = document.getElementsByTagName('li');
console.log(tagname);
// 如果需要依次打印li中的内容，采取遍历方式
for (var i = 0; i < tagname.length; i++) {
console.log(tagname[i]);
}
</script>
</body>
2.可以根据某个元素的标签名获取
element.getElementsByTagName(‘标签名’);
3.如果页面中没有这个元素，返回的是空的伪元素的形式
4.如果页面中只有一个元素，返回的也是伪元素的形式
通过 H5 新增方法获取
getElementByClassName(‘类名’)
根据类名获取元素
querySelector(‘选择器’)
切记：必须加符号
根据指定选择器返回第一个元素对象
querySelectorAll(‘选择器’)
根据指定选择器返回所有元素对象
<body>
<div class="time">2021-3-8</div>
<div class="time">盒子</div>
<ul>
<li id="nav">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var ele = document.getElementsByClassName('time');
console.log(ele);
//返回指定选择器的第一个元素对象
var first = document.querySelector('.time');
console.log(first);
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li');
console.log(li);
var allLi = document.querySelectorAll('li');
console.log(allLi);
</script>
</body>
特殊元素获取（html、body）
document.body
获取body元素
document.documentElement
获取html元素
// 获取html、body
var bodyEle = document.body;
console.log(bodyEle);
var htmlEle = document.documentElement;
console.log(htmlEle);
事件基础
3.1 事件概述
JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为
理解：触发—响应机制
事件的组成(三要素)
1.事件源：事件被触发的对象
2.事件类型：如何触发 什么事件
3.事件处理程序：通过一个函数的赋值完成
<body>
<button id='btn'>糖糖</button>
<script>
var btn = document.getElementById('btn');
// 事件处理
btn.onclick = function(){
alert('bad');
}
</script>
</body>
3.2 执行事件的步骤
1.获取事件源
2.注册事件（绑定事件）
3.添加事件处理程序（采取函数赋值形式）
3.3 常见的鼠标事件
| 鼠标事件 | 触发条件 |
|---|---|
| onclick | 鼠标点击左键触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下键触发 |
操作元素
JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素的内容、属性等。
4.1 改变元素内容
element.innerText
从起始位置到终点位置的内容，去除html标签，同时空格和换行也会去掉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="nav">点点</button>
<div>某个时间</div>
<div>hh</div>
<script>
// 点击div时，div的内容发生变化
// 1.获取元素
var btn = document.querySelector('button');
var nav = document.querySelector('div');
btn.onclick = function () {
nav.innerText = getDate();
}
// 显示当前时间
function getDate() {
var time = new Date();
var year = time.getFullYear();
var mouth = time.getMonth() + 1;
var day = time.getDate();
var hour = time.getHours();
var minute = time.getMinutes();
var s = time.getSeconds();
var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var day = time.getDay();
return '当前时间为:' + year + '年' + mouth + '月' + day + '日' + hour + '时' + minute + '分' + s + '秒\t' + arr[day];
}
var timer = getDate();
console.log(timer);
</script>
</body>
</html>
element.innerHTML
从起始位置到终点位置的全部内容，包括html标签，同时保留空格和换行
innerText 和 innerHTML的区别
1.innerText 不识别html标签 非标准
2.innerHTML 识别html标签 W3C标准
<body>
<span></span>
<div></div>
<script>
var span = document.querySelector('span');
var div = document.querySelector('div');
// 1.innerText 不识别html标签
span.innerText = '<strong>今年是：</strong>2010-3-4';
// 2.innerHTML 识别html标签
div.innerHTML = '<strong>今年是：</strong>2010-3-4';
</script>
</body>
4.2 常用元素的属性操作
src、href
id、alt、title
分时问候案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
width: 300px;
}
</style>
</head>
<body>
<!-- 根据不同时间，页面显示不同的图片，同时显示不同的问候语
如果上午时间打开页面，显示上午好，同时显示问候语
如果下午时间打开页面，显示下午好，同时显示问候语
如果晚上时间打开页面，显示晚上好，同时显示问候语 -->
<img src="/images/s.gif" title="上午好">;
<div>hello</div>
<script>
var date = new Date();
var time = date.getHours();
var img = document.querySelector('img'); // 获取图片元素
var div = document.querySelector('div');
if (time <= 12) {
div.innerHTML = '今天也要冲啊';
img.src = "/images/s.gif";
img.title = "上午好";
}
else if (time > 12 || time < 18) {
div.innerHTML = '今天也要冲啊';
img.src = "/images/x.gif";
img.title = "下午好";
}
else {ss
div.innerHTML = '今天也要冲啊';
img.src = "/images/w.gif";
img.title = "晚上好";
}
</script>
</body>
</html>
4.3 修改表单属性
利用DOM可以操作一下表单元素的属性：
type、value、checked、selected、disabled
value
<body>
<button>点击</button>
<input type="text" value="输入内容">
<script>
// 1.获取元素
var btn = document.querySelector('button');
var input = document.querySelector('input');
// 2.注册事件 处理程序
btn.onclick = function() {
// 用innerHTML无效，这个只能用于普通盒子
// input.innerHTML = '我点击了';
input.value = '我点击了';
// 按钮点击一次后，禁用..
// btn.disabled = true;
// 谁调用函数，this指向谁
this.disabled = true;
}
</script>
</body>
仿京东显示隐藏密码案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
position: relative;
width: 400px;
border-bottom: 1px solid rgb(195, 192, 192);
margin: 100px auto;
}
.box input {
width: 370px;
height: 30px;
border: 0;
outline: none;
}
.box img {
position: absolute;
right: 2px;
top: 2px;
width: 24px;
}
</style>
</head>
<body>
<div class="box">
<label for="">
<img src="/images/close.png" alt="" id="eye">
</label>
<input type="password" name="" id="pwd">
</div>
<script>
var box = document.querySelector('div');
var input = document.querySelector('input');
var img = document.querySelector('img');
// 图片为close时点击图片，flag-1；图片为open时点击图片，flag+1。
var flag = 1;
img.onclick = function () {
// 图片为close
if (flag == 1) {
// 注册事件
input.type = 'password';
img.src = "/images/close.png";
flag = flag - 1;
} else {
input.type = 'text';
img.src = "/images/open.png";
flag = flag + 1;
}
}
</script>
</body>
</html>
4.4 修改样式属性
可以通过JS修改元素的大小、颜色、位置等样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector('div');
// 属于行内样式
div.onclick = function() {
this.style.backgroundColor = 'blue';
this.style.width = '100px';
}
</script>
</body>
</html>
仿淘宝关闭二维码案例
利用样式的显示和隐藏完成，display：none隐藏元素 display：block显示元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
position: relative;
width: 74px;
height: 88px;
font-size: 12px;
border: 1px solid #ccc;
margin: 100px auto;
text-align: center;
color: #f40;
}
.box img {
width: 60px;
margin-top: 5px;
}
.class-btn {
position: absolute;
width: 15px;
height: 15px;
line-height: 15px;
border: 1px solid #ccc;
border-right: 0;
left: -16px;
top: -1px;
font-family: Arial,Helvetica,sans-serif;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
淘宝二维码
<img src="/images/tao.png" alt="">
<i class="class-btn">x</i>
</div>
<script>
var btn = document.querySelector('.class-btn');
var box = document.querySelector('.box');
btn.onclick = function() {
box.style.display = 'none';
}
</script>
</body>
</html>
循环精灵图背景案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 250px;
margin: 100px auto;
}
li {
list-style-type: none;
}
.box li {
float: left;
width: 24px;
height: 24px;
background-color: pink;
margin: 15px;
background: url(/images/sprite.png) no-repeat;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
// 选定元素
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
index = i * 44;
lis[i].style.backgroundPosition = '0 -' + index + 'px';
}
</script>
</body>
</html>
显示隐藏文本框的内容案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input {
color: #999;
}
</style>
</head>
<body>
<input type="text" value="手机">
<script>
// 点击文本框就隐藏内容
// 1.获取元素
var hide = document.querySelector('input');
// 2.注册事件 获得焦点事件 onfocus
hide.onfocus = function () {
// console.log('得到焦点');
if (this.value == '手机') {
this.value = '';
}
// 获得焦点需要把文本框里的颜色变黑
this.style.color = '#333';
}
hide.onblur = function() {
// 失去焦点事件
if (this.value == '') {
this.value = '手机';
}
// 失去焦点变为原来颜色
this.style.color = '#999';
}
</script>
</body>
</html>
4.5 样式属性操作
我们可以通过JS修改元素的大小、颜色、位置等样式。
１.element.style 行内样式操作
2.element.className 类名样式操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
background-color: pink;
}
.change {
width: 60px;
height: 60px;
text-align: center;
line-height: 50px;
margin-top: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<div>文本</div>
<script>
var div = document.querySelector('div');
div.onclick = function() {
// className 会直接更改元素的类名，覆盖原先的类名
this.className = 'first change';
}
</script>
</body>
</html>
密码框验证信息案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 600px;
margin: 100px auto;
}
.message {
display: inline-block;
font-size: 12px;
color: #999;
background: url(/images/mess.png) no-repeat left center;
padding-left: 20px;
}
.wrong {
color: red;
background-image: url(/images/wrong.png);
}
.right {
color: green;
background-image: url(/images/right.png);
}
</style>
</head>
<body>
<!-- 用户如果离开密码框，里面输入个数不是6-16，则提示输入错误信息，否则提示输入正确信息 -->
<div class="register">
<input type="password" name="" class="ipt">
<p class="message">请输入6-16位的密码</p>
</div>
<script>
var ipt = document.querySelector('.ipt');
var message = document.querySelector('.message');
//2. 注册事件 失去焦点
ipt.onblur = function () {
// 根据表单里面值的长度 ipt.value.length
if (this.value.length < 6 || this.value.length > 16) {
// console.log('错误');
message.className = 'message wrong';
message.innerHTML = '您输入的位数不对要求6~16位';
} else {
message.className = 'message right';
message.innerHTML = '您输入的正确';
}
}
</script>
</body>
</html>
开始界面：
输入错误界面：
输入正确界面：
仿百度换皮肤案例
点击哪个图片，页面背景更改为该图片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: url(/images/1.jpg) no-repeat center top;
}
li {
list-style: none;
}
.baidu {
overflow: hidden;
margin: 100px auto;
padding-top: 3px;
width: 410px;
background-color: #fff;
}
.baidu li {
float: left;
margin: 0 1px;
cursor: pointer;
}
.baidu img {
width: 100px;
}
</style>
</head>
<body>
<ul class="baidu">
<li><img src="/images/1.jpg" alt=""></li>
<li><img src="/images/2.jpg" alt=""></li>
<li><img src="/images/3.jpg" alt=""></li>
<li><img src="/images/4.jpg" alt=""></li>
</ul>
<script>
// 选中所需元素
var imgs = document.querySelector('.baidu').querySelectorAll('img');
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function () {
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}
</script>
</body>
</html>
表格隔行变色案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
width: 800px;
margin: 100px auto;
text-align: center;
font-size: 14px;
border-collapse: collapse;
/*为表格合并边框*/
}
thead tr {
height: 30px;
background-color: skyblue;
}
tbody tr {
height: 30px;
}
tbody td {
font-size: 12px;
color: blue;
border-bottom: 1px solid #d7d7d7;
}
.bg {
background-color: pink;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>代码</th>
<th>名称</th>
<th>最新公布净值</th>
<th>累计净值</th>
<th>前单位净值</th>
<th>净值增长率</th>
</tr>
</thead>
<tbody>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
</tbody>
</table>
<script>
// 鼠标经过onmouseover 表格行变为粉色，鼠标离开onmouseout 去掉背景颜色
// 获取tbody中所有的行
var trs = document.querySelector('tbody').querySelectorAll('tr');
for (var i = 0; i < trs.length; i++) {
trs[i].onmouseover = function() {
this.className = 'bg';
}
// 鼠标离开事件
trs[i].onmouseout = function() {
// 去掉背景颜色
this.className = '';
}
}
</script>
</body>
</html>
表单全选 取消全选案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
width: 300px;
font-size: 14px;
text-align: center;
margin: 100px auto;
border-collapse: collapse;
}
thead {
background-color: skyblue;
}
th,
td {
border: 1px solid #d7d7d7;
}
thead tr {
font-size: 17px;
color: #ffffff;
height: 40px;
}
tbody tr {
height: 40px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll">
</th>
<th>商品</th>
<th>价格</th>
</tr>
</thead>
<tbody id="j_cb">
<tr>
<th><input type="checkbox"></th>
<td>iPhone 8</td>
<td>8000</td>
</tr>
<tr>
<th><input type="checkbox"></th>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<th><input type="checkbox"></th>
<td>iPad Pro</td>
<td>2000</td>
</tr>
<tr>
<th><input type="checkbox"></th>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
<script>
// 选中所有复选框
var j_cbAll = document.getElementById('j_cbAll');
var cbs = document.getElementById('j_cb').getElementsByTagName('input');
var flag = 1;
for (var i = 0; i < cbs.length;i++) {
// 点击全选按钮
j_cbAll.onclick = function() {
// 没点击按钮时，flag=1
if (flag == 1) {
for (var i = 0;i<cbs.length;i++) {
// 所有按钮选中
cbs[i].checked = this.checked;
flag = 0;
}
}else {
for (var i = 0;i<cbs.length;i++) {
cbs[i].checked = '';
flag = 1;
}
}
}
}
for (var i = 0;i<cbs.length;i++){
cbs[i].onclick = function() {
var newflag = true;
// 每次点击复选框都要检查这4个按钮是否全部选中
for (var i =0; i<cbs.length;i++) {
if (! cbs[i].checked) { // 没有全选中
newflag = false;
}
}
j_cbAll.checked = newflag;
}
}
</script>
</body>
</html>
4.6 获取自定义属性值
1.获取属性值
element.属性;
element.getAttribute(‘属性’);
两者区别
element.属性; 获取内置属性值（元素本身自带属性）
element.getAttribute(‘属性’); 获取自定义属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="id" index='1'></div>
<!-- index 是自定义属性 -->
<script>
var div = document.getElementById('id');
// 获取元素属性值
// (1) element.属性 获取内置属性值(元素本身自带的属性)
console.log(div.id);
console.log(div.index);
// (2) element.getAttribute('属性'); 主要获得自定义的属性(标准) 程序员自定义
console.log(div.getAttribute('id'));
console.log(div.getAttribute('index'));
</script>
</body>
</html>
2.设置属性值
element.属性 = ‘值’ 设置内置属性值
element.setAttribute(‘属性’,‘值’); 设置自定义属性值
div.id = '2';
div.setAttribute('index','3');
console.log(div.id);
console.log(div.getAttribute('index'));
3.移除属性
element.removeAttribute(‘属性’)
tab栏切换案例（重点）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.tab {
width: 978px;
margin: 100px auto;
}
.tab_list {
height: 39px;
border: 1px solid #999;
background-color: #f1f1f1;
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current {
background-color: #c81623;
color: #fff;
}
.item_info {
padding: 20px 0 0 20px;
}
li {
list-style-type: none;
}
.item {
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价（50000）</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_icon">
<div class="item" style="display:block;">
商品介绍模块内容
</div>
<div class="item">
规格与包装模块内容
</div>
<div class="item">
售后保障模块内容
</div>
<div class="item">
商品评价（50000）模块内容
</div>
<div class="item">
手机社区模块内容
</div>
</div>
</div>
<script>
// 点击不同盒子 li，有相对应的介绍
var tab_list = document.getElementsByClassName('tab_list');
var lis = document.getElementsByTagName('li');
var items = document.getElementsByClassName('item');
// 点击lis[i] 显示items[i]
for (var i = 0;i < lis.length;i++) {
lis[i].setAttribute('index',i);
lis[i].onclick = function() {
for (var i =0;i<lis.length;i++) {
lis[i].className = '';
}
// 留下我自己
this.className = 'current';
// 下面显示内容模块
var index = this.getAttribute('index');
console.log(index);
// 其他的item隐藏
for (var i =0;i<items.length;i++) {
items[i].style.display = 'none';
}
// 留下自己
items[index].style.display = 'block';
}
}
</script>
</body>
</html>
4.7 H5自定义属性
自定义属性目的：是为了保存和使用数据。有些数据可以保存到页面中而不用保存到数据库中
自定义属性是通过 getAttribute.(‘属性’) 获取
但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性
H5 新增了自定义属性：
1.设置自定义属性
H5规定自定义属性以data-开头作为属性名并且赋值
2.获取H5 自定义属性
■ 兼容性获取 element.getAttribute(‘data-index’);
■ H5新增element.dataset.index或者element.dataset[‘index’] ie 11 才开始支持
<body>
<div getTime='20' data-index='2' data-list-name="andy"></div>
<script>
var div = document.querySelector('div');
console.log(div.getAttribute('getTime'));
console.log(div.getAttribute('data-index'));
console.log(div.getAttribute('data-list-name'));
div.setAttribute('data-time',20);
console.log(div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['index']);
console.log(div.dataset.listName);
</script>
</body>
扫一扫
162
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
