JS获取和设置DOM属性 – JavaScript教程 JSDOM属性操作|JavaScript

上一章JavaScript教程请查看：JS DOM样式
在本教程中，你将学习如何在JavaScript中获取、设置和删除HTML元素的属性。
JS使用属性属性是在HTML元素的开始标记中使用的特殊单词，用于控制标记的行为或提供关于标记的附加信息。
JavaScript提供了几种添加、删除或更改HTML元素属性的方法。在下面的小节中，我们将详细了解这些方法。
获取元素的属性值getAttribute()方法用于获取元素上属性的当前值。
【JS获取和设置DOM属性 – JavaScript教程】如果指定的属性在元素上不存在，则返回null。这里有一个例子:

< a href="https://www.srcmini.com/" target="_blank" id="myLink">srcmini< /a>< script> // 通过ID属性选择元素 var link = document.getElementById("myLink"); // 获取属性值 var href = http://www.srcmini.com/link.getAttribute("href"); alert(href); // : https://www.srcmini.com/var target = link.getAttribute("target"); alert(target); // : _blank < /script>

JavaScript提供了几种不同的方式来选择页面上的元素，请查看JavaScript DOM选择器一章以了解更多关于它们的信息。
在元素上设置属性setAttribute()方法用于在指定的元素上设置属性。
如果元素上已经存在该属性，则更新该值；否则，将添加具有指定名称和值的新属性。以下示例中的JavaScript代码将向< button>元素添加一个类和一个禁用属性。

< button type="button" id="myBtn">点击< /button>< script> // 选择元素 var btn = document.getElementById("myBtn"); // 设置新属性 btn.setAttribute("class", "click-btn"); btn.setAttribute("disabled", ""); < /script>

类似地，可以使用setAttribute()方法更新或更改HTML元素上现有属性的值，以下示例中的JavaScript代码将更新锚(< a>)元素的现有href属性的值。

< a href="http://www.srcmini.com/#" id="myLink">SRCMINI< /a>< script> // 选择元素 var link = document.getElementById("myLink"); // 更改href属性值 link.setAttribute("href", "https://www.srcmini.com"); < /script>

从元素中删除属性方法的作用是：从指定的元素中删除一个属性。
下面示例中的JavaScript代码将从锚元素中删除href属性。

< a href="https://www.srcmini.com/" id="myLink">SRCMINI< /a>< script> // 选择元素 var link = document.getElementById("myLink"); // 删除href属性 link.removeAttribute("href"); < /script>