DOM Document Object

DOM Document Object

1. HTMLCollection object

<1>

GetElementById ('')
GetElementsByTagName ('');
GetElementsByName ('');

<2>
Document. anchors
Document. forms
Document. images
Document. links

<1> and <2> both return HTMLCollection objects.

NamedItem ('') Method
Var myImg = images. namedItem ('small ');
Var myImg = images ['small'];
Equivalent

2. HTMLElement object operations

Ele. innerHTML; // set the internal htmlele. innerText; // set the internal textele. appendChild (child); // Add the child node ele. insertBefore (child, null); // equivalent to ele. appendChild (child); ele. insertBefore (child, benchmarkNode); // insert a subnode (benchmarkNode is the benchmark node) insertAfter (ele, child, benchmarkNode) before the benchmark node ); // insert a subnode after the baseline node (which must be implemented by yourself) ele. replaceChild (child, oldNode); // replace the child node ele. removeChild (child); // remove the node ele. cloneNode (); // node clone (return the cloned node) document. createElement (ele); // create an element node document. createTextNode (txtEle); // create a text node

Extension: implement the insertAfter Method

function insertAfter(ele, newNode, benchmarkNode){ele.insertBefore(newNode, benchmarkNode.nextSibling);}

Iii. node Traversal

ChildNodes (including all element and text node sets) The first subnode of firstChild is equivalent to childNodes [0] lastChild, and is equivalent to childNodes [childNodes. length-1]; parentNode parent node (only one) nextSibling same level next sibling node previousSibling same level last sibling Node

4. retrieving, setting, and traversing attributes

Var mydiv = document. createElement ('div ');

<1>
Mydiv. setAttribute ("class", "ping ");
Console. log (mydiv. getAttribute ("class "));

<2>
Mydiv. className = "ping ";
Console. log (mydiv. className );

<3>
Div. removeAttribute ("class"); // remove the property

Tip:
<1> you can set all attributes, including Custom Attributes. <2> you cannot set custom attributes.

Attributes

The Element type is the only DOM node type that uses the attributes attribute.
The attributes attribute contains a NamedNodeMap, which is a dynamic set.
Each feature of an element is represented by an Attr node, and each node is saved in the NamedNodeMap object.

The NamedNodeMap object contains the following methods and attributes:

GetNamedItem (name );
RemoveNamedItem (name );
SetNamedItem (node );
Item (pos );

Attributes. length;

Test:

var mydiv = document.createElement('div');mydiv.setAttribute('id', 'wrap');mydiv.setAttribute('class', 'ping');mydiv.setAttribute('bg', 'yuyu');var oldAttr = mydiv.attributes.getNamedItem('bg');console.log(oldAttr);//yuyuvar newAttr = document.createAttribute('conn');newAttr.nodeValue = "link";mydiv.attributes.setNamedItem(newAttr);console.log(mydiv.attributes);console.log(item(2));

Extension: traversing element attributes

function outputAttribute(ele){var res = [];for(var i=0, len = ele.attributes.length; i < len; i++){var obj = {};obj.attrname = ele.attributes[i].nodeName;obj.attrvalue = ele.attributes[i].nodeValue;res.push(obj);}return res;}var mydiv = document.createElement('div');mydiv.setAttribute('id', 'wrap');mydiv.setAttribute('class', 'ping');mydiv.setAttribute('bg', 'yuyu');var attrs = outputAttribute(mydiv);console.log(attrs);

V. nodeType, nodeValue, and nodeName

Console. log (tagName = nodeName) // trueconsole. log (document. nodeType); // 9console. log (document. nodeValue); // nullconsole. log (document. nodeName); // # documentvar mydiv = document. createElement ('div '); console. log (mydiv. nodeType); // 1console. log (mydiv. nodeValue); // nullconsole. log (mydiv. nodeName); // DIV (uppercase by default) var mytext = document. createTextNode ('txt '); console. log (mytext. nodeType); // 3console. log (mytext. nodeValue); // txtconsole. log (mytext. nodeName); // # text

Extension 1:
Obtain the element subnode set of a node (non-text node ):
It is determined by the values of ele. childNodes [I]. nodeType.

Element: ele. childNodes [I]. nodeType = 1
Text: ele. childNodes [I]. nodeType = 3
Document: ele. childNodes [I]. nodeType = 9

function getRealChildren(ele) {var real = [];for (var i = 0, len = ele.childNodes.length; i < len; i++) {if (ele.childNodes[i].nodeType == 1) {real.push(ele.childNodes[i]);}}return real;}

Extension 2:
Obtain the parent node object of a child node without a text node:
Remove text nodes from subnodes by traversing

function getRealParentObj(ele){for (var i = 0; i < ele.childNodes.length; i++) {if (ele.childNodes[i].nodeType == 3) {ele.removeChild(ele.childNodes[i]);}}return ele;}