DOM 操作元素来改变元素里面的属性(黑马课程总结【侵删】)

 

4. 操作元素 

JavaScript 的 DOM 操作可以改变网页内容、结构和样式,我们可以利用 DOM 操作元素来改变元素里面的内容 、属性等。注意以下都是属性 
4.1 改变元素内容 

element.innerText 

从起始位置到终止位置的内容, 但它去除 html 标签, 同时空格和换行也会去掉 

element.innerHTML 

起始位置到终止位置的全部内容,包括 html 标签,同时保留空格和换行 

4.2 常用元素的属性操作 

1. innerText、innerHTML 改变元素内容 
2. src、href 
3. id、alt、title

案例: 分时显示不同图片,显示不同问候语 
根据不同时间,页面显示不同图片,同时显示不同的问候语。 
如果上午时间打开页面,显示上午好,显示上午的图片。 
如果下午时间打开页面,显示下午好,显示下午的图片。 
如果晚上时间打开页面,显示晚上好,显示晚上的图片。 

案例分析 
① 根据系统不同时间来判断,所以需要用到日期内置对象 ② 利用多分支语句来设置不同的图片 ③ 需要一个图片,并且根据时间修改图片,就需要用到操作元素src属性 ④ 需要一个div元素,显示不同问候语,修改元素内容即可 
 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img {
            width: 300px;
        }
    </style>
</head>

<body>
    <img src="images/s.gif" alt="">
    <div>上午好</div>
    <script>
        // 根据系统不同时间来判断,所以需要用到日期内置对象
        // 利用多分支语句来设置不同的图片
        // 需要一个图片,并且根据时间修改图片,就需要用到操作元素src属性
        // 需要一个div元素,显示不同问候语,修改元素内容即可
        // 1.获取元素
        var img = document.querySelector('img');
        var div = document.querySelector('div');
        // 2. 得到当前的小时数
        var date = new Date();
        var h = date.getHours();
        // 3. 判断小时数改变图片和文字信息
        if (h < 12) {
            img.src = 'images/s.gif';
            div.innerHTML = '亲,上午好,好好写代码';
        } else if (h < 18) {
            img.src = 'images/x.gif';
            div.innerHTML = '亲,下午好,好好写代码';
        } else {
            img.src = 'images/w.gif';
            div.innerHTML = '亲,晚上好,好好写代码';

        }
    </script>
</body>

</html>

4.3 表单元素的属性操作 

利用 DOM 可以操作如下表单元素的属性: type、value、checked、selected、disabled 

案例:仿京东显示密码 
点击按钮将密码框切换为文本框,并可以查看密码明文

案例分析 
① 核心思路:  点击眼睛按钮,把密码框类型改为文本框就可以看见里面的密码 ② 一个按钮两个状态,点击一次,切换为文本框,继续点击一次切换为密码框 ③ 算法:利用一个flag变量,来判断flag的值,如果是1 就切换为文本框,flag 设置为0,如 果是0 就切换为密码框,flag设置为1 
 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }
        
        .box input {
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }
        
        .box img {
            position: absolute;
            top: 2px;
            right: 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>
        // 1. 获取元素
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        // 2. 注册事件 处理程序
        var flag = 0;
        eye.onclick = function() {
            // 点击一次之后, flag 一定要变化
            if (flag == 0) {
                pwd.type = 'text';
                eye.src = 'images/open.png';
                flag = 1; // 赋值操作
            } else {
                pwd.type = 'password';
                eye.src = 'images/close.png';
                flag = 0;
            }

        }
    </script>
</body>

</html>

4.4 样式属性操作 

我们可以通过 JS 修改元素的大小、颜色、位置等样式。 

1. element.style     行内样式操作 
2. element.className 类名样式操作 

注意: 
1.JS 里面的样式采取驼峰命名法 比如 fontSize、 backgroundColor 
2.JS 修改 style 样式操作,产生的是行内样式,CSS 权重比较高

案例: 淘宝点击关闭二维码 
当鼠标点击二维码关闭按钮的时候,则关闭整个二维码。 

案例分析 
① 核心思路:  利用样式的显示和隐藏完成, 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">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 74px;
            height: 88px;
            border: 1px solid #ccc;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: #f40;
            /* display: block; */
        }
        
        .box img {
            width: 60px;
            margin-top: 5px;
        }
        
        .close-btn {
            position: absolute;
            top: -1px;
            left: -16px;
            width: 14px;
            height: 14px;
            border: 1px solid #ccc;
            line-height: 14px;
            font-family: Arial, Helvetica, sans-serif;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        淘宝二维码
        <img src="images/tao.png" alt="">
        <i class="close-btn">×</i>
    </div>
    <script>
        // 1. 获取元素 
        var btn = document.querySelector('.close-btn');
        var box = document.querySelector('.box');
        // 2.注册事件 程序处理
        btn.onclick = function() {
            box.style.display = 'none';
        }
    </script>
</body>

</html>

案例: 循环精灵图背景 
可以利用 for 循环设置一组元素的精灵图背景 

案例分析 
① 首先精灵图图片排列有规律的 ② 核心思路: 利用for循环  修改精灵图片的 背景位置 background-position ③ 剩下的就是考验你的数学功底了 ④ 让循环里面的 i 索引号 * 44 就是每个图片的y坐标 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        .box {
            width: 250px;
            margin: 100px auto;
        }
        
        .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>
        // 1. 获取元素 所有的小li 
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            // 让索引号 乘以 44 就是每个li 的背景y坐标  index就是我们的y坐标
            var index = i * 44;
            lis[i].style.backgroundPosition = '0 -' + index + 'px';
        }
    </script>
