HTML DOM property object
May 06, 2021 JavaScript with HTML DOM Reference book
Table of contents
HTML DOM property object
HTML DOM node
In HTML DOM (Document Object Model), all are nodes:
- A document is a document node
- All HTML elements are element nodes
- All HTML properties are property nodes
- The text inserted into the HTML element is a text node
- A comment is a comment node
The Attr object
In HTML DOM, the Attr object represents an HTML property.
HTML properties always belong to HTML elements.
NamedNodeMap object
In HTML DOM, the NamedNodeMap object represents an out-of-order list of nodes.
We can access nodes in NamedNodeMap by node name.
Browser support
All major browsers support Attr objects and NamedNodeMap objects.
| The property/method | Describe |
|---|---|
| attr .isId | If the property is an ID type, the isId property returns true, otherwise false is returned. |
| attr .name | Returns the name of the property |
| attr .value | Set or return property values |
| attr .specified | If the property is specified to return true, otherwise false is returned |
| nodemap .getNamedItem() | The specified property node returned from the list of nodes. |
| nodemap .item() | Returns the node in the list of nodes that are in the specified index number. |
| nodemap .length | The number of nodes that return the list of nodes. |
| nodemap .removeNamedItem() | Delete the specified property node |
| nodemap .setNamedItem() | Set the specified property node (by name) |
DOM 4 Warning !!!
In the W3C DOM kernel, the Attr (property) object inherits all the properties and methods of the node object.
In DOM 4, the Attr (property) object is no longer inherited from the node object.
In terms of long-term code quality, you need to avoid using node object properties and methods in property objects:
| The property/method | Avoid the cause |
|---|---|
| attr .appendChild() | The property does not have child nodes |
| attr .attributes | The property has no properties |
| attr .baseURI | Use document.baseURI instead |
| attr .childNodes | The property does not have child nodes |
| attr .cloneNode() | Use attr.value instead |
| attr .firstChild | The property does not have child nodes |
| attr .hasAttributes() | The property has no properties |
| attr .hasChildNodes | The property does not have child nodes |
| attr .insertBefore() | The property does not have child nodes |
| attr .isEqualNode() | It doesn't make sense |
| attr .isSameNode() | It doesn't make sense |
| attr .isSupported() | This is usually true |
| attr .lastChild | The property does not have child nodes |
| attr .nextSibling | The property does not have a brother node |
| attr .nodeName | Use attr .name instead |
| attr .nodeType | Usually 2 (ATTRIBUTE-NODE) |
| attr .nodeValue | Use attr .value instead |
| attr .normalize() | There is no specification for the property |
| attr .ownerDocument | Usually your HTML document |
| attr .ownerElement | The HTML element that you use to access the property |
| attr .parentNode | The HTML element that you use to access the property |
| attr .previousSibling | The property does not have a brother node |
| attr .removeChild | The property does not have child nodes |
| attr .replaceChild | The property does not have child nodes |
| attr .textContent | Use attr .value instead |