YouTip"); } ``` #### Output: ```text COOKING CHILDREN WEB WEB ``` --- ### Example 2: Setting the Text Content of an Attribute You can also use the `textContent` property to dynamically modify the value of an attribute. ```javascript // Load the XML document var xmlDoc = loadXMLDoc("books.xml"); // Get the first
Prop Attr Textcontent
# XML DOM: textContent Property (Attr Object)
The `textContent` property of the `Attr` (Attribute) object is used to set or return the text content of a specified attribute.
This property is part of the XML DOM (Document Object Model) and provides a straightforward way to read or modify the string value associated with an attribute node.
---
## Syntax
### Reading the attribute value:
```javascript
attrObject.textContent
```
### Writing/Setting the attribute value:
```javascript
attrObject.textContent = "newValue"
```
### Return Value / Property Value
* **Type:** String
* **Description:** The text content of the attribute. If used to set a value, it updates the attribute's value to the specified string.
---
## Code Examples
### Example 1: Retrieving the Text Content of an Attribute
The following example loads an XML document named [books.xml](/try/demo_source/books.xml) using `loadXMLDoc()` and retrieves the text content of the first attribute (which is `category`) for each `` element.
#### The XML File (`books.xml`):
```xml
Everyday Italian
Giada De Laurentiis
2005
30.00
Harry Potter
J K. Rowling
2005
29.99
Learning XML
Erik T. Ray
2003
39.95
```
#### JavaScript Implementation:
```javascript
// Load the XML document
var xmlDoc = loadXMLDoc("books.xml");
// Get all elements
var books = xmlDoc.getElementsByTagName('book');
for (var i = 0; i < books.length; i++) {
// Access the first attribute of each book element and print its text content
var attr = books.item(i).attributes;
document.write(attr.textContent);
document.write("
"); } ``` #### Output: ```text COOKING CHILDREN WEB WEB ``` --- ### Example 2: Setting the Text Content of an Attribute You can also use the `textContent` property to dynamically modify the value of an attribute. ```javascript // Load the XML document var xmlDoc = loadXMLDoc("books.xml"); // Get the first element
var firstBook = xmlDoc.getElementsByTagName('book');
// Get the first attribute of the book element (category)
var categoryAttr = firstBook.attributes;
// Output the original value
console.log("Original: " + categoryAttr.textContent); // Output: COOKING
// Set a new value using textContent
categoryAttr.textContent = "BAKING";
// Output the updated value
console.log("Updated: " + categoryAttr.textContent); // Output: BAKING
```
---
## Considerations & Best Practices
1. **Difference between `textContent` and `nodeValue`:** For an `Attr` node, both `textContent` and `nodeValue` return the string value of the attribute. However, `textContent` is standard across modern DOM interfaces and is highly consistent.
2. **Browser Compatibility:** The `textContent` property is supported in all modern browsers and standard XML DOM parsers.
3. **Security Note:** When setting `textContent`, any HTML or XML special characters (like `<` or `&`) are automatically escaped by the browser/parser. This makes it safe against basic script injection attacks when manipulating DOM elements.
"); } ``` #### Output: ```text COOKING CHILDREN WEB WEB ``` --- ### Example 2: Setting the Text Content of an Attribute You can also use the `textContent` property to dynamically modify the value of an attribute. ```javascript // Load the XML document var xmlDoc = loadXMLDoc("books.xml"); // Get the first