SetAttribute (), setattribute

SetAttribute (), setattribute

● Nodes are divided into different types: Element nodes, attribute nodes, and text nodes.

● The getElementById () method returns an object that corresponds to a specific element node in the document.

● The getElementsByTagName () method returns an array of objects corresponding to a specific element node in the document.

● Each of these nodes is an object.

Next, we will introduce several attributes and methods associated with these objects.

3.4.1 getAttribute () method

So far, we have introduced two methods to retrieve specific element nodes: getElementById () and getElementsByTagName. After finding the 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 want to query:

Object. getAttribute (attribute)
However, the getAttribute () method cannot be called through the document object, which is different from other methods we have previously introduced. 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 to the end of the "shopping list" sample document and reload the page in a Web browser, on the screen, an alter dialog box displaying the text message "a gentle reminder" is displayed.

There is only one <p> element with the title attribute in the "shopping list" document. If this document contains one or more <p> elements without the title attribute, the corresponding getAttribute ("title") Call will return null. Null is a null value in JavaScript. It indicates that "the things you mentioned do not exist ". If you want to verify this in person, first Insert the following text into the existing text section in the shopping list document:
<P> This is just test </p>
Then reload the page. This time, you will see two alter dialogs, the second dialog box is blank or only displays the word "null". The actual situation depends on how your Web browser displays the null value.

You can modify the script so that a message is displayed only when the title attribute exists. We will add an if statement to check whether the return value of the getAttribute () method is null. With this opportunity, we have 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 displays the "a gentle reminder" message, as shown below.


We can even shorten this code. When checking whether a data item is null, we are actually checking whether it exists. This check can be simplified to the condition that the checked data is directly used as the if statement. If (something) And if (something! = Null) is completely equivalent, but the former is obviously more concise. If something exists, the condition of the if statement is true. if something does not exist, the condition of the if statement is false.

In this example, we only need to set 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 take this opportunity to write the alter statement and the if statement on the same line, which makes them 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 methods we introduced earlier can only be used to retrieve information. The setAttribute () method is essentially different from the setAttribute () method: 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 an Element Node object. However, the setAttribute () method needs to pass two parameters to it:

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 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 preceding 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 "; the second message appears after the title attribute value is set. It displays the "a list of goods" message.

In the preceding example, we set the title attribute of an existing node, but this attribute does not exist. This means that the setAttribute () call has actually completed two operations: create this attribute first, and then set its value. If we use the setAttribute () method on an existing attribute of an element node, the current value of this attribute will be overwritten.

In the example document of "shopping list", the <p> element already has a title attribute. 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 (ts [I]. getAttribute ("title "))
If (text)
{
Ts [I]. setAttribute ("title", "I will succeed! ")
Alert (ts [I]. getAttribute ("title "))
}
}
The above code first Retrieves all the <p> elements with the title attribute from the document, and then modifies all their title attribute values to brand new title text. In the "shopping list" document, the attribute value a gentle reminder will be overwritten.

Here is a very noteworthy detail: the modifications made to the document through the setAttribute () method will change the Display Effect and/or action of the document in the browser window accordingly, however, when we use the view source (view source Code) option in the browser to view the source code of the document, we still see the original property value -- that is, setAttribute () the changes made by the method are not reflected in the source code of the document. This "table is different" phenomenon comes from DOM's working mode: loading static content of documents first, and then refreshing them dynamically. Dynamic Refresh does not affect static content of documents. This is the real power and attraction of DOM: Refreshing page content does not require end users to perform page refresh operations in their browsers.