使用JavaScript添加，删除，修改和检查HTML5属性

In addition to creating new tags and content, JavaScript is frequently used to modify the attributes of elements that already exist on the page: for example, to change the src attributes inside a <video> element to create a simple video playlist. This is also true of elements that are in the process of being created, i.e. adding attributes to elements so they are complete before they are added to the page.

除了创建新的标签和内容之外 ， JavaScript还经常用于修改页面上已经存在的元素的属性：例如，更改<video>元素内的src属性以创建简单的视频播放列表 。 这也是在创建的过程中元素的真实，即添加属性元素，以便他们完成他们被添加到页面之前。

Once you have identified the element(s) to work on, the methods to add, remove and modify attributes are fairly straightforward:

一旦确定了要使用的元素，添加，删除和修改属性的方法就非常简单：

使用setAttribute将属性添加到元素 (Adding an attribute to an element with setAttribute)

If we have any element, let’s say the first <video> element on the page, identified with querySelector:

如果有任何元素，假设页面上的第一个<video>元素由querySelector标识：

var video = document.querySelector("video");

…then we can add a poster attribute and its associated value to the element with setAttribute:

…然后我们可以使用setAttribute将poster属性及其关联值添加到元素中：

video.setAttribute("poster", "woke.jpg");

The result in the DOM:

DOM中的结果：

<video poster="woke.jpg" autoplay src="">

Note that setAttribute must always specify a value, even for “boolean” attributes like controls that, technically, don’t need a value at all: they only need to be present as a word. For most of those attributes, you can use the formal value of true in the context of setAttribute:

请注意， setAttribute必须始终指定一个值，即使对于controls等“布尔”属性，从技术上讲，它们根本不需要值：它们仅需要以单词形式出现。 对于大多数这些属性，可以在setAttribute的上下文中使用true的形式值：

video.setAttribute("controls", "true");

If the attribute is already present, setAttribute will modify its value to whatever is inside the method.

如果属性已经存在，则setAttribute会将其值修改为方法内部的值。

It should also be noted that most attributes can also be accessed as properties of the associated DOM object. For example, video.id will access the element’s id attribute, and can be used to check, modify or remove its associated value.

还应注意，大多数属性也可以作为关联的DOM对象的属性来访问。 例如， video.id将访问元素的id属性，并可用于检查，修改或删除其关联值。

In addition, while they are attributes, aspects of elements such as class are best handled with methods specific to them, like classList

另外，虽然它们是属性，但最好使用class特有的方法(例如classList来处理诸如class的元素

删除属性 (Removing an attribute)

Removing an attribute from an element uses, not surprisingly, the removeAttribute method. The method only requires the name of the attribute:

从元素中删除属性，毫不奇怪地使用了removeAttribute方法。 该方法仅需要属性名称：

video.removeAttribute("autoplay");

You’ll occasionally see advice to remove an attribute by setting its value to null, i.e. video.setAttribute("poster", ""). Don’t do this: it won’t always work. Use removeAttribute instead.

您偶尔会看到有关通过将属性的值设置为null来删除属性的建议，即video.setAttribute("poster", "") 。 不要这样做：它不会一直有效。 请改用removeAttribute 。

If the attribute isn’t set on the element when you attempt to remove it, JavaScript won’t throw an exception: your script will continue to run without any errors. However, you can check that an element has an attribute by using hasAttribute, which we will look at next:

如果在尝试删除元素时未在元素上设置属性，则JavaScript不会引发异常：您的脚本将继续运行而不会出现任何错误。 但是，您可以使用hasAttribute来检查元素是否具有属性，我们将在下面进行介绍：

检查元素是否具有属性 (Checking if an element has an attribute)

Before modifying an attribute, it makes sense to check that the element under inspection has that attribute present. We can do that with hasAttribute, which is usually framed as the decision of an if statement:

修改属性之前，是有意义的检查被检查的元件具有本属性。 我们可以使用hasAttribute ，通常将其定义为if语句的决定：

if (video.hasAttribute("autoplay")) {
    // take action
}

You can get a list of all the attributes applied to an element with the .attributes property, which I will discuss at length in a future article.

您可以使用.attributes属性获取应用于元素的所有属性的列表，我将在以后的文章中详细讨论。

翻译自: https://thenewcode.com/1084/Adding-Removing-Modifying-and-Checking-HTML5-Attributes-with-JavaScript