JavaScript getAttribute()

小灰灰 2020-06-01 13:17 445阅读 0赞

# JavaScript getAttribute()

getAttribute方法可以返回元素指定属性的值。

如果对应的属性不存在，那么方法返回null或者空字符串""。

特别说明：如果属性不存在，在当前标准浏览器返回null，比较老旧浏览器可能返回""。

不少朋友可能有这样的疑问，直接通过dom对象就可以获取其对应属性：

```javascript
dom.id
```

比如上述代码可以获取元素的id属性值，那为何还要使用getAttribute方法。

后面会通过代码实例进行详细的分析介绍两者之间的区别差异。

语法结构：

```javascript
element.getAttribute(attributename)
```

参数解析：

（1）.attributename：必需，属性名称。

**浏览器支持：**

（1）.IE浏览器支持此方法。

（2）.edge浏览器支持此方法。

（3）.谷歌浏览器支持此方法。

（4）.opera浏览器支持此方法。

（5）.火狐浏览器支持此方法。

（6）.safria浏览器支持此方法。

**代码实例：**

```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style type="text/css">
div{
  width:120px;
  height:60px;
  text-align:center;
  line-height:60px;
  background-color:#ccc;
}
</style>
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  obt.onclick=function(){
    odiv.innerHTML=odiv.getAttribute("id");
  }
}    
</script>
</head>
<body>
  <div id="ant"></div>
  <input type="button" id="bt" value="查看效果"/>
</body>
</html>
```

代码运行效果截图如下：
![](/images/1591017615212.png)

点击按钮可以将div元素的id属性值写入div。

```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style type="text/css">
div{
  width:120px;
  height:60px;
  text-align:center;
  line-height:60px;
  background-color:#ccc;
}
</style>
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  obt.onclick=function(){
    odiv.innerHTML=odiv.getAttribute("data-ant");
  }
}    
</script>
</head>
<body>
  <div id="ant" data-ant="蒲公英云"></div>
  <input type="button" id="bt" value="查看效果"/>
</body>
</html>
```

代码分析如下：

（1）.data-ant是符合HTML5规范的自定义属性，此方法对于非规范自定义属性同样有效。

（2）.通过getAttribute方法可以将其属性值写入div。

（3）.特别注意的是，属性名称必须写全，这一点与dataset属性不同。

**getAttribute方法与dom对象直接获取属性值区别：**

两种方式都可以获取对应属性的值，但是区别也很明显。

dom对象只能获取HTML内置标准属性的值，比如id或者title，对于自定义属性返回值为undefined。

getAttribute方法则能力更加强大，没有上述限制，代码实例如下：

```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style type="text/css">
div{
  width:120px;
  height:60px;
  text-align:center;
  background-color:#ccc;
}
</style>
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  obt.onclick=function(){
    let str="";
    str=str+odiv.getAttribute("antzone");
    str=str+"<br/>"+odiv.antzone;
    odiv.innerHTML=str;
  }
}    
</script>
</head>
<body>
  <div id="ant" antzone="蒲公英云"></div>
  <input type="button" id="bt" value="查看效果"/>
</body>
</html>
```

再来看一个两者的区别，对于style属性和事件属性，区别也非常明显：

（1）.dom.style返回的是一个对象，而getAttribute("style")返回的是CSS代码。

（2）.dom.onclick之类的返回的是一个方法，而getAttribute("onclick")返回的是代码字符串。