Home > Developer > Web Develop
NodeType: element 1, attribute 2, text 3
NodeName: The uppercase form of the element tag name
NodeValue: element node is null, text node is text content, attribute node is property value
Relationship Properties: Parentnode,childnodes,nextsibling,previoussibling,firstchild,lastchild
Ownerdocument: Documents node (Document object)
AppendChild (node) adds a node to the end of the ChildNodes list for the current node. If node already exists, move node to the current node
InsertBefore (node, targetnode); Insert node before TargetNode
ReplaceChild (node, targetnode); Replace TargetNode with node, note: TargetNode is not destroyed after replacement, but it becomes a fragmented document outside the DOM tree
RemoveChild (node); Remove node, note: node is not destroyed after removal, the method returns a reference to node
CloneNode (true/false); Copy a node that is exactly the same as the current node, if True deep copy, otherwise shallow copy,ie will copy the relevant event handler , other browsers will not
Normalize (); Used to delete empty text nodes, merging adjacent text nodes
document.documentelement; point to
Document.body; point to <body> elements
Document.title; point to <title> element, direct assignment can modify document title
Document. url; get full URL
Document.domain, get the domain name, you can directly assign a value to set the domain name, when multiple frames in the page need to communicate, you must modify the property to remove cross-domain security restrictions
document.referrer; Gets the URL of the previous page, possibly an empty string
Find element
document.getElementById (str);
document.getElementsByTagName (str); Returns a collection, accessed in square brackets syntax, which can be a string representation of an element by the value of the Name property (Str can be * to take all DOM elements)
Document.getelementsbyname (str); More for radio button groups
P.S. The first two DOM operations apply to all XML documents, and the last one applies only to HTML documents. As for HTML5 supported Document.queryselector (str) and Document.getelementsbyclassname (str) are not discussed here, the 3 methods listed above are all browser-compatible
document.write (str); document write, direct call in document loading process outputs content at specified location, overriding entire page if placed in Load event handler
document.createTextNode (text); Document.createelement (tagName); creating elements
ELEMENT node properties: ID, title (similar to tooltip), ClassName, are both readable/writable (when writing native JS code these 3 properties are very common, especially className, very convenient)
Elem.getattribute (attr); Gets the value of the Attr property, you can also get a custom property, but the custom attribute in HTML5 should be prefixed with "data-" (of course, no matter, just the specification), with Elem.dataset.attr get
Elem.setattribute (attr, value); Set property values to set custom properties only, because custom properties cannot be set directly
Elem.removeattribute (attr); Delete properties and values ([ie6-] not supported )
P.S. General direct access properties, such as Elem.id, Elem.style, and so on, Get/setattribute are not commonly used (read/write custom properties only)because the style and onclick or other event properties are accessed in a functional way returns a string , and direct access can return an actionable object (such as a function reference), so the element properties are generally accessed directly
Attributes property: elem.attributes[' id '].nodevalue = value, or you can access the property in this way, but more often use the attributes property to traverse the element property
NodeType detection should be added when traversing the nodes of an element, as some browsers will also treat whitespace characters between tags as nodes (Unicode signed BOM)
Node.nodevalue or node.data can access text content
6.DOM Performance OptimizationMinimize the number of access NodeList
NodeList, NamedNodeMap, and Htmlcollection are live updates , The return value of the document.getelementbyxxx is the type. You should minimize the number of accesses to the nodelist because you need to check the DOM tree for access, and there is a small performance loss . You can save a reference to a NodeList object, such as the following code:
for (var i = 0;i < 100;i++) { document.getElementsByTagName (' li ') [i].classname = ' disabled ';} This is simply too hurtful, and a better approach is:
var lis = document.getelementsbytagname (' li '); for (var i = 0;i < 100;i++) {lis[i].classname = ' disabled ';} The Common Htmlcollection objects are: document.forms, Document.images, Document.links, document.anchors
Use DocumentFragment to avoid multiple "live updates"
DocumentFragment is a relatively popular but very useful node, in performance optimization is particularly important, when you need to insert a large number of DOM nodes, we have two choices: either one to go to the DOM tree, or insert the document fragment, and then the document fragment into the DOM tree. The first way is to update the n-th DOM tree, and the second method only needs to be updated 1 times, for example:
Create document fragment var Frag = Document.createdocumentfragment ();//Insert node var nodes = null, Text = Null;for (var i = 0;i < 10;i++) { node = document.createelement (' P '); Text = document.createTextNode (' paragraph ' + i); Node.appendchild (text); Frag.appendchild (node);} Insert the document fragment that carries the node into the DOM tree Document.body.appendChild (Frag);Document fragmentation does not exist in the DOM tree, and inserting fragments into the DOM tree is actually inserting the nodes it carries, and document fragmentation is an invisible container. Of course, you can create a div as a container, as well as create a document fragment, as long as you can avoid N-site updates , because any node on the DOM tree updates when the browser will re-render the page, which means that a large number of style numerical calculations
Performance differences in Getelementbyxxx
ID query is the fastest, tagname second, classname slowest. Of course, these differences can be ignored in general, but Mobile pages should be fully considered, after all, the mobile side of the PC is not so good conditions. In addition, saving a reference to a frequently used element can reduce unnecessary DOM lookups and improve performance.
JS Learning Note 5_dom
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