</body>

</html>

案例:显示隐藏文本框内容 
当鼠标点击文本框时,里面的默认文字隐藏,当鼠标离开文本框时,里面的文字显示。 

案例分析 
① 首先表单需要2个新事件,获得焦点 onfocus  失去焦点 onblur    ② 如果获得焦点, 判断表单里面内容是否为默认文字,如果是默认文字,就清空表单内容 ③ 如果失去焦点, 判断表单内容是否为空,如果为空,则表单内容改为默认文字 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        input {
            color: #999;
        }
    </style>
</head>

<body>
    <input type="text" value="手机">
    <script>
        // 1.获取元素
        var text = document.querySelector('input');
        // 2.注册事件 获得焦点事件 onfocus 
        text.onfocus = function() {
                // console.log('得到了焦点');
                if (this.value === '手机') {
                    this.value = '';
                }
                // 获得焦点需要把文本框里面的文字颜色变黑
                this.style.color = '#333';
            }
            // 3. 注册事件 失去焦点事件 onblur
        text.onblur = function() {
            // console.log('失去了焦点');
            if (this.value === '') {
                this.value = '手机';
            }
            // 失去焦点需要把文本框里面的文字颜色变浅色
            this.style.color = '#999';
        }
    </script>

</body>

</html>

4.4 样式属性操作 
我们可以通过 JS 修改元素的大小、颜色、位置等样式。 

1. element.style     行内样式操作 
2. element.className 类名样式操作 

注意: 
1. 如果样式修改较多,可以采取操作类名方式更改元素样式。  
2. class因为是个保留字,因此使用className来操作元素类名属性 
3. className 会直接更改元素的类名,会覆盖原先的类名。 

案例: 密码框格式提示错误信息 
用户如果离开密码框,里面输入个数不是6~16,则提示错误信息,否则提示输入正确信息 

案例分析 
① 首先判断的事件是表单失去焦点 onblur ② 如果输入正确则提示正确的信息颜色为绿色小图标变化 ③ 如果输入不是6到16位,则提示错误信息颜色为红色 小图标变化 ④ 因为里面变化样式较多,我们采取className修改样式 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 600px;
				margin: 100px auto;
			}
			.message{
				display: inline-block;
				font-size: 12px;
				color: #999999;
				background: url(../images/mess.png) no-repeat left center;
				padding-left: 20px;
			}
			.wrong{
				color: red;
				background: url(../images/wrong.png);
			}
		</style>
	</head>
	<body>
		<div class="register">
			<input type="password" class="ipt" />
			<p class="message">请输入6~16位密码</p>
		</div>
		<!-- ① 首先判断的事件是表单失去焦点 onblur 
				 ② 如果输入正确则提示正确的信息颜色为绿色小图标变化
		     ③ 如果输入不是6到16位,则提示错误信息颜色为红色 小图标变化 
		     ④ 因为里面变化样式较多,我们采取className修改样式 -->
			<script type="text/javascript">
				//获取元素
				var ipt = document.querySelector('.ipt');
				var message = document.querySelector('.message');
				//注册事件:失去焦点
				ipt.onblur = function(){
					//根据表单值的长度 ipt.value.length
					if(this.value.length < 6 || this.value.length > 16){
						message.className = 'message wrong';
						message.innerHTML = '您输入的位数不到6~16位'
					}else{
						message.className = 'message right';
						message.innerHTML = '您输入正确'
					}
				}
				
			</script>
	</body>
