Introduction to the use of getAttribute in JavaScript

During our development process, I believe everyone knows that the getAttribute() method inJavaScriptis a function, and getAttribute() has only one parameter - what you plan toqueryThe name of attribute, today we will introduce to you the use of getAttribute in JavaScript!

getAttribute() method

So far, we have introduced to you two methods of retrieving specific element nodes: one is to use the getElementById() method, and the other is to The first is to use thegetElementsByTagName() method. After finding that element, we can use the getAttribute() method to query the values of its various attributes.
getAttribute() method is a function. It has only one parameter - the name of the attribute you intend to query:
object.getAttribute(attribute)
However, the getAttribute() method cannot be called through thedocumentobject, which is different from what we introduced before The other methods are different. We can only call it through an element node object.
For example, you can combine it with the getElementsByTagName() method to query the title attribute of each

element, as shown below:

var text=document.getElementsByTagName("p") for (var i=0;i
        

         Copy after login
        
       

If you insert the above code in front At the end of the "Shopping List" example document given and reloading the page in your web browser, an alter dialog box will pop up on the screen with the text message "a gentle reminder".
There is only one

element with a title attribute in the "Shopping List" document. If this document also has one or more

elements without a title attribute, the corresponding getAttribute("title") call will return null. null is the null value in the JavaScript language, which means "the thing you are talking about does not exist." If you want to verify this for yourself, first insert the following text into the Shopping List document after the existing text paragraph:

This is just test

Then reload the page. This time, you will see two alter dialog boxes, and the second dialog box will be blank or just display the word "null" - depending on how your web browser displays null values.
We can modify our script so that it only pops up a message when the title attribute exists. We will add an if statement to check if the return value of the getAttribute() method is null. Taking this opportunity, we also added a few variables to improve the readability of the script:

var ts=document.getElementsByTagName("li"); for (var i=0; i
        

         Copy after login
        
       

Now, if you reload this page, you will only see a message saying "a gentle reminder" The alter dialog box is shown below.
We can even make this code shorter. When checking whether an item of data is null, we are actually checking whether it exists. This check can be simplified by directly using the data being checked as the condition of the if statement. if (something) is completely equivalent to if (something != null), but the former is obviously more concise. At this point, if something exists, the condition of the if statement will be true; if something does not exist, the condition of the if statement will be false.
Specifically for this example, as long as we replace if (title_text != null) with if (title_text), we can get a more concise code. In addition, in order to further increase the readability of the code, we can also take this opportunity to write the alter statement and the if statement on the same line, which can make them closer to the English sentences in our daily life:

var ts=document.getElementsByTagName("li"); for (var i=0; i
        

         Copy after login
        
       

3.4.2 SetAttribute() method
All the methods we introduced to you before can only be used to retrieve information. The setAttribute() method has one essential difference from them: it allows us to modify the value of the attribute node.
Similar to the getAttribute() method, the setAttribute() method is also a function that can only be called through the element node object, but the setAttribute() method requires us to pass two parameters to it:
obiect.setAttribute(attribute,value )
In the following example, the first statement will retrieve the element whose id attribute value is purchase, and the second statement will set the title attribute value of this element to a list of goods:

var shopping=document.getElementById("purchases") shopping.setAttribute("title","a list of goods")

We can use the getAttribute() method to prove that the value of the title attribute of this element has indeed changed:

var shopping=document.getElementById("purchases"); alert(shopping.getAttribute("title")); shopping.setAttribute("title","a list of goods"); alert(shopping.getAttribute("title"));

上面这些语句将在屏幕上弹出两个alert对话框：第一个alter对话框出现在setAttribute()方法被调用之前，它将是一片空白或显示着单词“null”；第二个出现在title属性值被设置之后，它将显示着“a list of goods”消息。
在上例中，我们设置了一个现有节点的title属性，但这个属性原先并不存在。这意味着我们发出的setAttribute()调用实际完成了两项操作：先把这个属性创建出来，然后再对其值进行设置。如果我们把setAttribute()方法用在元素节点的某个现有属性上，这个属性的当前值将被覆盖。
在“购物清单”示例文档里，

元素已经有了一个title属性，这个属性的值是a gentle reminder。我们可以用setAttribute()方法来改变它的当前值：