操作元素属性
在DOM中，HTML属性操作是指使用JavaScript来操作一个元素的HTML属性。一个元素包含很多的属性，例如，对于一个img图片元素来说，我们可以操作它的src、title属性等；或者对于input元素来说，我们可以操作它的disabled、checked、selected属性等。接下来以案例的形式讲解如何操作常用元素属性及表单元素属性。
1. img元素的属性操作
这里我们以单击按钮操作img元素属性为例进行代码演示，示例代码如下。
1 <body>
2 <button id="flower">鲜花</button>
3 <button id="grass">四叶草</button> <br>
4 <img src="images/grass.png" alt="" title="四叶草">
5 <script>
6 // 1. 获取元素
7 var flower = document.getElementById('flower');
8 var grass = document.getElementById('grass');
9 var img = document.querySelector('img');
10 // 2. 注册事件处理程序
11 flower.onclick = function () {
12 img.src = 'images/flower.png';
13 img.title = '鲜花';
14 };
15 grass.onclick = function () {
16 img.src = 'images/grass.png';
17 img.title = '四叶草';
18 };
19 </script>
20 </body>上述代码中，第7~9行通过querySelector()方法获取元素。第11~14行代码和第15~18行代码分别为flower和grass事件源添加onclick事件，在处理程序中，通过元素对象.属性名来获取属性的值，通过“元素对象.属性名 = 值”的方式设置图片的src和title属性。
2. 表单input元素的属性操作
这里我们以单击按钮操作input表单属性为例进行代码演示，示例代码如下。
1 <body>
2 <button>按钮</button>
3 <input type="text" value="输入内容">
4 <script>
5 // 1. 获取元素
6 var btn = document.querySelector('button');
7 var input = document.querySelector('input');
8 // 2. 注册事件处理程序
9 btn.onclick = function () {
10 input.value = '被点击了！'; // 通过value来修改表单里面的值
11 this.disabled = true; // this指向的是事件函数的调用者 btn
12 };
13 </script>
14 </body>上述代码中，第6~7行通过querySelector()方法获取元素，第9~12行为btn添加onclick事件，在处理程序中，通过“元素对象.属性名=值”的方式设置input文本框的disabled和value属性。最后结果为，当单击按钮后，input的文本内容变为“被点击了！”。
点击此处
隐藏目录
隐藏目录