</html>

4.5 排他思想 

如果有同一组元素,我们想要某一个元素实现某种样式, 需要用到循环的排他思想算法: 
1. 所有元素全部清除样式(干掉其他人) 
2. 给当前元素设置样式 (留下我自己) 
3. 注意顺序不能颠倒,首先干掉其他人,再设置自己 


案例:百度换肤 

① 这个案例练习的是给一组元素注册事件 ② 给4个小图片利用循环注册点击事件 ③ 当我们点击了这个图片,让我们页面背景改为当前的图片 ④ 核心算法: 把当前图片的src 路径取过来,给 body 做为背景即可 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <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;
            background-color: #fff;
            width: 410px;
            padding-top: 3px;
        }
        
        .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"></li>
        <li><img src="images/2.jpg"></li>
        <li><img src="images/3.jpg"></li>
        <li><img src="images/4.jpg"></li>
    </ul>
    <script>
        // 1. 获取元素 
        var imgs = document.querySelector('.baidu').querySelectorAll('img');
        // console.log(imgs);
        // 2. 循环注册事件 
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function() {
                // this.src 就是我们点击图片的路径   images/2.jpg
                // console.log(this.src);
                // 把这个路径 this.src 给body 就可以了
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>
</body>

</html>

案例:表格隔行变色 

案例分析 
① 用到新的鼠标事件 鼠标经过 onmouseover   鼠标离开 onmouseout ② 核心思路:鼠标经过 tr 行,当前的行变背景颜色, 鼠标离开去掉当前的背景颜色 ③ 注意: 第一行(thead里面的行)不需要变换颜色,因此我们获取的是 tbody 里面的行 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }
        
        thead tr {
            height: 30px;
            background-color: skyblue;
        }
        
        tbody tr {
            height: 30px;
        }
        
        tbody td {
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }
        
        .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>
        // 1.获取元素 获取的是 tbody 里面所有的行
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        // 2. 利用循环绑定注册事件
        for (var i = 0; i < trs.length; i++) {
            // 3. 鼠标经过事件 onmouseover
            trs[i].onmouseover = function() {
                    // console.log(11);
                    this.className = 'bg';
                }
                // 4. 鼠标离开事件 onmouseout
            trs[i].onmouseout = function() {
                this.className = '';
            }
        }
    </script>
</body>

</html>

案例:表单全选取消全选案例 

业务需求: 
1. 点击上面全选复选框,下面所有的复选框都选中(全选) 
2. 再次点击全选复选框,下面所有的复选框都不中选(取消全选) 
3. 如果下面复选框全部选中,上面全选按钮就自动选中 
4. 如果下面复选框有一个没有选中,上面全选按钮就不选中 
5. 所有复选框一开始默认都没选中状态 

案例分析 
① 全选和取消全选做法:  让下面所有复选框的checked属性(选中状态) 跟随 全选按钮即可 ② 下面复选框需要全部选中, 上面全选才能选中做法: 给下面所有复选框绑定点击事件,每次点击,都 要循环查看下面所有的复选框是否有没选中的,如果有一个没选中的, 上面全选就不选中。 ③ 可以设置一个变量,来控制全选是否选中 

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }
        
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }
        
        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
        
        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
        
        td {
            font: 14px "微软雅黑";
        }
        
        tbody tr {
            background-color: #f0f0f0;
        }
        
        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

</head>

