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

科技2025-10-12 12

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

4.4 样式属性操作

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

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

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

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

案例分析 ① 核心思路：利用样式的显示和隐藏完成， display:none 隐藏元素 display:block 显示元素 ② 点击按钮，就让这个二维码盒子隐藏起来即可

实现代码

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

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

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

案例分析 ① 首先表单需要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>  <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 做为背景即可

案例：表格隔行变色

案例分析 ① 用到新的鼠标事件鼠标经过 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>

Processed: 0.016, SQL: 8