Summary Dom node operations

Document directory

• Absolute reference of a node:
• Relative reference of a node: (set the current peer node to a node)
• [1] childnodes compatibility problem description:
• [2] add (), remove () compatibility issues:
• Innerhtml, outerhtml, innertext, outertext

I. node Definition

Dom node tree

As shown in the figure, each component in the node HTML document is a node:

• The entire document is a document Node
• Each HTML Tag is an element node.
• Text contained in HTML elements is a text node
• Each HTML attribute is an attribute node.
• Annotation belongs to the annotation Node

Note: with Dom, you can access every node in the HTML document.

Ii. Absolute reference of a node:

• Document.doc umentelement: return the root node of the document
• Document. activeelement: return the tag node in the current document.
• Event. fromelement
• Event. toelement
• Event. srcelement: return the source node of the activation event

Relative reference of a node: (set the current peer node to a node)

• Node. parentnode node. parentelement returns the parent node, and document. parentnode () returns NULL.
• Node. childnodes [1] conforms to the standard and returns the child node set (including the text node and label node). The childnodes of the text and attribute nodes are always null. obtain the node length first. childnodes. length, and then you can find the desired node through loops or indexes.
  // Processing of and text nodes:
  Eg:

  VaR mytextnodes = document. getelementbyid ("test "). childnodes; var COUNT = mytextnodes. length; For (VAR I = 0; I <count; I ++) {If (mytextnodes [I]. nodetype = "3" & mytextnodes [I]. nodename! = "# Text") {// node alert (mytextnodes [I]) for excluding ie blank text;}

• Node. children does not conform to the standard and is not recommended. It only returns HTML nodes or even text nodes.
• Node. firstchild returns the first child node, firstchild = childnodes [0]
• Node. lastchild returns the last subnode, lastchide = childnodes [childnodes. Length-1]
• Node. nextsibling () returns the same node as the next node.
• Node. previussibling () returns the same node as the previous one.

Iii. node operations

• Node Positioning

  Getelementbyid (elementid) // find an element with a given ID attribute value, and return an element node, document. getelementbyid (idvalue) getelementsbytagname (tagname) // used to find all the elements with the signature for the calibration, document. getelementsbytagname (tagname) getelementsbyname (elementname) // in HTML, both checkbox and radio use the same name attribute value to identify the elements in a group. If we want to get the selected element, first obtain the reorganized element, and then cyclically determine whether the checked attribute value of the node is true.

• Create a node:

  Document. createelement (element) // The parameter is the name of the node label to be added, egnewnode = document. createelement ("Div"); document. createtextnode (string) // create a new text node that contains the given text. For example: document. createtextnode ("hello ");

  Eg:

  var a =document.createElement("span");var b =document.createTextNode("cssrain");a.appendChild(b);

• Add node:

  // Add a subnode: node. appendchild (newchild) // newchild to create a new node. eg: document. body. appendchildnode (o) document. forms [0]. appendchildnode (o) // insert a node. insertbefore (newnode, targetnode) node. insertafter (newnode, targetnode );

• Modify a node:

  // Delete node. Remove () [2] // when a node is deleted by the remove method, all the child nodes contained in the node will be deleted at the same time. Node. removechild (node) // eg: document. body. removechild (node) node. removenode () // ie support, but FF does not. We recommend using removechild instead of node. replaceChild (newchild, oldchild) // The oldchild node must be a subnode of the node element. Node. replacenode () node. swapnode () // only ie supports the replacenode and swapnode methods, but not other browsers.

• Copy node:

  // Return the copy node reference node. clonenode (bool) // bool is a Boolean value; true/false indicates whether to clone all the child nodes of the node; eg: node. clonenode (true)

• Get node information:

  . Nodename // read-only, return the node name, which is equivalent to tagname .. nodevalue // readable and writable, but cannot be written to element nodes. Returns a string indicating the value of this node. Element nodes return NULL, attribute nodes return attribute values, and text nodes return text. It is generally only used to set the value of a text node .. Nodetype // read-only, return node type: 1, Element Node; 2, attribute node; 3, text node. Node. contains () // indicates whether a node is included. A boolean value is returned. Supported by IE. Supported by ff. Contains () is not supported, but supports W3C standard comparedocumentposition (). node. haschildnodes () // determines whether a subnode exists. A boolean value is returned.

• Attribute node:

  Setattribute (Key, value) // element. setattribute (attributename, attributevalue), The setattribute () method can only be used on Attribute nodes. Getattribute (key) // returns the value of a given attribute node of a given element.

Note: [1] childnodes compatibility problem description:

The debugging tool of IE will find that the space is parsed into "# text" in IE, that is, ie will resolve the two labels to blank text nodes as long as there is a carriage return or space between them, the node nodename = "# text" is added ". But not in ff.

• Test code:

  // Leave a space between the nodes and press ENTER <Div id = "test1"> <div> first </div> <div> second </div> <div> third </div> </div> // except for comments, enter <Div id = "Test2"> <div> first </div> <div> second </div> <div> third </div>> var val1 = document. getelementbyid ("test1 "). childnodes. length; var val2 = document. getelementbyid ("Test2 "). childnodes. length; alert ("val1 =" + val1 + ":" + "val2 =" + val2)

• Test results:

  In IE, val1 = 7: val2 = 3.
  In ff, val1 = 3: val2 = 3.

• Compatibility solution:

  Add the following in the For Loop:
  If (childnode. nodename = "# text") continue;
  Or nodetype = 1.

[2] add (), remove () compatibility issues:

Note that the add and remove methods are only used for area, controlrange, options, and other collection objects.

<SELECT> <option value = "1"> option1 </option> <option value = "2"> option2 </option> </SELECT> <SCRIPT type = "text/ javaScript "> function fnadd () {// compatible with IE, FF, opera, chromevar ooption = document. createelement ("option"); document. getelementbyid ("# olist "). options. add (ooption); ooption. TEXT = "option3"; ooption. value = "3";} function fnremovechild () {// compatible with IE, FF, opera, chromedocument. getelementbyid ("# olist ")). removechild (document. getelementbyid ("# olist "). lastchild);} function fnremove () {// compatible with IE, FF, opera, chromedocument. getelementbyid ("# olist "). remove (0) ;}</SCRIPT>

Extended knowledge: innerhtml, outerhtml, innertext, outertext

• Definition:
  • Innerhtml sets or retrieves the HTML in the tag. For example, you can set node. innerhtml to "hello"
  • Outerhtml sets or obtains the HTML of tags and tags.
  • Innertext
  • Outertext setting (including tags) or obtaining (excluding tags) the text of an object
• Differences:

  Innerhtml and outerhtml will be parsed when setting the object content, while innertext and outertext will not.

  When setting, innerhtml and innertext only set the text in the tag, while outerhtml and outertext set the text including the tag.

• Note:

  W3C only supports innerhtml. Others are Microsoft's rules. (outerhtml, outertext, and innertext are only good for Microsoft's IE, but not for other browsers (Firefox, Mozilla, etc.). They must be implemented using other methods)