### JS Attribute属性操作详解
#### 1. Attribute的定义和获取方式
Attribute属性是HTML元素的组成部分，它们描述了元素的性质和状态。在JavaScript中，我们可以通过不同的方法来获取和操作这些属性。
- 使用`attributes`属性：可以获取元素上所有的属性，并将它们作为对象来调用。但是要注意，不同浏览器对`attributes`的使用方式有所不同。比如，在IE浏览器中可以使用`()`，但在考虑到兼容性问题时，最好使用`[]`。
#### 2. 操作属性的方法
在操作属性时，通常使用的有`getAttribute`、`setAttribute`、`createAttribute`、`removeAttribute`这几个方法。它们分别用于获取属性值、设置属性值、创建新属性和删除属性。
- `getAttribute`方法：用于获取指定属性的值。例如，`document.getElementById("sss").getAttribute("value")`可以获取到id为sss的元素的value属性值。
- `setAttribute`方法：用于设置属性值。例如，`document.getElementById("sss").setAttribute("good","hello")`会为id为sss的元素设置一个名为good的属性，并赋予它hello这个值。
- `createAttribute`方法：用于创建一个新的属性。需要注意的是，在使用时不需要基于对象，即使用`document.createAttribute()`即可，而不是`document.getElementById().createAttribute()`。此外，仅定义了名字而没有使用`nodeValue`定义值时，IE和FF的处理会不同。IE会认为是undefined，而FF会认为是空字符串。
- `removeAttribute`方法：用于删除指定的属性。例如，`document.getElementById("sss").removeAttribute("good")`会删除id为sss的元素的good属性。
除了上述方法之外，还有一些针对节点操作的方法：`getAttributeNode`、`setAttributeNode`、`removeAttributeNode`，它们都是直接操作一个node节点。这些方法的操作对象是节点，因此使用时需要注意节点的特性。
#### 3. 代码示例和兼容性问题
文档中提供了几个JavaScript代码示例，展示了如何使用上述方法操作属性。
- 使用`attributes`获取属性值的示例：
```javascript
var d = document.getElementById("sss").attributes["value"];
document.write(d.name); //显示value
document.write(d.value); //显示aaa
```
- 使用`getAttribute`获取属性值的示例：
```javascript
var d = document.getElementById("sss").getAttribute("value");
document.write(d); //显示aaa
```
- 使用`setAttribute`设置属性值并显示效果的示例：
```javascript
var d = document.getElementById("sss").setAttribute("good", "hello");
alert(document.getElementById("t").innerHTML); //显示属性设置后的元素内容
```
- 使用`createAttribute`创建一个新属性但未设置具体值的示例：
```javascript
var attr = document.createAttribute('hallo');
alert(document.body.innerHTML); //显示创建属性后的页面内容
attr.nodeValue='world'; //设置属性值后
alert(document.body.innerHTML); //再次显示页面内容
```
#### 4. 注意事项
在使用上述方法时，有几个注意事项需要遵守：
- `createAttribute`在使用时不需要基于对象，直接使用`document.createAttribute()`即可。
- 在使用`setAttribute`和`createAttribute`时，避免使用name、type、value等单词，因为IE和FF对这些单词的处理可能会导致意外的结果。
- 如果使用`createAttribute`只定义了属性名而未定义具体值，不同浏览器对未定义值的处理会有所不同。FF将其视为空字符串，而IE视为undefined。
#### 5. 结语
JS属性操作是前端开发中一项基础而重要的技能，通过上述方法和注意事项，我们可以更灵活地操作网页中的元素属性，增强网页的动态交互性和功能的实现。
