上一篇聊了一些常用的事件以及演示其如何使用，演示的时候发现一件事情，那就是DOM操作不单是得到元素，还可以修改元素的属性。现在开始如何操作其属性。
普通自带的属性
这些属性是某些标签自带的属性比如src，alt等
现在举个例子搞一波
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>测试文档</title><style>img{display: block;margin-top: 10px;width: 200px;border-radius: 100px;border: 2px solid #9a6e3a;box-shadow: 0 0 4px #ee9900;}</style></head><body><button id="b1" >选择大老婆</button><button id="b2" >选择二老婆</button><img id="laopo" src="jpg/dalaopo.jpg"><script>var eleb1=document.getElementById("b1");var eleb2=document.getElementById("b2");var src_imga=document.getElementById("laopo");eleb1.onclick=function () {src_imga.src="jpg/dalaopo.jpg";}eleb2.onclick=function () {src_imga.src="jpg/erlaopo.jpg";}</script></body></html>
表单的元素属性
当然也可以操作表单的一些属性，比如type，checked，value以及selected，disabled等
下面就演示几个属性的操作，如果类似的操作或者效果差不多就不再多次列举了，不然会托的篇幅很长。
value属性操作
其实这个前面演示过，现在再演示一下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>测试文档</title><style></style></head><body><input id="in_id" type="text" value="点击前 "><button id="b_id" >点击查看效果</button><script><!-- 两种不同的地方元素的方法，不是了为装逼和卖弄，而是强化读者记忆，以防以为只有一种方式-->var element_in=document.querySelector("#in_id");var element_b=document.getElementById("b_id");element_b.onclick=function () {element_in.value="我被点击。";}</script></body></html>
disable属性
其实这个属性的操作和上面几乎没什么区别，但是可以演示一个关键字this。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>测试文档</title><style></style></head><body><input id="in_id" type="text" value="点击前 "><button id="b_id" >点击查看效果</button><script><!-- 两种不同的地方元素的方法，不是了为装逼和卖弄，而是强化读者记忆，以防以为只有一种方式-->var element_in=document.querySelector("#in_id");var element_b=document.getElementById("b_id");element_b.onclick=function () {element_in.value="我被点击。";// 如果点击了 就不用再点击了当然也可以设置其它元素//element_b.disabled=true; 如果调用其它的标签就需要这样this.disabled=true;// 但是这个却是自己控制自己，所以可以使用this}</script></body></html>
上面这几中都是直接属性赋值，现在补充一个案例，感受一下现实的使用。
例子1
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>测试文档</title><style>*{margin: 0px;padding: 0px;box-sizing: border-box;}form{margin: 10px auto;width: 250px;}div{margin: 10px 0px;display: inline-block;width: 160px;border: 1px solid black;}legend{margin: 0px auto;}label{display: inline-block;width: 60px;text-align: center;}input{width: 100%;outline:none;border: none;}#pas{width:130px;}img{width: 16px;height: 16px;}</style></head><body><form action="#" method="post"><fieldset><legend>用户登录</legend><label for="nm">用户名:</label><div><input id="nm" type="text" value=""></div><label for="pas">密 码:</label><div><input id="pas" type="password" value=""><img id="mmimg" src="jpg/by.png"></div></fieldset></form><script>var element_mmimg=document.getElementById("mmimg");var element_pas=document.getElementById("pas");//作为一个标志参数，方便后面的逻辑判断var flag=true;element_mmimg.onclick=function(){if(flag){element_pas.type="text";element_mmimg.src="jpg/zy.png";flag=false;}else{element_pas.type="password";element_mmimg.src="jpg/by.png";flag=true;}}</script></body></html>
样式属性
当然也可以修改样式的属性，样式的属性可以修改元素打大小，颜色位置等等。
单独修改某样式属性
常用格式：
element.style.属性 // 样式参数
JS操作style样式，产生的效果是行内样式，所以再css权重中比较高。JS里面的样式采用的数驼峰命名方式比如：element.style.fontSize等。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>测试文档</title><style>*{margin: 0px;padding: 0px;box-sizing: border-box;}div{/* 这里不使用定位的话会 导致input输入数据的时候下滑*/position: relative;margin: 10px auto;width: 300px;height: 32px;}input{position:absolute;border-top-left-radius: 32px;border-bottom-left-radius: 32px;font-size: 14px;width: 212px;height:32px;border: 1px solid black;padding-left: 10px;outline: none;}button{position: relative;left:212px;line-height: 32px;margin-left: -1px;width: 88px;height: 32px;border-top-right-radius: 32px;border-bottom-right-radius: 32px;border: 1px solid red;background-color: red;}i{position: absolute;top: 4px;left: 10px;width: 24px;height: 24px;background: red url("jpg/search.png") no-repeat;background-size:24px 24px;}</style></head><body><div><input id="i_id" type="text" value="艾尔登法环"><button><i></i> 搜索</button></div><p id="er"></p><script>var element_input=document.getElementById("i_id");element_input.onfocus=function(){this.value='';// 这里可以看出单个属性就会的驼峰命名this.style.borderColor='red';}element_input.onblur=function () {if(this.value==''){this.value='艾尔登法环';}this.pointerthis.style.borderColor='black';}</script></body></html>
通过类名进行修改样式
毕竟如果修改的样式中有涉及到多个属性，那么如果用单独样式依次写出有些累赘，所以就需要通过样式的类名进行修改。
格式：
element.className // 类名操作
因为class是一个保留字，所以使用className来修改样式className会直接更改元素的类名，也就是会重新覆盖原先的类名。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>测试文档</title><style>*{margin: 0px;padding: 0px;box-sizing: border-box;}div{margin: 10px auto 0px 200px;}.message{font-size: 12px;padding: 12px;}.warn{background: url("jpg/warn.jpg") no-repeat left center;background-size: 12px 12px;color: lightskyblue;}.err{background: url("jpg/err.jpg") no-repeat left center;background-size: 12px 12px;color:red;}.sucess{background: url("jpg/sucess.jpg") no-repeat left center;background-size: 12px 12px;color:green;}input{outline: none;}</style></head><body><div><label for="pwd">设置密码:</label> <input id="pwd" type="password"> <span id ="warn" class="message warn">请输入密码</span></div><p id="er"></p><script>var ele_id=document.getElementById("pwd");var ele_wrn=document.getElementById("warn");ele_id.onfocus=function () {if (ele_id.value.length<6 || ele_id.value.length>12){// 这个后面会聊 是一个文本节点的属性ele_wrn.textContent="密码需要设置6-12位"ele_wrn.className='message err';}else {ele_wrn.textContent="密码符合要求"ele_wrn.className='message sucess';}}ele_id.onblur=function () {if (5<ele_id.value.length && ele_id.value.length<13){// 这个后面会聊 是一个文本节点的属性ele_wrn.textContent="密码符合要求"ele_wrn.className='message sucess';} else {ele_wrn.textContent="密码需要设置6-12位 请重新设置"ele_wrn.className='message err';}}</script></body></html>
属性操作
其实除了一些标签中常用的属性属性操作，有时候为了更加方便的进行操作会添加一些自定义属性。下面聊一下。
属性赋值
如果非自定义的属性，我们很容易得到比如id，name，value，type等等格式如下：
// 第一种element.属性: 可以得到自身属性，无法得到自定义属性// 第二种 element.getAttribute("属性名")：可以得到所有属性，包括自带属性，不过一般用来得到自定义属性
而自定义得到属性只能通过第二种方式。
属性修改
前面的案例都是修改自带的属性然后通过：
element.属性=""
进行赋值，当然自定义无法通过这种方式赋值，其可以如下：
element.setAttribute("属性名","属性值"); 这种方式也可以赋值自带属性，不过一般用在赋值自定义属性。
删除属性
删除属性的格式如下：
element.removeAttribute("属性名")；
这个可以直接将属性删除，自定义和自带的属性都是这样删除的。
自定义属性
自定义属性目的：是为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库当中。方便开发者使用，也减少了页面与后台过多的交互。
自定义属性的获得，上面再属性获得的时候已经说了，所以不再重复。
而自定义属性有时候定义的时候名字很难区分是自定义还是自带属性，常见的id和name这些还好说，比如一些少用的属性，偶然用一次也很难区分是自定义还是自带，所以自定义属性的h5命名就有了一些规范(如果不遵守规范也可以自定义，但是不好区分是否自定义)。
格式：
//自定义属性一般都用data-开头//在标签中定义 data-属性名=属性值;// 在js中定义element.setAttribute("data-属性名","属性值");
上面的设置如果获得自定义属性可如下：
//这样获得属性值的时候 兼容性很高element.getAttribute("data-属性名")// H5中新增的方式，兼容性就差一些 尤其ie11版本以上才支持element.dataset.属性名 //或 element.dataset["属性名"]
案例演示
下面演示的案例会涉及到一些常用的算法，在开发过程中拿起来就可以用的。
案例1 排他思想
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>测试文档</title><style>div{margin: 10px auto;text-align: center;}button{margin-left: 5px;cursor: pointer;background-color: blue;}</style></head><body><div><button>按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button></div><script><!-- -->var elements=document.getElementsByTagName("button");var len=elements.length;for (var i=0; i<len;i++){var element= elements[i];// 循环元素 将其绑定onclick事件element.onclick=function(){// 这个就是排他思想 将其它的元素如果 被点击变红就将其还原for (var j=0; j<len;j++) {var element_z = elements[j];element_z.style.backgroundColor="blue";}this.style.backgroundColor="red";}}</script></body></html>
这个使用了最经典的一个算法或者说逻辑，那就是排他思想，就在自己变化之前，先把所有变化的的对象干掉，然后再自己变。
案例2
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>测试文档</title><style>*{margin: 0px;padding: 0px;}div{margin: 10px auto;text-align: center;}table{width: 200px;margin: 0px auto;border-collapse: collapse;}td{border: 1px solid black;}thead tr{background-color: dodgerblue;}input{width: 50px;cursor: pointer;}</style></head><body><div><strong>游戏选择</strong><table><thead><tr><td><input value="all" type="checkbox"></td><td>游戏名称</td></tr></thead><tbody><tr><td><input value="艾尔登法环" type="checkbox"></td><td>艾尔登法环</td></tr><tr><td><input value="塞尔达传说荒野之息" type="checkbox"></td><td>塞尔达传说荒野之息</td></tr><tr><td><input value="消逝的光芒" type="checkbox"></td><td>消逝的光芒</td></tr><tr><td><input value="赛博2077" type="checkbox"></td><td>赛博2077</td></tr><tr><td><input value="使命召唤系列" type="checkbox"></td><td>使命召唤系列</td></tr></tbody></table></div><script><!-- 估计这样复杂使用，明白得到元素可以这样用 -->var element_thead_input=document.getElementsByTagName("thead")[0].getElementsByTagName("input")[0];var elements_tbody_input=document.getElementsByTagName("tbody")[0].getElementsByTagName("input");var len=elements_tbody_input.length;// 如果选择全部或者取消全部，所有的checkbox都会勾选或者不勾选element_thead_input.onclick=function () {for(var i=0;i<len;i++){elements_tbody_input[i].checked=this.checked;}}//绑定其它的可选for(var i=0;i<len;i++){elements_tbody_input[i].onclick=function(){element_thead_input.checked=true;for(var i=0;i<len;i++){if (!elements_tbody_input[i].checked){element_thead_input.checked=false;break;}}}}</script></body></html>
案例3 自定义属性
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>测试文档</title><style>*{margin: 0px;padding: 0px;}div{width: 400px;margin: 10px auto;}li{list-style: none;float: left;padding: 10px;background-color: grey;border-bottom: 1px solid red;cursor: pointer;}.current{background-color: red;}.clearfix:after{display: block;content: "";clear: both;}.content_txt div{display: none;}</style></head><body><div class="tap clearfix"><ul><li class="current">商品介绍</li><li>规格包装</li><li>售后保障</li><li>商品评价(100w)</li></ul></div><div class="content_txt"><div class="item" style="display: block;">这个是一个神奇的产品，使用后会让脱发。</div><div class="item">一盒有五包，一包5kg，一次吃一包</div><div class="item">吃死人不包退，购买后不退</div><div class="item"><p>隔壁老王：吃了一包瞬间觉得自己头顶不觉得闷了</p><hr><p>龙傲天：瞬间觉得头顶的犄角没有毛发遮挡了</p><hr></div></div><script>var elements_li=document.getElementsByTagName("li");var elements_item=document.getElementsByClassName("item");var len=elements_li.length;for(var i=0;i<len;i++){var element_li=elements_li[i];element_li.setAttribute("data-index",i)element_li.onclick=function () {for(var j=0;j<len;j++){elements_li[j].className="";}this.className="current";for(var j=0;j<len;j++){elements_item[j].style.display="none";}elements_item[this.getAttribute("data-index")].style.display="block";}}</script></body></html>
