HTML属性操作，指的是使用JavaScript来操作一个元素的HTML属性。像下面有一个input元素，指的就是操作它的id、type、value等，其他元素也类似。
<input id="btn" type="button" value="提交"/>
在JavaScript中，有两种操作HTML元素属性的方式：一种是使用“对象属性”；另外一种是使用“对象方法”。这一节，我们先来介绍怎么用“对象属性”方式来操作。
不管是用“对象属性”方式，还是用“对象方法”方式，都涉及以下2种操作。
- （1）获取HTML属性值
- （2）设置HTML属性值
元素操作，准确来说，操作的是“元素节点”。属性操作，准确来说，操作的是“属性节点”。对于元素操作，我们上一章已经详细介绍过了，下面来介绍一下属性操作。
一、获取HTML属性值
获取HTML元素的属性值，一般都是通过属性名，来找到该属性对应的值。
语法：
obj.attr
说明：
obj是元素名，它一个DOM对象。所谓的DOM对象，指的是getElementById()、getElementsByTagName()等方法获取到的元素节点。我们在后
面章节中说到的DOM对象，指的就是这个，一定要记住了。
attr是属性名，对于一个对象来说，当然是通过点运算符（.）来获取它的属性值。
举例：获取静态HTML中的属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = 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。至于为什么，我们在“9.5 创建元素”这一节已经说过了。
使用obj.attr这种方式，不仅可以用来获取静态HTML元素的属性值，还可以用来获取动态创建的DOM元素中的属性值，请看下面的例子。
举例：获取动态DOM中的属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
//动态创建一个按钮
var oInput = document.createElement("input");
oInput.id = "submit";
oInput.type = "button";
oInput.value = "提交";
document.body.appendChild(oInput);
//为按钮添加点击事件
oInput.onclick = function ()
{
alert(oInput.id);
};
}
</script>
</head>
<body>
</body>
</html>
浏览器预览效果如下图所示。
分析：
这里动态创建了一个按钮：。然后我们给这个动态创建出来的按钮加上点击事件，并且在点击事件中使用oInput.id来获取id属性的取值。
在实际开发中，更多情况下我们想要获取的是表单元素的值。其中获取文本框、单选按钮、复选框、下拉列表中的值，都是通过value属性来获取的。这些技巧在实际开发中用得非常多，小伙伴们认真掌握一下。
举例：获取文本框的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function ()
{
var oTxt = document.getElementById("txt");
alert(oTxt.value);
};
}
</script>
</head>
<body>
<input id="txt" type="text"/>
<input id="btn" type="button" value="获取"/>
</body>
</html>
浏览器预览效果如下图所示。
分析：
我们在文本框输入内容，然后点击【获取】按钮，就能获取文本框中的内容。oTxt.value表示通过value属性来获取值。我们可能会觉得很奇怪，文本框压根儿就没有定义一个value属性，怎么可以通过oTxt.value来获取它的值呢？其实对于单行文本框，HTML默认给它添加了一个value属性，只不过这个value属性是空的。也就是说，
<input id="txt" type="text"/>
其实等价于：
<input id="txt" type="text" value=""/>
其他表单元素也有类似的特点，都有一个默认的value值。此外对于多行文本框，同样也是通过value属性来获取内容的，我们可以自己测试一下。
举例：获取单选框的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
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);
}
}
};
}
</script>
</head>
<body>
<div>
<label><input type="radio" name="fruit" value="苹果" checked/>苹果</label>
<label><input type="radio" name="fruit" value="香蕉" />香蕉</label>
<label><input type="radio" name="fruit" value="西瓜" />西瓜</label>
</div>
<input id="btn" type="button" value="获取" />
</body>
</html>
浏览器预览效果如下图所示。
分析：
document.getElementsByName(“fruit”)表示获取所有name属性值为fruit的表单元素。getElementsByName()只限用于表单元素，它获取的也是一个元素集合，也就是类数组。
举例：获取复选框的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
var oFruit = document.getElementsByName("fruit");
var str = "";
oBtn.onclick = function ()
{
for(var i=0;i<oFruit.length;i++)
{
if(oFruit[i].checked)
{
str += oFruit[i].value;
}
}
alert(str);
};
}
</script>
</head>
<body>
<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>
</div>
<input id="btn" type="button" value="获取" />
</body>
</html>
浏览器预览效果如下图所示。
分析：
复选框是可以多选的，我们随便选中几个，然后点击“获取”按钮，就可以得到所选中复选框的值了。
举例：获取下拉菜单的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
var oSelect = document.getElementById("select");
oBtn.onclick = 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>
</select>
<input id="btn" type="button" value="获取" />
</body>
</html>
浏览器预览效果如下图所示。
分析：
在这个例子中，当我们随便选中一项，然后点击【获取】按钮，就能获取当前选中项的value值。
下拉菜单有点特殊，当用户选中哪一个option时，该option的value值就会自动变成当前select元素的value值。其中value是传给后台处理的，而标签中的文本是给用户看的。这两个值大多数时候是一样的，只是有时会不一样，这个取决于我们的开发需求。
上面我们介绍了怎么获取文本框、单选按钮、多选按钮、下拉菜单中的值，基本已经包括了所有的情况。这些技巧在实际开发中经常用到，大家要好好掌握。
二、设置HTML属性值
设置HTML元素的属性值，同样也是通过属性名来设置的，非常简单。
语法：
obj.attr = "值";
说明：
obj是元素名，它一个DOM对象，attr是属性名。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<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>
浏览器预览效果如下图所示。
分析：
可能小伙伴们对这种写法感到有一点熟悉，事实上在“9.5 创建元素”一节中，也是使用obj.attr的方式来为元素设置属性的。当然对于动态DOM来说，我们不仅可以使用obj.attr，也可以使用下一节介绍的setAttribute()方法来实现，大家可以去试一下。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
var oPic = document.getElementById("pic");
var flag = true;
oBtn.onclick = function ()
{
if (flag){
oPic.src = "img/2.png";
flag = false;
} else {
oPic.src = "img/1.png";
flag = true;
}
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="修改" /><br/>
<img id="pic" src="img/1.png"/>
</body>
</html>
默认情况下，预览效果如下图所示。
当我们点击【修改】按钮之后，预览效果如下图所示。
分析：
这里使用了一个布尔变量flag来标识两种状态，使得两张图片可以来回切换。
