JS中的setAttribute与getAttribute

在JavaScript中，为网页元素添加属性、修改属性、查询属性等操作是非常常见的。其中一个重要的操作就是使用setAttribute和getAttribute方法。

setAttribute方法

setAttribute方法可以为一个元素添加一个新的属性，或者修改一个已经存在的属性。语法如下：

element.setAttribute(name, value);

其中，name为要设置的属性名称，value为这个属性的值。例如，我们可以给一个<p>标签添加一个class属性：

<p id="myP">这是一个段落</p>

var myP = document.getElementById("myP");
myP.setAttribute("class", "description");

经过上述代码操作后，该<p>标签就变为：

<p id="myP" class="description">这是一个段落</p>

如果是修改已经存在的属性，则可以直接把属性名和属性值传进去：

myP.setAttribute("id", "newID");

上述代码将会把该标签的id属性从myP修改为newID。

getAttribute方法

getAttribute方法可以获取元素的指定属性值。语法如下：

element.getAttribute(name);

其中，name为要获取的属性名称。例如，获取上面代码中myP元素的class属性：

var myP = document.getElementById("myP");
var myClass = myP.getAttribute("class");
console.log(myClass); // 输出 "description"

上述代码会把description打印到控制台中。

需要注意的是，有些属性可以通过元素的属性直接获取，比如id、title和name等，直接使用element.id或者element.title即可获取该属性的值。

总结

通过上面的介绍，我们可以发现，setAttribute方法用于为元素添加或者修改一个属性，而getAttribute方法则是用于获取元素指定属性的值。在实际开发中，这两个方法非常实用，可以方便地帮助我们处理元素的属性。