GetAttribute () method
So far, we've 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 properties.
The GetAttribute () method is a function. It has only one parameter-the name of the property you intend to query:
Object.getattribute (attribute)
However, the getattribute () method cannot be called through the Document object, unlike the other methods we have described earlier. We can call it only through an element node object.
For example, you can combine it with the getElementsByTagName () method to query the title property 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 "shopping list" sample document given earlier and reload the page in a Web browser, an alter dialog box appears with the text message "A gentle reminder" displayed.
There is only one <p> element with the title attribute in the shopping list document. If the document also has one or more <p> elements without the title attribute, then the corresponding getattribute ("title") call will return NULL. NULL is a null value in the JavaScript language, meaning "this thing you say 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 will see two alter dialogs, and the second will be blank or just the word "null"-depending on how your Web browser will display null values.
You can modify our script so that it pops up a message only when the Title property is present. We will add an if statement to check if the return value of the GetAttribute () method is null. Taking advantage of this opportunity, we have 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 that shows a gentle reminder message, as shown below.
We can even shorten the code a little bit. When checking whether an item is a null value, we are actually checking to see if it exists. This check can be simplified to the condition that the checked data is used as an if statement directly. if (something) is exactly equivalent to if (something! = null), but the former is clearly more concise. At this point, if the something exists, the condition of the IF statement will be true, and if the something does not exist, the condition of the IF statement will be false.
In this case, as long as we replace if (title_text! = null) with if (title_text), we can get more concise code. In addition, to further increase the readability of the code, we can also take this opportunity to write the ALTER statement on the same line as the IF statement, which allows them to be closer to the English sentence 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 introduced to you have been used only to retrieve information. The SetAttribute () method has a fundamental difference from them: 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 be called only 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 the ID attribute value is Purchase, and the second statement sets the value of the title property 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 value of the title property 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 box appears before the SetAttribute () method is called, it will be blank or the word "null" is displayed, and the second appears after the title property value is set, it will show "a List of goods "messages.
In the example above, we have set the title property of an existing node, but this property does not exist originally. This means that the setattribute () call we make actually accomplishes 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 this property will be overwritten.
In the shopping list sample document, the,<p> element already has a title property, and the value of this property 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 all the <p> elements with the title attribute from the document, and then modify all of 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 way the document appears in the browser window and/or behavior, but we are in the browser's view Source (view source) option to see the source code of the document will still be the original property value-that is, the changes made by the SetAttribute () method are not reflected in the source code of the document itself. This "duplicity" phenomenon stems from the DOM's working mode: loading the static content of the document, and then dynamically refreshing them, dynamic refresh does not affect the static content of the document. This is the real power and allure of Dom: The refresh of page content does not require the end user to perform a page refresh in their browser.
