JS Learning Note 5_dom

Source: Internet
Author: User
Tags access properties shallow copy

Common Properties for 1.DOM nodes (all nodes are supported)
    1. NodeType: element 1, attribute 2, text 3

    2. NodeName: The uppercase form of the element tag name

    3. NodeValue: element node is null, text node is text content, attribute node is property value

    4. Relationship Properties: Parentnode,childnodes,nextsibling,previoussibling,firstchild,lastchild

    5. Ownerdocument: Documents node (Document object)

2. Manipulating DOM nodes (increment/delete/change)
    1. 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

    2. InsertBefore (node, targetnode); Insert node before TargetNode

    3. ReplaceChild (node, targetnode); Replace TargetNode with node, note: TargetNode is not destroyed after replacement, but it becomes a fragmented document outside the DOM tree

    4. RemoveChild (node); Remove node, note: node is not destroyed after removal, the method returns a reference to node

    5. 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

    6. Normalize (); Used to delete empty text nodes, merging adjacent text nodes

3.document Object-related
    1. document.documentelement; point to

    2. Document.body; point to <body> elements

    3. Document.title; point to <title> element, direct assignment can modify document title

    4. 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

    5. 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

    1. 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

    2. document.createTextNode (text); Document.createelement (tagName); creating elements

4. Element node Correlation
    1. 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)

    2. 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

    3. 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

    4. 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)

5. Text node

Node.nodevalue or node.data can access text content

6.DOM Performance Optimization
  1. Minimize 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 ';} 

    Common Htmlcollection objects are: document.forms, Document.images, Document.links, document.anchors

  2. 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

  3. 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.