The getAttribute method in js USES the example

The getAttribute () method

So far, we've shown you two ways to retrieve a particular element node: one using the getElementById() method, and the other using the getElementsByTagName() method. After we find that element, we can query the values of its various attributes using the getAttribute() method.
The getAttribute() method is a function. It takes only one parameter -- the name of the property you intend to query:
Object. The getAttribute (attribute)
However, the getAttribute() method cannot be called through the document object, unlike other methods we've covered before. We can only call it from an element node object.
For example, you can combine it with the getElementsByTagName() method to query for each < P> The title attribute of the element is shown 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 sample shopping list document given earlier and reload the page in your Web browser, an alter dialog pops up with the text message "a gentle reminder."
In the shopping list document there is only one < P> Elements. Suppose the document has one or more < P> Element, the corresponding call to getAttribute("title") returns null. Null is a null value in JavaScript that means "the thing you said does not exist." If you want to verify this for yourself, insert the following text after an 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 will be blank or just the word "null" -- depending on how your Web browser displays the null value.
We can modify our script to pop up a message only if the title attribute exists. We will add an if statement to check whether the return value of the getAttribute() method is null. Taking advantage of this opportunity, we also added several 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 the page, you will only see an alter dialog that displays the message "a gentle reminder," as shown below.
We can even make this code shorter. When we check whether an item of data is null, we are actually checking whether it exists. This check can be simplified to use the checked data directly as a condition of an if statement. If (something) versus if (something! = null) is completely equivalent, but the former is clearly 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 is false.
In this case, if (title_text! Instead of if (title_text), we get a much simpler code. In addition, to further improve the readability of the code, we can use this opportunity to write the alter statement on the same line as the if statement, which makes them closer to the English sentences in our daily life:

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 of the methods we've shown you before can only be used to retrieve information. The setAttribute() method differs from them in one essential way: it allows us to make changes to 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 it two parameters:
Obiect. SetAttribute (attribute, value)
In the following example, the first statement retrieves the element whose id attribute value is purchase, and the second statement sets 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 element's title attribute has indeed changed:

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

These statements will pop up two alert dialogs on the screen: the first alter dialog appears before the setAttribute() method is called, and it will be blank or show the word "null"; The second appears after the title property value is set and displays the "a list of goods" message.
In the example above, we set the title property of an existing node, but this property did not exist before. This means that the setAttribute() call we made actually did two things: we created the attribute and then set its value. If we use the setAttribute() method on an existing attribute of the element node, the current value of that attribute is overwritten.
In the "shopping list" sample document, < P> The element already has a title attribute with the value of 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 remove from the document the < P> Elements are all retrieved, and their title attribute values are all changed to brand new title text. In the case of a shopping list document, the attribute value a gentle reminder is overwritten.
There is a very notable details: through the setAttribute () method is making changes to the document, will make the document in the browser window display and/or actions have corresponding change, but we are through the browser's view source (see the source code) option to view the document source code will continue to be as original attribute value -- that is, the setAttribute () method to modify is not reflected in the source code of the document itself. This "duplicity" stems from DOM's working mode: the static content of the document is loaded and then refreshed dynamically, without affecting the static content. This is the real power and allure of the DOM: refreshing the content of a page doesn't require the end user to perform a page refresh in their browser.