What are the attributes of DOM nodes?

This article will share knowledge about the properties of DOM nodes, which has certain reference value. I hope it will be helpful to everyone

DOM nodes have different properties according to their different categories. For example, the element node of the label has attributes related to the link, the label has attributes related to the input, and so on. Text nodes are different from element nodes, but there are also many common properties and methods between them because all DOM nodes form a single hierarchy. Each DOM node belongs to the corresponding built-in class.

Structural hierarchy (tree)

(1) The root is EventTarget, which is inherited by Node, and other DOM nodes inherit from it.

(2) EventTarget is the root "abstract" class, and objects of this class will never be created, because it is the basis of all nodes, so all DOM nodes support

(3) Node is also an "abstract" class used as the basis for DOM nodes. Its core is parentNode, nextSibling, childNodes, etc. Similarly, Node will not create class objects, but there will be some classes that inherit specific nodes from it, such as Text for text nodes and Element for element nodes

(4) Element is the basis of DOM elements. It provides methods such as getElementsByTagName, querySelector, etc.

nodeType attribute

represents the type of the node, and only returns all of this div Element node

Calling nodeType returns the number

element node (usually refers to a pair of elements with open and closed tags) - 1

attribute node (attribute on the element node ) —— 2

text node (the part of the DOM used to render text) —— 3

comment node (the node of the comment part) —— 8

document — — 9

DocumentFragment —— 11

<div>
<p>123</p>
<i></i>
<span></span>
</div>	
<script type="text/javascript">
var div=document.getElementsByTagName("div")[0];
</script>

nodeName attribute

Given a DOM node, we can Read its tag name from the nodeName or tagName attribute;

Note: the tagName attribute only applies to the Element node, and the nodeName node is relative to any defined Node node.

<div>
<p>123</p>
<i></i>
<span></span>
</div>	
<script type="text/javascript">
	var div=document.getElementsByTagName("div")[0];
</script>

nodeValue attribute

Text text node or Comment comment node text content, readable and writable

<div>
<p>123</p>
<i></i>
<span></span>
</div>	
<script type="text/javascript">
var div=document.getElementsByTagName("div")[0];
</script>

Summary: The above is the entire content of this article. I hope it will be helpful for everyone to learn DOM attributes.

The above is the detailed content of What are the attributes of DOM nodes?. For more information, please follow other related articles on the PHP Chinese website!