Home > Web Front-end > JS Tutorial > body text

Summary of node attributes and operations under DOM_Basic knowledge

WBOY
Release: 2016-05-16 18:53:11
Original
923 people have browsed it

Attributes:
1.nodeName
Node name, equivalent to tagName. Attribute nodes return the attribute name, and text nodes return #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. Element nodes return null, attribute nodes return attribute values, and text nodes return text. nodeValue is readable and writable, but cannot be written to element nodes. Generally only used to set the value of text nodes.
4 .childNodes
Returns an array of child nodes. The childNodes of text and attribute nodes are always null. You can use hasChildNodes() to determine whether there are child nodes. Read-only attribute. To delete and add nodes, you cannot use the method of operating the childNodes array.
5 .firstChild
Returns the first child node. Text and attribute nodes have no child nodes and will return an empty array. This is a special treatment for these two nodes. For element nodes, null will be returned if there are no child nodes. There is an equivalent equation: firstChild=childNodes[0].
6 .lastChild
Returns the last child node. The return value is the same as firstChild. Please refer to the above for the three-party treatment. There is an equivalent equation: lastChide=childNodes[childNodes.length-1].
7 .nextSibling()
Returns the next sibling node of the node. If there is no next sibling node, return null. Read-only property and cannot be changed by the application.
8 .previousSibling()
Returns the previous sibling node of the node. Same as above.
9 .parentNode()
Returns the parent node of the node. document.parentNode() returns null. In other cases, it will return an element node, because only element nodes have child nodes, and any node other than document has a parent node. parentNode(), another read-only guy.


Operation:
1. Create node
createElement('tagName');
For example: var oP=document.createElement('p') ;Created a

tag.
2. Create text node
createTextNode('text');
For example: var oText=document.createTextNode('This is a paragh!');
3. Append child nodes
appendChild(o); where o is the node object.
For example: document.body.appendChildNode(o); append
document.forms[0].appendChildNode(o) at the end of the body; append
oP.appendChildNode(o); at the end of the form The inner end is appended, and its total oP is the node object.
4. Create document fragment
createDocumentFragment();
For example: var oF=document.createDocumentFragment();
5. Delete node
removeChild(oP);
For example: document.body.removeChild(oP), removes the oP ​​node object from the body.
6. Replace node
replaceChid(newOp, targetOp); Replace the target node targetOp with newOp
For example: document.body.replayChild(oPa,oPb).ps: How? So special? The source and destination operands are both parameters. Why is the caller document.body? Remember first, don’t interfere. ——What is replaced must be a child node of body. You can use other elements to replace document.body. The premise is the same. What is replaced must be a child node of this element.
7. Insert node
insertBefor(newOp,targetOp);
insertAfter(newOp,targetOp);
8. Set or get attribute node
setAttribute('key','value');
getAttribute('key','value')
9. Copy the node.
cloneNode(true/false)

Related labels:
dom
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template