上一节我们在“DOM基础”学习了对元素节点的操作，这两节介绍对属性节点的操作。
属性节点操作有两种方式，一种是使用“对象属性”，另一种是“对象方法”。本节主要介绍“对象属性”的方式。
对属性节点的操作涉及两种操作，分别是获取HTML属性值和设置HTML属性值。
获取HTML属性值
用法：
obj.attr
obj即是我们上一节获取的元素节点，attr是属性名。
获取属性举例：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>获取属性title>
<script>
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
alert(oBtn.id);
}
}
script>
head>
<body>
<input type="button" id="btn1" class="btn2" value="获取属性" />
body>
html>
获取id用oBtn.id，获取class需要用oBtn.className，获取type用oBtn.type。
获取文本框值举例：
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 type="text" id="txt"/>
<input type="button" id="btn" value="获取文本框值" />
body>
html>
举例：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>获取单选框值title>
<script>
window.onload = function(){
var oBtn = document.getElementById("btn");
var oKing = document.getElementsByName("king");
oBtn.onclick = function(){
for(var i = 0;i < oKing.length;i++){
if(oKing[i].checked){
alert(oKing[i].value)
}
}
}
}
script>
head>
<body>
<div>
<label><input type="radio" name="king" value="刘德华" checked/>刘德华label>
<label><input type="radio" name="king" value="张学友" />张学友label>
<label><input type="radio" name="king" value="郭富城" />郭富城label>
<label><input type="radio" name="king" value="黎明" />黎明label>
div>
<input type="button" id="btn" 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>
select>
<input type="button" id="btn" value="获取下拉菜单的值" />
body>
html>
当用户选中一个option时候，该option的value值会成为select的value值。
设置HTML属性值
用法与获取HTML属性值的方式相同。
举例：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>设置HTML属性值title>
<script>
window.onload = function(){
var oBtn = document.getElementById("btn");
oBtn.onclick = function(){
oBtn.value = "button";
}
}
script>
head>
<body>
<input type="button" id="btn" value="获取" />
body>
html>
没有按按钮结果图
点击“获取”后
本节主要学习了使用“对象属性”对属性节点操作，最后对其总结。
获取HTML属性值
设置HTML属性值
