HTM属性操作 (对象属性）
指：用JavaScript 来操作一个元素的HTML 属性
如 下面这个，操作他的id type value ......
<input id="btn" type="button" value="提交"/>
操作HTML 元素属性的方式有2种
1.使用对象属性
2.使用对象方法
不管那种方式，都会涉及到 2 种操作
获取HTML属性值 和 设置HTML 属性值
元素操作的是：“元素节点” 属性操作的是：“属性节点”
获取HTML 元素的属性值，一般通过属性名，来找到属性对应的值
语法： obj.attr
obj:元素名 是一个DOM对象 ，也就是getElementById() getElementsByTagName() 等方法获取到的元素节点 attr :是属性名 对象 是通过"." 运算符来获取它的属性值
使用obj.attr 这种方式，不仅能获取静态HTML元素的属性值，
也可以用来获取动态创建的DOM元素中的属性值
例子：获取单行文本框的值
单行文本框，HTML默认给它添加了一个value属性，只不过value属性是空的，
<input id="txt" type="text"/>
//等价于
<input id="txt" type="text" value=""/>
window.onload = function () { var oBtn = document.getElementById("btn"); oBtn.onclick = function () { var oTxt = document.getElementById("txt"); alert(oTxt.value); } } <input id="txt" type="text">
<input id="btn" type="button" value="获取" />
例子：获取单选框的值
window.onload = function () { var oBtn = document.getElementById("btn"); var oFruit = document.getElementsByName("fruit"); oBtn.onclick = function () { //for循环遍历 所有的单选框
for (var i = 0; i < oFruit.length; i++) { //判断当前遍历的单选框是否被选中，也就是checked是否为true
if (oFruit[i].checked) { alert(oFruit[i].value); } } } } <div>
<label><input type="radio" name="fruit" value="苹果" />苹果</label>
<label><input type="radio" name="fruit" value="香蕉" />香蕉</label>
<label><input type="radio" name="fruit" value="梨子" />梨子</label>
<label><input type="radio" name="fruit" value="杏子" />杏子</label>
</div>
<input id="btn" type="button" value="获取" />
例子：获取复选框的值
window.onload = function () { var oBtn = document.getElementById("btn"); var oFruit = document.getElementsByName("fruit"); var str = ""; oBtn.onclick = function () { //for循环遍历 所有的单选框
for (var i = 0; i < oFruit.length; i++) { if (oFruit[i].checked) { str += oFruit[i].value; } } alert(str); } } <div>
<label><input type="checkbox" name="fruit" value="苹果" />苹果</label>
<label><input type="checkbox" name="fruit" value="香蕉" />香蕉</label>
<label><input type="checkbox" name="fruit" value="梨子" />梨子</label>
<label><input type="checkbox" name="fruit" value="杏子" />杏子</label>
</div>
<input id="btn" type="button" value="获取" />
例子：获取下拉列表的值
下拉菜单比较特殊，当用户选中哪一个option时，该option的value值就会自动变成当前select元素的value值
value是传给后台处理的，而标签中 的文本是给用户看的，这两个值 大多数时候是一样的，但有时会不一样，这取决于开发需求
window.onload = function () { var oBtn = document.getElementById("btn"); oBtn.onclick = function () { var oSelect = document.getElementById("select"); alert(oSelect.value); } } <select id="select">
<option value="北京">北京</option>
<option value="浙江">浙江</option>
<option value="江苏">江苏</option>
<option value="南京">南京</option>
</select>
<input id="btn" type="button" value="获取" />
设置HTML属性值 (也是通过属性名来设置的)
语法： obj.attr = "值"； obj是元素名 是个DOM对象， attr 是属性名
window.onload = function () { var oBtn = document.getElementById("btn"); var oPic = document.getElementById("pic"); var flag = true; oBtn.onclick = function () { if (flag) { oPic.src = "./images/lei_1.jpg"; flag = false; } else { oPic.src = "./images/bg-1.png"; flag = true; } } } <input id="btn" type="button" value="切换" />
<img id="pic" src="./images/bg-1.png" />
window.onload = function () { var oBtn = document.getElementById("btn"); oBtn.onclick = function () { oBtn.value = "button"; } } <input id="btn" type="button" value="修改" />
HTML属性操作（对象方法） 四种方法
getAttribute() 只有一个参数， 注这个参数是用英文引号括起来的
setAttribute()
removeAttribute()
hasAttribute()
getAttribute() 获取元素的某个属性的值
语法：obj.getAttribute("attr") obj 是元素名， attr是属性名 等价于 obj.attr;
setAttribute() 方法 ，设置元素的某个属性的值
语法：obj.setAttribute("attr","值")； obj是元素名 arrt是属性名 setAttribute() 有2个参数，第一个参数：属性名， 第二个参数是：你要设置的属性值 obj.setAttribute("attr","值")； 等价于 obj.attr ="值"； getAttribute() 获取元素的某个属性的值
obj.getAttribute("attr") 等价于 obj.attr; obj.setAttribute("attr","值")； 等价于 obj.attr ="值"； 以上的是等价的，不仅可以用来获取静态HTML元素的属性值，也可获取动态DOM元素中的属性值 唯一的区别在于，获取或设置自定义属性值 的时候是有区别的 <input id="btn" type="button" value="插入" data="javascript" />
比如上面这个标签里有一个自定义的属性data,(也就是用户自己定义，而不是元素自带的) 使用obj.arr(对象属性方式是无法实现的) 会提示undefined 因为这个无法获取自定义的属性值 只能使用obj.getAttribute("attr")(对象方法来实现)
实例1： 获取固有属性值
window.onload = function () { var oBtn = document.getElementById("btn"); oBtn.onclick = function () { alert(oBtn.getAttribute("id")); } } <input id="btn" class="myBtn" type="button" value="获取" />
实例2：获取自定义属性值
window.onload = function () { var oBtn = document.getElementById("btn"); oBtn.onclick = function () { //data是自定义属性而不是元素自带的 使用obj.attr(对象属性方式)是无法实现的
//只能使用对象方法方式来实现 getAttribute("attr")
//alert(oBtn.data); //undefined
alert(oBtn.getAttribute("data")); } } <input id="btn" type="button" value="插入" data="javascript" />
实例3：设置固有属性值
window.onload = function () { var oBtn = document.getElementById("btn"); oBtn.onclick = function () { oBtn.setAttribute("value", "button"); } } <input id="btn" type="button" value="修改">
removeAttribute()方法 删除元素的某个属性
先用hasAttribute() 判断这个属性是否存在，如果存在，在去删除
语法：obj.removeAttribute("attr");//这是删除元素的某个属性的唯一方法，，用对象属性是无法实现的
hasAttribute() 方法 判断元素是否含有某个属性
语法： obj.hasAttribute("attr"); 返回的是一个布尔值， 如果包含则返回true , 如果不包含则返回false 严谨做法：先用 hasAttribute() 判断这个属性是否存在， 如果存在在使用removeAttribute("");进行删除
在实际中 removeAttribute(" ");更多的是 结合class 属性来 “整体” 控制元素的样式属性
<style> .main { color: red; font-weight: bold; } </style>
window.onload = function () { var oP = document.getElementsByTagName("p"); var oBtn_add = document.getElementById("btn_add"); var oBtn_remove = document.getElementById("btn_remove"); //添加样式
oBtn_add.onclick = function () { oP[0].className = "main"; } //删除样式
oBtn_remove.onclick = function () { //下面是删除样式的两种方法,是等价的
//oP[0].removeAttribute("class");
oP[0].className = ""; } } <p>这是一个网站</p>
<input id="btn_add" type="button" value="添加样式">
<input id="btn_remove" type="button" value="删除样式" />
<style> .main { color: red; font-weight: bold; } </style>
<script> window.onload = function () { var oP = document.getElementsByTagName("p"); if (oP[0].hasAttribute("class")) { oP[0].onclick = function () { oP[0].removeAttribute("class"); } } } <p class="main">这是一个网站</p>
总结：对象属性方式 和 对象方法方式，不仅可以操作静态HTML的属性
还可以操作动态的DOM的属性
只有“对象方法方式” 才可以操作自定义属性