Foreword: This is the author's own understanding and arrangement after learning. If there are any mistakes or doubts, please correct them and I will keep updating them.

getElementById()

• The obj.getElementById(id) method receives a parameter (the ID of the element), returns the element object if it is found, and returns null if it does not exist.
• Any HTML element can have an id attribute, which must be unique in the document.
• If multiple id names occur in the browser, the CSS style takes effect on all elements of the id name, but the javascript script only takes effect on the first element that appears the id name.

getElementsByTagName()

• The obj.getElementsByTagName(tagName) method receives a parameter, that is, to get the label name of the element, and returns the class array object HTMLCollection containing 0 or more elements. You can use the square bracket grammar or item() method to access items in the class array object, and the length attribute represents the number of elements in the object.

getElementsByName()

• The obj.getElementsByName(name) method returns all elements with a given name property.
• IE9 and browsers below support only getElementsByName() method on form elements.
• Using the getElementsByName() method in IE9 and browsers below also returns elements matched by id attributes. Therefore, do not set the name and id attributes to the same value;

getElementsByClassName()

HTML5 adds getElementsByClassName() method;

Class is a reserved word in javascript, so the className attribute is used to store the class attribute value of HTML.

• The obj.getElementsByClassName(classaName) method receives a parameter, a string containing one or more class names, and returns the class array object HTMLCollection with all the elements of the specified class. When multiple class names are passed in, the order of class names is not important. Similar to getElementsByTagName(), this method can be used for both HTML document object and element object.
• IE8 and below browsers do not support getElements ByClassName ();
• When manipulating class class class names, you need to add, delete and replace class names through the className attribute. Because className is a string, even if only a part of the string is modified, the value of the entire string must be set each time. To delete a class name from the className string, you need to split the class name, delete the unwanted one, and then reassemble it into a new string.

classList

• HTML5 adds a classList attribute to all elements. This classList attribute is an example of a new set type DOMTokenList. It has a length attribute that indicates how many elements it contains. To get each element, you can use item() method or bracket method.
• IE9 and browsers below do not support classList attributes;

ClassList has the following four methods. We mainly use these methods to manipulate class names. With classList attributes, className attributes have little use.

1. obj.classList.add(value); add a given string value to the list without returning a value, and do not add if the value already exists;
2. obj.classList.contains(value); indicates whether a given value exists in the list, returns true if it exists, otherwise returns false;
3. obj.classList.remove(value); delete a given string from the list without returning a value;
4. obj.classList.toggle(value); if a given value already exists in the list, delete it and return false; if there is no given value in the list, add it and return true;

        <div class="test abc"></div>
        <script>
            var oTest = document.getElementsByClassName('test')[0];
            var oTestAbc = document.getElementsByClassName('test abc')[0];
            var oAbc = document.getElementsByClassName('abc')[0];
            console.log(oTest === oTestAbc);//true
            console.log(oAbc === oTestAbc);//true
            console.log(oAbc === oTest);//true
            
            console.log(oTest.classList);//["test", "abc", value: "test abc"] 
            console.log(oTest.classList[0]);//"test" 
            console.log(typeof oTest.classList[0]);//"string" 
            console.log(oTest.classList.item(0));//"test" 
            
            //add()Adds a given string value to the list without returning a value, and does not add if the value already exists;
            oTest.classList.add('def');
            console.log(oTest.classList);//["test", "abc", "def", value: "test abc def"] 
            
            //contains()Represents whether a given value exists in the list and returns if it exists true，Otherwise return false;
            console.log(oTest.classList.contains('def'));//true
            console.log(oTest.classList.contains('abcde'));//false
            
            //remove()Delete the given string from the list without returning a value.
            oTest.classList.remove('abc');
            console.log(oTest.classList);//["test", "def", value: "test def"]
            
            //toggle()If a given value already exists in the list, delete it and return it false；If there is no given value in the list, add it and return it true;
            console.log(oTest.classList.toggle('hello'));//true
            console.log(oTest.classList);//["test", "def", "hello", value: "test def hello"]
            console.log(oTest.classList.toggle('test'));//false
            console.log(oTest.classList);//["def", "hello", value: "def hello"]
        </script>

Selector API

HTML5 extends querySelector(), querySelector All () and matchesSelector() by CSS Selector The function of querying DOM documents to get references to elements becomes native API. The parsing and tree query operations are accomplished in the browser by compiled code, which greatly improves the performance.

