一、获取标签的属性
1、获取标签自带的属性
// 第一种方式：元素对象.属性名// 第一步：先找到标签，第二部才是获取到该标签的属性var input = document.getElementById('user')console.log(input.value,input.type);// 更改属性值input.value="用户名"
2、自定义的属性
<input type="text" value="文本框" id="user"><div id="div_0" class="div" stuname="张三">这是一个div</div><div id="div_1" data-index="1" data-yuan="女"></div><script>// 自定义属性var div_0 = document.getElementById('div_0')// getAttribute()获取标签的属性的值(包括一些自定义属性)console.log(div_0.getAttribute('stuname'));console.log(div_0.getAttribute('class'));// setAttribute()设置属性div_0.setAttribute("stuid","1001")// attributes：获取的是标签自带的属性以及自定义属性console.log(div_0.attributes);console.log(div_0.attributes['id']);// 自定义属性：data-***// dataset：只能获取data-***的属性console.log(div_1.dataset);console.log(div_1.dataset.yuan);console.log(div_1.dataset['index']);</script>
二、DOM操作属性
案例1：密码可见
<input type="password" id="pwd"><input type="button" value="eye" id="btnEye" onclick="test()"><script>var pwd = document.getElementById('pwd');// 第一种方式：/*var eyeBtn = document.getElementById('btnEye');eyeBtn.onclick=function(){if(pwd.type=="password"){pwd.type="text"}else{pwd.type="password"}}*/// 第二种方式：function test(){if(pwd.type=="password"){pwd.type="text"}else{pwd.type="password"}}</script>
效果图：
案例2：全选与反选
<!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><style>ul{list-style: none;}</style></head><body><p><input type="checkbox" name="" id="selectAll">全选/全不选</p><hr><ul class="shop"><li><input type="checkbox" name="" id="">苹果</li><li><input type="checkbox" name="" id="">香蕉</li><li><input type="checkbox" name="" id="">葡萄</li><li><input type="checkbox" name="" id="">菠萝</li><li><input type="checkbox" name="" id="">梨</li></ul><script>var selectAll = document.querySelector('#selectAll');console.log(selectAll);// 获取所有的input标签var inputAll = document.querySelectorAll('.shop input');console.log(inputAll);selectAll.onclick=function(){// alert(selectAll.checked)// 循环遍历出ul中的所有input标签for(var i=0;i<inputAll.length;i++){// console.log(inputAll[i]);inputAll[i].checked=selectAll.checked}}// 给每一个水果选项绑定一个单击事件for(var i=0;i<inputAll.length;i++){// 绑定一个单击事件inputAll[i].onclick=function(){// alert('aa')var count = 0;//用来统计被选中的input标签的个数for(var m=0;m<inputAll.length;m++){if(inputAll[m].checked==true){count++}}// 如果count的值等于水果的个数，全选要选中if(count==inputAll.length){selectAll.checked = true}else{selectAll.checked = false}}}</script></body></html>
