The GetAttribute method in JS uses the example _javascript technique

GetAttribute () method

So far, we've introduced two ways to retrieve a particular element node: one is using the getElementById () method, and the other is using the getElementsByTagName () method. Once we find that element, we can use the GetAttribute () method to query the values of its various properties.
The GetAttribute () method is a function. It has only one argument-the name of the attribute you intend to query:
Object.getattribute (attribute)
However, the getattribute () method cannot be invoked through the Document object, which is different from the other methods we have described earlier. We can only invoke it through an element node object.
For example, you can combine it with the getElementsByTagName () method to query the title attribute of each <p> element, as follows:

var text=document.getelementsbytagname ("P") for
(var i=0;i<text.length;i++)
{
alert (text[i). GetAttribute ("title"));
}

If you insert the above code at the end of the previous "shopping list" sample document and reload the page in your Web browser, an alter dialog box with the text message "A gentle reminder" will pop up on the screen.
There is only one <p> element with the title attribute in the shopping list document. If the document has one or more <p> elements without the title attribute, then the corresponding getattribute ("title") call returns NULL. NULL is a null value in the JavaScript language, meaning that "this thing you said does not exist." If you want to verify this yourself, first insert the following text into the existing text paragraph in the shopping list document:
<p>this is just test</p>
Then reload the page. This time, you'll see two alter dialogs, and the second dialog will be blank or just "null"-depending on how your Web browser will display the null value.
You can modify our script so that it only pops up a message when the title property exists. We will add an if statement to check if the return value of the GetAttribute () method is null. Taking advantage of 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<ts.length;i++)
{text=ts[i].getattribute ("title");
if (text!=null)
{
alert (text)
}
}

Now, if you reload this page, you will only see an alter dialog box that displays the "a gentle reminder" message, as shown below.
We can even shrink this code a little bit shorter. When checking whether a data is a null value, we are actually checking to see if it exists. This check can be simplified to the condition that the data being examined is used directly as an if statement. if (something) is completely equivalent to if (something!= null), but the former is clearly more concise. At this point, if something exists, the condition of the IF statement will be true, and if something does not exist, the condition of the IF statement will be false.
In this case, if we replace if (Title_text!= null) with an if (title_text), we can get more concise code. In addition, to further increase the readability of the code, we can take this opportunity to write the ALTER statement on the same line as the IF statement, which will make them closer to the English sentences in our daily lives:

var ts=document.getelementsbytagname ("Li");
for (var i=0; i<ts.length;i++)
{text=ts[i].getattribute ("title");
if (text) alert (text)
}

3.4.2 setattribute () method
All the methods we've introduced to you have been used only to retrieve information. The SetAttribute () method is essentially different 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 invoked through an element node object, but the setattribute () method requires that we pass two parameters to it:
Obiect.setattribute (Attribute,value)
In the following example, the first statement retrieves the element that has the id attribute value as purchase, and the second statement sets the Title property value of the 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 title attribute value of this element has actually changed:

var Shopping=document.getelementbyid ("purchases");
Alert (Shopping.getattribute ("title"));
Shopping.setattribute ("title", "a list of goods");
Alert (Shopping.getattribute ("title"));

The above statements will pop up two alert dialog boxes on the screen: the first alter dialog box appears before the SetAttribute () method is invoked, it will be blank or display the word "null", and the second appears after the title property value is set, it will display "a List of goods "message.
In the example above, we set the title property of an existing node, but this property did not exist. This means that our setattribute () call actually completes two things: Create the property first, and then set the value. If we use the SetAttribute () method on an existing property of an element node, the current value of the property is overwritten.
In the "Shopping list" sample document, the,<p> element already has a title attribute, the value of which is a gentle reminder. We can use the setattribute () method to change its current value:

<script type= "Text/javascript" >
var ts=document.getelementsbytagname ("Li");
for (var i=0 i<ts.length;i++)
{
var text=ts[i].getattribute ("title");
Alert (Ts[i].getattribute ("title"))
if (text)
{ts[i].setattribute ("title")
, "I will succeed!" ")
Alert (Ts[i].getattribute (" title ")
}
}

The above code will first retrieve the <p> elements that already have the title attribute from the document and then change their title property values to brand new title text. Specific to the "shopping list" document, the property value a gentle reminder will be overwritten.
Here's a very interesting detail: changes made to the document through the SetAttribute () method will change the display and/or behavior of the document in the browser window, but we're in the browser view The source (view sources) option to view the source code of the document will still see the original property value-that is, the changes made by the setattribute () method will not be reflected in the source code of the document itself. This "duplicity" phenomenon derives from the working mode of the DOM: loading the file's static content and refreshing it dynamically, without affecting the static content of the document. This is the real power and allure of DOM: Refreshing page content does not require end users to perform page refreshes in their browsers.