JavaScript DOM Document Object Model

:( relationship attribute node properties ie low version with element is not supported)

childNodes- all child nodes (element, comment, text);
nodeType-- attribute represents the node type;
children-- acquisition element child
firstChild-- first child node (element, comment, text)
* FirstElementChild - the first element child
lastChild - the last child node (element, comment, text)
* LastElementChild - the last element child
parentNode-- parent element
offsetParent - Positioning parent
previousSibling - on sibling
* PreviousElementSibling - one element of sibling
nextSibling - the next sibling node
* NextElementSibling - the next element sibling

Node operations (additions and deletions):

Create a node --document.createElement ( 'div')

        > Document.createElement ( ' div ' ) creates an element node

         > document.createTextNode ( ' text ' ) create a text node 

        `` ` 
            var newLi = document.createElement ( ' Li ' ); 
            newLi.innerHTML = ' 444 ' ; 
        ` ``

Add Item --parent.appendChild (child) at the end of the element

        ```
            var ul = document.getElementsByTagName('ul')[0];
            ul.appendChild(newLi);
        ```

--OldNode.parentNode.insertBefore inserted before specified node element (newNode, oldNode);

        ```
            var li2 = document.getElementById('li2');
            var newLi1 = document.createElement('li');
            newLi1.innerHTML = '1-21-2';
            li2.parentNode.insertBefore(newLi1,li2);

        ```

Alternatively elements --replaceChild (newNode, oldNode)

        * If newNode already existing label, is to change the physical location of the tag 
        `` ` 
            var newLi2 = document.createElement ( 'Li' ); 
            newLi2.innerHTML = 'three hundred thirty-three' ;
             var LI3 = document.getElementById ( 'LI3' ); 
        
            // ul.replaceChild (newLi2, LI3); 
            li3.parentNode.replaceChild (newLi2, LI3); 
        `` `

Delete nodes --removeChild (delNode)

        ```
            var li5 = document.getElementById('li5');
            //ul.removeChild(li5);
            li5.parentNode.removeChild(li5);
            // li5.remove(); ie不支持
        ```

Copy node --cloneNode ()

        > The cloneNode () clone node, does not pass a reference, only the tag copying itself, not including the content
        
         > the cloneNode ( to true ) deep clones, copy all the contents of the tag and the tag inside

Getting element method:

- document.getElementById()

- document.getElementsByTagName() //[]

- document.getElementsByClassName () // [] ie version does not support low

        `
         @ Packaging method of acquiring compatible class name through all the elements of the browser 
            function getByClass (ele, CLS) {
                 // first obtain all the ele tag (tag name without distinction) 
                var Elements ele.getElementsByTagName = ( '*' );  
                 var ary = []; 
                 // traverse Elements 
                for ( var I = 0; I <elements.length; I ++ ) {
                     //   on ELES [I] .className 'Red CCC AA' 
                    // first class list of nouns into array 
                    var clsAry = Elements [I] .className.split ( '');   // [ 'Red', 'AA', 'CCC'] 
                        // traverse the array class names, if there is the same cls class name,This element is put into ary 
                        for (var j = 0; j < clsAry.length ; j++){
                            if(cls == clsAry[j]){
                                ary.push(elements[i]);  
                                break;  
                            }
                        }
                }
                return ary;   
            }
        ```

- document.querySelector ( '# box .red'); // Gets an element incompatible version ie low

- document.querySelectorAll ( '# box .red'); // get a set of elements incompatible version ie low

JavaScript DOM Document Object Model

Guess you like