YouTipProp Element Attributes
## XML DOM: The `attributes` Property
The `attributes` property returns a `NamedNodeMap` containing the attributes of the selected element node.
This property is a fundamental part of the XML DOM (Document Object Model), allowing developers to dynamically inspect, retrieve, and manipulate the attributes of an XML element.
---
## Syntax and Usage
### Syntax
```javascript
elementNode.attributes
```
### Return Value
* **`NamedNodeMap`**: A live collection of all attribute nodes defined on the specified element.
* **`null`**: If the selected node is not an element node (e.g., text nodes, comment nodes), the property returns `null` (or is undefined in certain environments).
### Key Characteristics
* **Live Collection**: The returned `NamedNodeMap` is "live," meaning any changes made to the element's attributes are immediately reflected in the map.
* **Unordered**: Unlike an array, the nodes within a `NamedNodeMap` are not maintained in any particular order, though they can be accessed by index or by name.
---
## Practical Examples
The following examples use a sample XML file named [`books.xml`](/try/demo_source/books.xml).
### Example 1: Getting the Number of Attributes
This example loads `books.xml` and retrieves the total count of attributes defined on the first `` element.
```javascript
// Load the XML document
const xmlDoc = loadXMLDoc("books.xml");
// Get the attributes of the first element
const attributesList = xmlDoc.getElementsByTagName("book").attributes;
// Output the number of attributes
document.write(attributesList.length);
```
**Output:**
```text
1
```
---
### Example 2: Retrieving an Attribute Value by Name
This example retrieves the value of a specific attribute named `"category"` from the first `` element using the `getNamedItem()` method.
```javascript
// Load the XML document
const xmlDoc = loadXMLDoc("books.xml");
// Access the attributes of the first element
const attributesList = xmlDoc.getElementsByTagName("book").attributes;
// Get the specific attribute node by its name
const categoryAttr = attributesList.getNamedItem("category");
// Output the value of the attribute
document.write(categoryAttr.value);
```
**Output:**
```text
COOKING
```
---
## Developer Considerations & Tips
* **Element Nodes Only**: The `attributes` property is only applicable to **Element** nodes (`nodeType === 1`). Attempting to access it on other node types (such as Text or Comment nodes) will return `undefined` or `null`.
* **Alternative Methods**: While `attributes` and `NamedNodeMap` are useful for iterating through all attributes, if you only need to get or set a specific attribute value, it is generally cleaner and more performant to use:
* `element.getAttribute("name")`
* `element.setAttribute("name", "value")`
* `element.removeAttribute("name")`
* **Iterating Attributes**: You can loop through the `NamedNodeMap` using a standard `for` loop combined with the `.item(index)` method or bracket notation:
```javascript
const attrs = element.attributes;
for (let i = 0; i < attrs.length; i++) {
console.log(`${attrs.nodeName} = ${attrs.nodeValue}`);
}
```