JavaScript DOM–元素操作
获取元素
根据 ID 获取元素
语法: document.getElementById(id)
<div id='time'>2020-01-09</div> <script> var timer = document.getElementById('time'); console.log(timer); // 根据 ID 获取 // 查看里面的属性和方法 console.dir(timer) </script>
根据标签名获取元素
语法: document.getElementsByTagName('标签名')<ul> <li>u1</li> </ul> <ol id="ol"> <li>ol</li> </ol> <script> // 根据元素名获取 var lis = document.getElementsByTagName('li'); console.log(lis); // HTMLCollection(2) [li, li] 返回所有的 ol和ul 的 li 元素 是复数 // 可以通过ele 继续获取元素名 var ol_ele = document.getElementById('ol'); var ol_lis = ol_ele.getElementsByTagName('li'); console.log(ol_lis); // ol 下所有的li </script>
根据类名获取元素 H5 新增
语法: document.getElementsByClassName('类名')<div class="cla"></div> <script> var cla = document.getElementsByClassName('cla'); // HTMLCollection [div.cla] 返回对象集合，需要使用对象 得取第一个元素，第二个是length console.log(cla); </script>
选择器方式获取元素 H5新增
语法:
document.querySelector('选择器')
document.querySelectorAll('选择器')<div class="cla"></div> <ul> <li>1</li> <li>2</li> </ul> <script> var cla = document.querySelector('.cla'); // 返回对象元素， 如果是class 则写.类名，id 则写#id console.log(cla); var lis = document.querySelectorAll('li'); // 返回所有对象集合 console.log(lis); </script>
获取特殊元素(body, html)
document.body; // body
document.documentElement; // html事件
事件三要素
- 事件源: 触发事件的元素
- 事件类型: 什么事件 例如click点击事件
- 事件处理程序: 事件处理函数
常见的鼠标事件
鼠标事件 | 触发条件 |
onclick | 鼠标点击左键触发 |
onmouseover | 鼠标经过 |
onmouseout | 鼠标离开 |
onfocus | 获取鼠标焦点 |
onblur | 失去鼠标焦点 |
onmousemove | 鼠标移动触发 |
onmouseup | 鼠标弹起触发 |
onmousedown | 鼠标按下触发 |
操作元素
改变元素内容(设置，获取)
- ele.innerText
- ele.innerHtml
区别:
- 获取内容时: innerText去掉html标签，同时空格和换行也去掉, innerHtml 保留html标签，空格和换行
- 设置内容时: innerText不会识别html，而innerHTML会识别
<body>
<div></div>
<p>
我是文字
<span>123</span>
</p>
<script>
var div = document.querySelector('div');
div.innerHTML = '<strong>今天是：</strong>'; // 今天是：
div.innerText = '<strong>今天是：</strong>'; // <strong>今天是：</strong>
var p = document.querySelector('p');
console.log(p.innerText); // 我是文字 123
console.log(p.innerHTML);
/*
我是文字
<span>123</span>*/
</script>
</body>
元素属性操作
- 获取属性的值
元素对象.属性名
- 设置属性的值
元素对象.属性名 = 值
<script>
var ldh = document.querySelector('#ldh');
var zxy = document.querySelector('#zxy');
var img = document.querySelector('img');
// 获取元素属性的值
console.log(img.alt); // 刘德华
// 设置元素属性值
ldh.onclick = function () {
img.src = 'images/ldh.jpg';
img.title = '刘德华666'
};
zxy.onclick = function () {
img.src = 'images/zxy.jpg';
img.title = '张学友'
}
</script>
表单元素属性
- 设置表单属性值
元素对象.属性名
- 设置属性值
元素对象.属性名 = 值 表单元素中有一些属性如：disabled、checked、selected，元素对象的这些属性的值是布尔型。
<body>
<button>按钮</button>
<input type="text" value="输入内容">
<script>
var btn = document.querySelector('button');
var input = document.querySelector('input');
btn.onclick = function () {
// 获取表单属性值
console.log(input.value); // 输入内容
// 修改表达属性值
input.value = '被修改了';
this.disabled = true; // 禁用点击按钮
}
</script>
</body>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>密码显示案例</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> // 获取元素 var eye = document.querySelector('#eye'); var input = document.querySelector('input'); // 设置一个变量，后面判断密码显示和隐藏用 var falg = 0; eye.onclick = function () { if (falg == 0) { this.src = 'images/open.png'; input.type = 'text'; // 改变文本type属性 falg = 1; }else { this.src = 'images/close.png'; input.type = 'password'; falg = 0; } } </script> </body> </html>
样式属性
- style属性改变
元素对象的style属性也是一个对象！
元素对象.style.样式属性 = 值
<body>
<div></div>
<script>
var div = document.querySelector('div');
div.style.width = '200px';
div.style.backgroundColor = 'red';
</script>
</body>
- 操作className属性
元素对象.className = 值;
因为class是关键字，所有使用classNameclassName会覆盖掉原先的类名
<!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> var close = document.querySelector('.close-btn'); var box = document.querySelector('.box'); close.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"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> input { color: #999; } </style> </head> <body> <input type="text" value="手机"> <script> var input = document.querySelector('input'); input.onfocus = function () { if (this.value === '手机') { this.value = ''; // 改变元素属性值 } this.style.color = '#333' // 样式属性改变 }; input.onblur = function () { if (this.value === '') { this.value = '手机' } this.style.color = '#333' } </script> </body> </html>
<!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> 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> <div class="register"> <input type="password" class="ipt"> <p class="message">请输入6~16位密码</p> </div> <script> // 获取元素 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) { // console.log('错误'); message.className = 'message wrong'; message.innerHTML = '您输入的位数不对要求6~16位'; } else { message.className = 'message right'; message.innerHTML = '您输入的正确'; } }; </script> </body> </html>
自定义属性
- 获取属性名
- ele.属性名 (自带属性)
- ele.getAttribute(自定义属性名)
<body>
<div id="demo" index="1"> </div>
<script>
var div = document.querySelector('#demo');
// 获取属性
console.log(div.id); // demo
//获取自定义属性
console.log(div.getAttribute('index')); // 1
</script>
</body>
- 设置属性
- ele.属性名 = ‘值’ (自带属性)
- ele.setAttribute(‘属性’)
<body>
<div id="demo" > </div>
<script>
var div = document.querySelector('#demo');
// 自带属性设置
div.id = 'test';
// 自定义属性设置
div.setAttribute('index', 'ce_shi')
</script>
</body>
- 移除属性
- ele.removeAttribute(‘属性’)
<body>
<div id="demo" index="1"> </div>
<script>
var div = document.querySelector('#demo');
// 移除自定义属性
div.removeAttribute('index')
</script>
</body>
- H5自定义属性
- 自定义属性以’data-’开头命名
- H5新增ele.dataset.自定名 或者 ele.dataset[‘自定义名’] ie11 才支持
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab栏切换</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 (var i=0; i< lis.length; i++) { // 设置定义属性为index lis[i].setAttribute('index', i); // 给每个li注册点击事件 lis[i].onclick = function () { // 干掉其他人 for (var i=0; i<lis.length; i++) { lis[i].className = '' } this.className = 'current'; // 获取自定义属性 var index = this.getAttribute('index'); for (var i=0; i<items.length; i++) { items[i].style.display = 'none' } items[index].style.display = 'block' } } </script> </body> </html>
排他思想
如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：
干掉所有人，留下我自己。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>按钮</title> <style> </style> </head> <body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> <script> var btns = document.querySelectorAll('button'); for (var i=0; i < btns.length; i++) { // 注册点击事件 btns[i].onclick = function () { for (var i=0; i<btns.length; i++) { // 干掉所有人 btns[i].style.backgroundColor = '' } //留下我自己 this.style.backgroundColor = 'red' } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格变色</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> // 获取元素 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"> <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> // 获取元素 var j_cbAll = document.querySelector('#j_cbAll'); var j_tb = document.querySelector('#j_tb'); var inputs = j_tb.querySelectorAll('input'); // 全选按钮，根据id j_cbAll j_cbAll.onclick = function () { // console.log(this.checked); for (var i=0; i< inputs.length; i++) { inputs[i].checked = this.checked; } }; for (var i=0; i < inputs.length; i++) { inputs[i].onclick = function () { var flag = true; for (var i=0; i < inputs.length; i++) { // 如果变量不为真，则全选框就不为真，直接退出循环 if (!inputs[i].checked) { flag = false; break; } } j_cbAll.checked = flag; // 设置全选按钮为变量值 true or false } } </script> </body> </html>
