The related concepts of DOM

the "Previous words " DOM full name is the Document Object model, which is the documents-objects-models. The HTML document we often speak of is actually a DOM tree, and the DOM operation is to find the DOM object we want on the DOM tree in memory, modify its properties, and then the rendering engine will redraw the result of the modification on the interface. Dom is covered by a lot of knowledge, especially to later to be compatible with the browser is very around, this time to talk about some of the DOM related concepts, and so on after the BOM, I will again for a compatible browser this piece to do a small summary.

1. Properties of the node:

①nodetype

// node // nodeType  1-element node, 2-Attribute node,  3-text node

②nodename

// NodeName returns the name of the label if it is a label, or #text if it is the text, or the name of the property if it is a property node

③nodevalue

// NodeValue always returns null if it is a label, or the contents of the text if it is a text node, or the  value of the property if it is a property node

Replication of ④ nodes

    Element.clonenode ();    // clones a new DOM object; parameter is Boolean, True assigns child nodes, false does not copy child nodes    Element.appendchild ();  // Append Element

2. Custom attributes:2 . 1 Any browser can get the predefined properties of the tag through the DOM object 2 . 2 Chrome, the new version of IE (9 and above) cannot get custom properties of the label, but IE8 was previously able to get a custom property of the tag through the DOM object 2 . 3 How do I display a custom attribute in any browser?? --getattribute can get the predefined attributes of a tag, and the type obtained through a custom property is a string--Set the value of the property: Element.setattribute (Name,value)--Remove attribute: Element.removeattribute (name) attached:

1 element.classname = "";     // Delete Only the value of the class class, preserving the class name 2 element.removeattribute ("class")   // Delete this class completely

2 . Related Operations for 4 properties

1 //Get Attribute node2     varAttrnode = Box.getattributenode ("id");3Console.log (Attrnode.nodetype);//NodeType of attribute nodes 24Console.log (Attrnode.nodename);//The name of the NodeName property of the property node5Console.log (Attrnode.nodevalue);//The value of the NodeValue property of the property node6         7  //Set Property SetAttribute8         9  //Remove attribute RemoveAttribute

3. Hierarchical Structure-- parent node:parentnode ① child nodes:

1 childNodes  All child nodes--dom standard method, in addition to get child tags, also gets the text node, IE8 previously ignored the white space node 2 children  All child elements-- Non-standard Dom method, but almost all browsers are supported, only get ELEMENT nodes

② Brothers node, all browsers support

1 element.nextsibling The next sibling node, which may be a non-element node, gets to the text node 2  Element.nextelementsibling gets next immediate sibling element, ignores whitespace   //  IE8 Previously unsupported this property 3         4 element.previoussibling The  previous sibling node, which may be a non-element node, gets to the text node 5  element.previoussibling Gets the previous sibling element, ignoring whitespace  //  IE8 This property was not previously supported

③ Brothers Element, IE8 previously did not support

1 previouselementsibling Previous sibling node 2  Nextelementsibling  Next Sibling node

The related concepts of DOM