<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll" />
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPhone8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Pro</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Air</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>Apple Watch</td>
                    <td>2000</td>
                </tr>

            </tbody>
        </table>
    </div>
    <script>
        // 1. 全选和取消全选做法:  让下面所有复选框的checked属性(选中状态) 跟随 全选按钮即可
        // 获取元素
        var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框
        // 注册事件
        j_cbAll.onclick = function() {
                // this.checked 它可以得到当前复选框的选中状态如果是true 就是选中,如果是false 就是未选中
                console.log(this.checked);
                for (var i = 0; i < j_tbs.length; i++) {
                    j_tbs[i].checked = this.checked;
                }
            }
            // 2. 下面复选框需要全部选中, 上面全选才能选中做法: 给下面所有复选框绑定点击事件,每次点击,都要循环查看下面所有的复选框是否有没选中的,如果有一个没选中的, 上面全选就不选中。
        for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].onclick = function() {
                // flag 控制全选按钮是否选中
                var flag = true;
                // 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
                for (var i = 0; i < j_tbs.length; i++) {
                    if (!j_tbs[i].checked) {
                        flag = false;
                        break; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中,剩下的就无需循环判断了
                    }
                }
                j_cbAll.checked = flag;
            }
        }
    </script>
</body>

</html>

4.6 自定义属性的操作 

1. 获取属性值 
 element.属性  获取属性值。 
 element.getAttribute('属性'); 

区别: 
 element.属性  获取内置属性值(元素本身自带的属性) 
 element.getAttribute(‘属性’);  主要获得自定义的属性 (标准) 我们程序员自定义的属性 

2. 设置属性值 
 element.属性 = ‘值’  设置内置属性值。 
 element.setAttribute('属性', '值');  
 
区别: 
 element.属性  设置内置属性值 
 element.setAttribute(‘属性’);  主要设置自定义的属性 (标准) 

3. 移除属性 
 element.removeAttribute('属性'); 

案例:tab 栏切换(重点案例) 
当鼠标点击上面相应的选项卡(tab),下面内容跟随变化 

案例分析 
① Tab栏切换有2个大的模块 ② 上的模块选项卡,点击某一个,当前这一个底色会是红色,其余不变(排他思想) 修改类 名的方式 ③ 下面的模块内容,会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。 ④ 规律:下面的模块显示内容和上面的选项卡一一对应,相匹配。 ⑤ 核心思路: 给上面的tab_list 里面的所有小li 添加自定义属性,属性值从0开始编号。 ⑥ 当我们点击tab_list 里面的某个小li,让tab_con 里面对应序号的 内容显示,其余隐藏(排他 思想) 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        .tab {
            width: 978px;
            margin: 100px auto;
        }
        
        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            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;
        }
        
        .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_con">
            <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>
        // 获取元素
        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>
</body>

</html>

4.7 H5自定义属性 

自定义属性目的:是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。 
自定义属性获取是通过getAttribute(‘属性’) 获取。 
但是有些自定义属性很容易引起歧义,不容易判断是元素的内置属性还是自定义属性。 
H5给我们新增了自定义属性: 
1. 设置H5自定义属性 
H5规定自定义属性data-开头做为属性名并且赋值。 
比如 <div data-index=“1”></div> 
或者使用 JS 设置   
element.setAttribute(‘data-index’, 2)

2. 获取H5自定义属性 
1. 兼容性获取   element.getAttribute(‘data-index’); 
2. H5新增 element.dataset.index  或者 element.dataset[‘index’]   ie 11才开始支持 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div getTime="20" data-index="2" data-list-name="andy"></div>
    <script>
        var div = document.querySelector('div');
        // console.log(div.getTime);
        console.log(div.getAttribute('getTime'));
        div.setAttribute('data-time', 20);
        console.log(div.getAttribute('data-index'));
        console.log(div.getAttribute('data-list-name'));
        // h5新增的获取自定义属性的方法 它只能获取data-开头的
        // dataset 是一个集合里面存放了所有以data开头的自定义属性
        console.log(div.dataset);
        console.log(div.dataset.index);
        console.log(div.dataset['index']);
        // 如果自定义属性里面有多个-链接的单词,我们获取的时候采取 驼峰命名法
        console.log(div.dataset.listName);
        console.log(div.dataset['listName']);
    </script>
</body>

</html>

 

  • 3
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值