SoFunction
Updated on 2025-03-03

Node properties and operation summary under DOM

property:
1 .nodeName
The node name is equivalent to tagName. The attribute node returns the attribute name, and the text node returns #text. nodeName is read-only.
2 .nodeType
Value: 1, element node; 2, attribute node; 3, text node. nodeType is read-only.
3 .nodeValue
Returns a string indicating the value of this node. The element node returns null, the attribute node returns the attribute value, and the text node returns the text. nodeValue is readable and writable, which cannot be written to element nodes. It is generally only used to set the value of the text node.
4 .childNodes
Returns the child node array. The childNodes of text and attribute nodes are always null. You can use hasChildNodes() to determine whether there are child nodes. Read-only attributes, you cannot use the method of operating the childNodes array to delete the added nodes.
5 .firstChild
Returns the first child node. Text and attribute nodes have no child nodes, and an empty array will be returned, which is a special treatment for these two bits. For element nodes, if there are no children, null will be returned. There is an equivalent: firstChild=childNodes[0].
6 .lastChild
Returns the last child node. The return value is the same as firstChild, and the three-party treatment is referenced above. There is an equivalent: lastChide=childNodes[-1].
7 .nextSibling()
Returns the next sibling node of the node. If there is no next brother node, return null. Read-only properties, application cannot be changed.
8 .previousSibling()
Returns the previous sibling node of the node. Same as above.
9 .parentNode()
Returns the parent node of the node. () returns null, and in other cases, an element node will be returned, because only the element node has children, and any node outside the document has a parent node. parentNode() is another read-only guy.


operate:
1. Create a node
createElement('tagName');
For example: var oP=('p'); creates a <p></p> tag.
2. Create a text node
createTextNode('text');
For example:var Text=('This is a paragraph!');
3. Attach child nodes
appendChild(o); where o is a node object.
For example: (o); add at the end of the body
[0].appendChildNode(o); add at the end of the form form
(o);Add to the end inside the element, and its total oP is a node object.
4. Create document fragments
createDocumentFragment();
For example: var oF=();
5. Delete nodes
removeChild(oP);
For example: (oP), remove the oP ​​node object from the body.
6. Replace nodes
replaceChid(newOp,targetOp); replace target node targetOp with newOp;
For example: (oPa,oPb).ps: How can it be so special? The source and destination operands are both parameters, why is the caller? Remember to first and don't worry too much. ——The replaced child node must be the body, and it can be replaced with other elements. The premise is the same as the replaced child node.
7. Insert node
insertBefor(newOp,targetOp);
insertAfter(newOp,targetOp);
8. Set or get attribute nodes
setAttribute('key','value');
getAttribute('key','value')
9. Replicate the node.
cloneNode(true/false)