如何访问HTML元素的标准属性?
# 访问HTML标准属性
HTML元素是由标签以及一组属性名值对组成
## 1. HTML标准属性
* 很多HTML标签,都有一些默认属性,例如
* `<a>`: 有`href`,`target`
* `<img>`: 有 `src`,`alt`
* `<form>`: 有 `action`, `method`,`name`
* ...
* 有些属性是通用的, 绝大多数标签都支持
* `id`: 标识唯一元素
* `class`: 标识一类元素
* `title`: 元素的提示信息
* `style`: 设置元素内联样式
* 以上这些属性,可以用`HTMLElement`对象属性的方式直接访问
* 例1 `document.images[2].src = 'girl.jpg'`
* 例2: `document.getElementById('div1').color = 'red'`
--------------------------------------------------
## 2. 属性的命名规则
* 和标签一样, 属性名同样不区分大小写,但建议全部使用小写字母
* 多个单词应该采用小驼峰式, 除第一个单词外,每个单词的首字母大写
* 保留字做属性名, 需要添加前缀`html`,如`htmlFor`表示`<label>`标签`for`属性
* 保留字`class`比较特殊,做元素属性访问时,应该改为`className`
--------------------------------------------------
## 3. 属性值的类型
* `string`: 大多数属性默认都会返回字符串类型
* `boolean`: 部分表示元素状态的属性,如`checked`,`disabled`会返回布尔类型值
* `number`: 大小,位置等属性会返回数值类型,如`size`,`width`,`height`
* `object`: 主要是指`style`属性,返回`CSSStyleDeclaration`类型对象
--------------------------------------------------
## 4. 示例代码
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>访问HTML标准属性</title>
</head>
<body>
<form action="check.php" method="GET" name="login">
<label for="username" style="color:red">用户名:</label>
<input type="text" name="username" id="username" class="require" maxlength="20" size="10">
<button type="button" onclick="alert('登录成功')" disabled>登录</button>
</form>
<script>
// 获取表单对象
var login = document.getElementsByTagName('form').namedItem('login');
// 以对象属性的方式, 访问HTML元素的标准属性
// 访问form对象的标准属性: action
console.log(login.action);
// 访问form对象的标准属性: method
console.log(login.method);
// 获取label元素
var label = login.firstElementChild;
// 直接访问for属性返回undefined, 因为for是js保留字
console.log(label.for);
// 必须添加html前缀
console.log(label.htmlFor);
// 获取input元素对象
var input = login.firstElementChild.nextElementSibling;
// 直接访问class属性会返回undefined, 因为class也是js保留字
console.log(input.class);
// 与其它保留字不同, class需要转换为className
console.log(input.className);
// 标准属性无法使用delete操作符,从标签上删除
delete input.className;
// 仍然存在,删除失败
console.log(input.className);
// 事件属性的值,必须是有效的js代码或函数
var btn = document.getElementsByTagName('button').item(0);
console.log(btn.onclick);
// 常规状态下, 属性值返回的类型为: string, 字符串
console.log(btn.type);
console.log(typeof btn.type); // string
// 如果属性值为布尔值,返回布尔类型
console.log(btn.disabled); // true
console.log(typeof btn.disabled); // boolean
// 标准属性是可写的
btn.disabled = false;
console.log(input.size); // 允许显示的字符数,并不限制输入数量
console.log(typeof input.size); // 返回是'number',并非字符串
// 所以必须要用数字进行更新
input.size = 20;
// style属性返回值是一个对象: CSSStyleDeclaration
console.log(label.style);
console.log(typeof label.style); // object
// 所以style的值可看成一个属性由css样式声明,组成的对象字面量
console.log(label.style.color); // 用点语法'.'访问对象属性
</script>
</body>
</html>
```
