Acquisition of DOM learning elements JS

Catalog

DOM Trees

How to get elements

getElementById according to id To choose

getElementByTagName Select according to the tag name

getElementByClassName Choose according to the name of the class , The class is xxx All will be selected

H5 New ways to get elements

obtain body and html

---

DOM（Document Object Model) Document object model , yes W3C Organizations recommend ways to handle extensible markup languages （HTML or XML） Standard programming interface . Through these interfaces, you can change the content of the web page 、 Structure and pattern .

DOM Trees

How to get elements

getElementById according to id To choose

 var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // 4. It returns an object 
        console.dir(timer);
        // 5. Print the element object we return , Better view the properties and methods inside .

getElementByTagName Select according to the tag name

  // What is returned is the collection of obtained element objects , The resulting object is dynamic , Stored as a pseudo array , With length and index number , But no pop,push Other methods 
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        console.log(lis.length);
        // We want to print the element objects in turn , Take traversal 
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
        // There is also a pseudo array in the page 
        // There is no such element , Returns an empty pseudo array 

        //  obtain ol The inside can't pass document  By parent element  ( You must specify which element )
        // var ol = document.getElementsByTagName('ol');
        // The return is still a pseudo array [ol] Form cannot be our parent element 
        // console.log(ol[0].getElementsByTagName('li'));
        // It's a lot of trouble   We can give ol To specify a id id Is the only one. 
        var ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li'));

getElementByClassName Choose according to the name of the class , The class is xxx All will be selected

// Select according to the name of the class selector 
        console.log(document.getElementsByClassName('box'));

H5 New ways to get elements

querySelector You can choose according to the selector （ tag chooser , Class selectors ,id Selectors ） Choose the first element

If you want to use all

querySelectorAll

        //querySelector(' Selectors '); According to the specified selection, it returns the first element object 
        //  Class selection , label ,id...
        // The selectors inside should be marked with their own selectors 
        console.log(document.querySelector('#nav'));
        console.log(typeof document.querySelector('li'));

        // 3querySelectorAll(' Selectors ') Returns all... According to the specified selector    Pseudo array 
        console.log(document.querySelectorAll('.box'));

obtain body and html

1. obtain body, direct document.body

2. obtain html,document.documentElement

 

  // 1. obtain body Elements 
        console.log(document.body);
        var bod = document.body;
        console.dir(document.getElementsByTagName('div'));
        console.dir(bod); //object
        //2. obtain html
        console.log(document.documentElement);