DOM进阶之HTMl属性操作（对象属性）
1.HTML属性操作，指的是使用JavaScript来操作一个元素的HTML属性。像下面例子中有一个input元素，指的就是操作它的id,type,value等，其他元素也类似。
<input id="btn" type="button" value="提交"/>
在JavaScript中，有两种操作HTML元素属性的方式，一种是”对象属性“，另外一种是使用”对象方法“。
涉及两种操作，
获取HTML属性值
设置HTML属性值
1.1获取HTML属性值
获取HTML元素的属性值一般是通过属性名，来找到该属性对应的值。
语法：
obj.attr
说明：
obj是元素名，一个DOM对象。所谓的DOM对象，指的是getElementById(),getElementsByTagName()等方法获取到的元素节点。
attr是属性名，对于一个对象来说，是通过"."运算符来获取它的属性值
```
<!DOCTYPE >
<html>
<head>
<title ></title>
<meta charset="utf-8" />
<script>
window.οnlοad=function()
{
var oBtn=document.getElementById("btn");
oBtn.οnclick=function()
{
alert(oBtn.id);
};
}
</script>
</head>
<body>
<input id="btn" class="myBtn" type="button" value="获取" />
</body>
</html>
```分析：
想要获得某个属性的值，首先需要使用getElementById()等方法找到这个元素节点，然后才可以获取到该属性的值。
oBtn.id=表示获取按钮的id属性值。同样的，想要获取type属性值可以写成oBtn.type,以此类推。但是如果想获取一个元素的class，写成"oBtn.class”是错误的，应该写成"oBtn.className()"
使用obj.attr这种方式，不仅可以用来获取静态HTML元素的属性值，还可以用来获取动态创建的DOM元素中的属性值。
举例：获取单选框的值
``
<!DOCTYPE >
<html>
<head>
<title ></title>
<meta charset="utf-8" />
<script>
window.οnlοad=function()
{
var oBtn=document.getElementById("btn");
var oFruit=document.getElementsByName("fruit");
oBtn.οnclick=function()
{
//使用for循环遍历所有的单选框
for(var i=0;i<oFruit.length;i++)
{
//判断当前遍历的单选框是否选中（也就是checked是否为true)
if(oFruit[i].checked)
{
alert(oFruit[i].value);
}
}
};
}
</script>
</head>
<body>
<div>
<label><input type="radio" name="fruit" value="苹果"
checked/>苹果</label>
<label><input type="radio" name="fruit" value="香蕉"
checked/>香蕉</label>
<label><input type="radio" name="fruit" value="西瓜"
checked/>西瓜</label>
</div>
<input id="btn" type="button" value="获取" />
</body>
</html>
```分析：
document.getElemensByName("fruit")表示获取所有name属性值为fruit的表单元素。getElementsByName()只限于表单元素，他获取的也是一个元素集合，也就是类数组。
举例：获取下拉列表的值
``
<!DOCTYPE >
<html>
<head>
<title ></title>
<meta charset="utf-8" />
<script>
window.οnlοad=function()
{
var oBtn=document.getElementById("btn");
var oSelect=document.getElementById("select");
oBtn.οnclick=function()
{
alert(oSelect.value);
};
}
</script>
</head>
<body>
<select id="select">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="杭州">杭州</option>
<option value="合肥">合肥</option>
</select>
<input id="btn" type="button" value="获取" />
</body>
</html>
```分析：
当用户选中哪一个option时，该option的value值就会自动变成当前的select元素的value值。其中value时传给后台处理的，而标签中的文本是给用户看的。这两个值大多时候是一个样的。
2.设置HTML属性值
设置HTML元素的属性值，同样也是通过属性名来设置的，非常简单。
语法：
obj.attr="值"
说明：
obj是元素名，他一个DOM对象，attr是属性名
举例：
```
<!DOCTYPE >
<html>
<head>
<title ></title>
<meta charset="utf-8" />
<script>
window.onload=function()
{
var oBtn=document.getElementById("btn");
oBtn.onclick=function()
{
oBtn.value="button";
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="修改" />
</body>
</html>
``` 分析：
在前面章节创建元素时，也是使用obj.attr的方式来为元素设置属性的。当然对于动态DOM来说，我们不仅可以使用obj.attr，也可以使用下一节介绍的setAttribute()方法来实现
```
<!DOCTYPE >
<html>
<head>
<title ></title>
<meta charset="utf-8" />
<script>
window.οnlοad=function()
{
var oBtn=document.getElementById("btn");
var oPic=document.getElementById("pic");
var flag=true;
oBtn.οnclick=function()
{
if(flag)
{
oPic.src="images1.png";
flag=false;
}
else{
oPic.src="images.png";
flag=true;
}
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="修改" /><br />
<img id="pic" src="images.png" />
</body>
</html>
```分析：
这里使用了一个布尔变量flag来标识两种状态，使两张图片可以来回切换。