• The obj.querySelector(selector) method receives a CSS selector, returns the first element that matches the pattern, and returns null if no matching element is found. This method can be used for both document type and element element type. IE7 and below are not supported.
• Obj. querySelector All (selector) receives a CSS selector and returns a class array object. If there are no matching elements, it returns an empty class array object instead of null; IE7 and below are not supported;
• The obj.matchesSelector(selector) method receives a CSS selector parameter, returns true if the calling element matches the selector, or false;
• obj.matchesSelector(selector) has compatibility problems. IE9 + browser supports msMatchesSelector() method, firefox supports mozMatchesSelector() method, safari and chrome support webkitMatchesSelector() method.

        <div id="wrapper">
            <ul class="box">
                <li class="no1">first line</li>
                <li class="no2">Second line</li>
                <li class="no3">The third line</li>
                <li class="no4">Line 4</li>
                <li class="no5">Fifth line</li>
            </ul>
        </div>
        <script type="text/javascript">
            var oWrapper = document.querySelector('#wrapper');
            var oUl = oWrapper.querySelector('ul');
            
            var oLiNo1 = oWrapper.querySelector('.no1');
            //obj.querySelector(selector) Method receives one CSS The selector returns the first element that matches the pattern.
            var oLiFirst = oWrapper.querySelector('li');
            var oFirstLi = oWrapper.querySelector('ul > li');
            console.log(oLiNo1 === oLiFirst);//true
            console.log(oLiNo1 === oFirstLi);//true
            console.log(oLiFirst === oFirstLi);//true
            console.log(oLiNo1.innerHTML , oLiFirst.innerHTML , oFirstLi.innerHTML);//The first line, the first line, the first line
            
            //obj.querySelectorAll(selector) Receive one CSS Selector, returns an array object of class
            var oWrapperAll = document.querySelectorAll('#wrapper');
            console.log(oWrapperAll);//[div#wrapper]
            console.log(oWrapperAll[0] === oWrapper);//true
            
            var oWrapperArray = oWrapperAll[0];
            var oLiFirstAll = oWrapperArray.querySelectorAll('li');
            var oLiFirstArrayNo1 = oWrapperArray.querySelectorAll('li')[0];
            console.log(oLiFirstArrayNo1 === oLiNo1);//true
            console.log(oLiFirstAll[1].innerHTML);//Second line
            
//            console.log(oWrapperArray.matchesSelector('#wrapper'));
            //TypeError: oWrapperArray.matchesSelector is not a function
            
            console.log(oWrapperArray.webkitMatchesSelector('#wrapper'));//true
            //obj.matchesSelector(selector) Compatibility issues,
            //IE9+Browser support msMatchesSelector() Method,
            //firefox Support mozMatchesSelector() Method,
            //safari and chrome Support webkitMatchesSelector() Method.
        </script>

When using the selector API, it should be noted that:

• The class array object obtained by querySelectorAll() method is non-dynamic and real-time, so if you want to calculate the actual value of length and so on, you'd better retrieve it again; of course, the previous getElementById() and so on have no such problem;
• When the selector class method is invoked on an element, the specified selector is still matched throughout the document, and the result set is filtered so that it contains only descendant elements of the specified element. This seems unconventional because it means that the selector string can contain the ancestors of the elements, not just the matched elements; therefore, if a descendant selector occurs, in order to prevent this problem, the selector of the current element can be explicitly added to the parameters;

        <div id="wrapper">
            <ul class="box">
                <li class="no1">first line</li>
                <li class="no2">Second line</li>
                <li class="no3">The third line</li>
                <li class="no4">Line 4</li>
                <li class="no5">Fifth line</li>
            </ul>
        </div>
        <script type="text/javascript">
            var oWrapper = document.querySelector('#wrapper');
            var oUl = oWrapper.querySelector('ul');
            
            var oLiLast = oUl.querySelector('li:last-of-type');
            var oLiAll = oUl.querySelectorAll('ul > li');
            console.log(oLiLast.innerHTML);//Fifth line
            console.log(oLiAll.length);//5
            
            var newLi = document.createElement('li');
            newLi.innerHTML = 'Additional Li，Put it at the end';
            oUl.appendChild(newLi);
            //querySelectorAll() The class array object obtained by the method is non-dynamic and real-time.
            console.log(oLiLast.innerHTML);//Fifth line
            console.log(oLiAll.length);//5
            console.log(oUl.querySelector('li:last-of-type').innerHTML);//Additional Li，Put it at the end
            console.log(oUl.querySelectorAll('ul > li').length);//6
        </script>
        
        
        
        <div class="wrapper">
            <div class="test1"></div>
            <div class="test2"></div>
        </div>
        <script type="text/javascript">
            var oWrapper = document.querySelector('.wrapper');
            //selector When a class method is invoked on an element, the specified selector is still matched throughout the document, and the result set is filtered so that it contains only descendant elements of the specified element.
            //This seems unconventional, because it means that the selector string can contain the ancestors of elements, not just the matched elements.
            console.log(oWrapper.querySelectorAll('div div'));//[div.test1, div.test2]
            //My understanding of this code is acquisition oWrapper Among the elements of internal descendants, div Nested div，This is not the case here, so an empty array should pop up.
            
            //If a descendant selector occurs, to prevent this problem, you can explicitly add a selector for the current element in the parameter
            console.log(oWrapper.querySelectorAll('.wrapper div div'));//[]
            console.log(oWrapper.querySelectorAll('.wrapper div'));//[div.test1, div.test2]
        </script>

Reference material

　　God's explanation is clearer, and his other essays are also very good.， http://www.cnblogs.com/xiaohuochai/p/5795796.html