JavaScript advanced programming DOM study notes_javascript skills-JS Tutorial-php.cn

Chapter 10 DOM
DOM is an API for XML and HTML documents: it specifies the attributes and methods for text node manipulation, and the specific implementation is implemented by the respective browsers.
1. Node hierarchy
1) Document node: document, the root node of each document.
2) Document element: The element is the outermost element of the document and the first child node of the document node.
3) Node type:
①Node is the base type of various node types in the DOM, sharing the same basic properties and methods.
□ Node.Element_NODE(1);
□ Node.ATTRIBUTE_NODE(2);
□ Node.TEXT_NODE(3);
□ Node.CDATA_SECTION_NODE(4);
□ Node. ENTITY_REFERENCE_NODE(5);
□ Node.ENTITY_NODE(6);
□ Node.PROCESSING_INSTRUCTION_NODE(7);
□ Node.COMMENT_NODE(8);
□ Node.DOCUMENT_NODE(9);
□ Node.DOCUMENT_TYPE_NODE(10);
□ Node.DOCUMENT_FRAGMENT_NODE(11);
□ Node.NOTATION_NODE(12);
The nodeType attribute of each node returns one of the above types, which is a constant .
The node type can be obtained by comparing the nodeType attribute with the numeric value.
②nodeName and nodeVlue attributes.
③The child node information of each node is stored in the childNodes attribute, and a NodeList object is stored in the childNodes attribute.
□ NodeList object, an array-like object, has a length attribute, but is not an instance of Array.
□ To access the nodes in the NodeList, you can use square brackets or use the item() method.
var firstChild = someNode.ChildNodes[0];
var secondChild = someNode.ChildNodes.item(1);
var count = someNode.childNodes.length;
□ Convert NodeList to array object .
function convertToArray(nodes){
var array = null;
try{
array = Array.prototype.slice.call(nodes,0); //Non-IE
}catch( ex){
array = new Array();
for(var i = 0,len = nodes.length; i array.push(nodes[i]);
}
}
return array;
}
④parentName attribute: points to the parent node in the document tree.
⑤previousSibling attribute and nextSibling attribute: previous/next sibling node.
⑥firstChild attribute and lastChild attribute: previous/next child node.
⑦hasChildNodes() method: Returns true if it contains child nodes, otherwise it returns false.
⑧appendChild() method: Add a child node to the end of the childNodes list and return the newly added node.
⑨insertBefore() method: two parameters: the node to be inserted and the node used as a reference. Return the newly added node.
⑩replaceChild() method: two parameters: the node to be inserted and the node to be replaced. Return the newly added node.
⑾removeChild() method: remove node.
⑿cloneNode() method: accepts a Boolean value. true means deep copy, copying nodes and sub-nodes. false means shallow copy, only copying the own node.
⒀nomalize() method: Process text nodes in the document tree.
4) Document type (for document objects)
①Document type represents a document, which is an instance of the HTMLDocument type and represents the entire HTML page. The document object is a property of the window object and can be accessed as a global object.
②documentElement attribute; this attribute always points to the element in the HTML page.
③body attribute; points directly to the

element.
④doctype attribute: Access , which is supported by different browsers. Of limited use.
⑤title attribute: The text of the title can be obtained and set.
⑥URL attribute: URL in the address bar.
⑦domain attribute: The domain name of the page (can be set, with restrictions)
⑧referrer attribute: Save the URL of the page linked to the current page
⑨getElementById() method: Pass in the ID of the element and return the element node.
⑩getElementsByTagName() method: Pass in the element name and return NodeList.
□ Returns an HTMLCollection object in HTML, similar to NodeList.
□ Access the HTMLCollection object: square bracket syntax, item() method, namedItem() method. The HTMLCollection object can also obtain the items in the collection through the name attribute of the element.
⑾getElementsByName() method: Returns all elements with the given name attribute.
⑿Special collections, these collections are HTMLCollection objects.
□ document.anchors: Contains all elements with the name attribute in the document.
□ document.applets: Contains all elements in the document.
□ document.forms: Contains all

elements in the document.
□ document.images: Contains all JavaScript advanced programming DOM study notes_javascript skills