HTML DOM getAttributeNode() 方法-猿码集

HTML DOM getAttributeNode() 方法

在HTML DOM中，getAttributeNode()方法用来获取指定元素的指定属性节点。

语法

element.getAttributeNode(attributeName)

该方法需要一个参数AttributeName，表示要获取的属性名。

返回值

返回的是一个节点对象，表示指定元素的指定属性节点。

下面就来看一下具体的应用场景。

案例背景

假如有一个HTML页面，其中包含了一张图片，代码如下：

<img src="img/cat.jpg" alt="a cute cat" width="300" height="200">

现在需求变更要求，当用户鼠标移至图片上方时，页面上方显示一段文字描述图片信息。为了实现这个需求，我们需要使用getAttributeNode()方法来获取图片的alt属性值。

代码实现

首先，我们需要给图片元素添加onmouseover事件和onmouseout事件，这可以通过JavaScript来完成：

<script>
  var img = document.getElementsByTagName("img")[0];
  img.onmouseover = function() {
    // 鼠标移至图片上方时，显示图片的alt属性值
    var alt = this.getAttributeNode("alt").value;
    document.getElementById("img-info").innerText = alt;
  };
  img.onmouseout = function() {
    // 鼠标离开图片时，清空图片信息
    document.getElementById("img-info").innerText = "";
  };
</script>

上面的代码中，我们首先使用document.getElementsByTagName("img")[0]获取页面上的第一个图片元素，然后给其绑定了onmouseover事件和onmouseout事件。

当鼠标移至图片上方时，触发onmouseover事件，执行函数体中的代码。代码首先调用getAttributeNode()方法来获取图片元素的alt属性节点，再通过获取的节点对象中的value属性来获取属性值。最后将属性值赋值给id为img-info的元素的innerText，实现在页面顶部显示图片信息的功能。

当鼠标离开图片时，触发onmouseout事件，执行函数体中的代码。代码将id为img-info的元素的innerText值设为空字符串，清空图片信息。

注意事项

当获取的属性值是字符串时，可以使用getAttribute()方法来获取，这比getAttributeNode()方法更为简单。

要点回顾：

getAttributeNode()方法是HTML DOM中用于获取元素属性节点的方法；

该方法需要一个参数，表示要获取的属性名；

返回值是一个节点对象，表示指定元素的指定属性节点；

该方法的应用场景可以是当需要获取元素属性值的节点时。

总结

HTML DOM getAttributeNode()方法是获取元素属性节点的常用方法之一。在实际开发中，我们可以使用该方法来获取元素的属性值节点，并通过获取的节点对象中的value属性来获取属性值，为实现其他业务逻辑打下良好的基础。

HTML DOM getAttributeNode() 方法