getAttribute() method
So far, we have introduced two ways to retrieve specific element nodes: one is to use the getElementById() method, and the other is to use the getElementsByTagName() method. After finding that element, we can use the getAttribute() method to query the values of its various attributes.
The getAttribute() method is a function. It has only one parameter - the name of the attribute you are planning to query:
object.getAttribute(attribute)
However, the getAttribute() method cannot be called through the document object, which is different from other methods we have introduced before. We can only call it through one element node object.
For example, you can combine it with the getElementsByTagName() method to query the title attribute of each <p> element as shown below:
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 "Shopping List" sample document given earlier and reload the page in a 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 title attribute in the Shopping List document. If the document has one or more <p> elements without title attribute, the corresponding getAttribute("title") call will return null. null is a null value in JavaScript language, and its meaning is "the thing you said does not exist." If you want to verify this personally, please 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 will see two alter dialogs, and the second dialog will be blank or only display the word "null" - the specific situation depends on how your web browser will display the null value.
We can modify our script so that it will pop up a message only when the title property 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 this page, you will only see an alter dialog box showing the "a gentle reminder" message, as shown below.
We can even reduce this code to a shorter one. When checking whether a certain data is a null value, we are actually checking whether it exists. This kind of check can be simplified to directly use the checked data as a condition for if statement. if (something) is completely equivalent to if (something != null), but the former is obviously more concise. At this time, 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.
To this example, as long as we replace if (title_text != null) with if (title_text), we can get more concise code. In addition, in order to further increase the readability of the code, we can also take this opportunity to write alter statements and if statements on the same line, which can 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 introduced to you before can only be used to retrieve information. The setAttribute() method has an essential difference from them: it allows us to make modifications 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 two parameters to it:
obect.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 title attribute value 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"));The above statements will pop up two alert dialogs on the screen: the first alter dialog appears before the setAttribute() method is called, it will be blank or the word "null" is displayed; the second appears after the title attribute value is set, it will display the "a list of goods" message.
In the above example, we set the title attribute of an existing node, but this attribute did not exist in the first place. This means that the setAttribute() call we issue actually completes two operations: first create this attribute, and then set its value. If we use the setAttribute() method on an existing attribute of the element node, the current value of this attribute will be overwritten.
In the "Shopping List" sample document, the <p> element already has a title attribute, and the value of this attribute 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(title");alert(title].getAttribute("title"))if(text){ts[i].setAttribute("title","I will succeed!")alert(ts[i].getAttribute("title"))}}The above code will first retrieve all the <p> elements that already have title attributes from the document, and then modify all their title attribute values to brand new title text. Specifically for the "Shopping List" document, the property value a gentle reminder will be overwritten.
Here is a very noteworthy detail: the modifications to the document through the setAttribute() method will cause the display effect and/or behavior of the document in the browser window to change accordingly, but when we view the source code of the document through the browser's view source option, we will still see the original attribute value - that is, the modifications made by the setAttribute() method will not be reflected in the source code of the document itself. This phenomenon of "inconsistent inside and outside" comes from the working mode of DOM: first load the static content of the document, and then refresh them dynamically. Dynamic refresh does not affect the static content of the document. This is exactly the real power and temptation of DOM: refreshing page content does not require end users to perform page refresh operations in their browsers.