DOM document object model (I)

One . An introduction to

1. What is? dom

Document object model ,W3C The standard programming interface recommended by the organization for handling extensible markup languages
DOM It's a W3C (World Wide Web Consortium) standard .
DOM Defines the criteria for accessing documents ：
“W3C Document object model （DOM） It's a platform - and language neutral interface , It allows programs and scripts to dynamically access 、 Update the contents of the document 、 Structure and pattern .”

file ： A page is a document ,DOM Use in document Express


Elements ： All the tags in the page are elements ,DOM Use in element


node ： All content in a web page is a node ( label , attribute , Text , Notes, etc. ),DOM Used in node Express

The document page loads from top to bottom , So there's a label first ,js Write it under the label

2.dom What can be done

Through this object model ,JavaScript Get the creation dynamic HTML All the power of ：
1.JavaScript Can change everything on the page HTML Elements
3.JavaScript Can change everything on the page HTML attribute
3.JavaScript Can change everything on the page CSS style
4.JavaScript Can delete existing HTML Elements and attributes
5.JavaScript Can add new HTML Elements and attributes
6.JavaScript It can be used for all existing in the page HTML Respond to events
7.JavaScript Can create a new... In the page HTML event

3.dom Trees

HTML DOM The model is structured as an object tree ：

DOM All the above can be regarded as objects . That is, a document is an object , The root element is also an object , Elements are also objects , Attributes are also objects , Text is also an object

---

Two . Get elements

1. according to ID obtain

getElementById() Method , To obtain a ID The element object of

Parameters id Is a case sensitive string
What is returned is the element object

    <div id="time">2019-9-9</div>
    <script> var timer = document.getElementById('time'); console.log(timer); console.log(typeof timer); //  The object returned  console.dir(timer); // console.dir() Print the elements of the object , Better view the properties and methods inside  </script>

2. Get... According to the tag name

getElementsByTagName() Method returns a collection of objects with a specified tag name

What is returned is the collection of obtained element objects , Stored as a pseudo array
Print the element objects in the traversal mode in turn
The obtained element object is dynamic

element.getElementsByTagName() You can get some tags in this element

<ul>
        <li>getElementsBytagName() obtain 1</li>
        <li>getElementsBytagName() obtain 2</li>
        <li>getElementsBytagName() obtain 3</li>
        <li>getElementsBytagName() obtain 4</li>
        <li>getElementsBytagName() obtain 5</li>
    </ul>
    <ul id="nav">
        <li> obtain 1</li>
        <li> obtain 2</li>
        <li> obtain 3</li>
        <li> obtain 4</li>
        <li> obtain 5</li>
    </ul>
    <script> // 1. What is returned is the collection of obtained element objects   Stored as a pseudo array  var lis = document.getElementsByTagName('li'); console.log(lis); console.log(typeof lis); console.log(lis[0]); // 2. Print the element objects in the traversal mode in turn  for (var i = 0; i < lis.length; i++) {
       console.log(lis[i]); } // 3. The obtained element object is dynamic  // 4.element.getElementsByTagName()  You can get some tags in this element  var nav = document.getElementById('nav'); //  obtain nav Elements  var navLis = nav.getElementsByTagName('li'); console.log(navLis); </script>

3. adopt HTML5 New method of obtaining

1.document.getElementsByClassName(‘ Class name ’), Returns the collection of element objects according to the class name

     var boxs = document.getElementsByClassName('box');

2.document.querySelector(‘ Selectors ’) Returns the first element object... Based on the specified selector

 var firstBox = document.querySelector('.box');
var nav = document.querySelector('#nav');
var firstLi = document.querySelector('li');

3.document.querySelectorAll(‘ Selectors ’) Returns a collection of all element objects according to the specified selector

  var allBox = document.querySelectorAll('.box');

The return is also a pseudo array

4. Special element acquisition

1. document.body obtain body Elements , return body Element object

 var bodyEle = document.body;

2. document.documentElement return html Element object

 var htmlEle = document.documentElement;

---

3、 ... and . event

1. An introduction to

Can be js Detected behavior （ Trigger – Response mechanism ）
HTML DOM Events allow Javascript stay HTML Register different event handlers in document elements .
Events are often used in conjunction with functions , The function is not executed before the event ！ ( If the user clicks the button ).

2. Three elements of the event

Event source ： The event is triggered by the object
Event type ： How to trigger what event
Event handler ： Complete by function assignment

    <button id="btn"> Tang Bohu </button>
    <script> //  Click a button   Pop-up dialog box  //  Three elements of the event   Event source , Event type , Event handler  // 1. Event source , The event is triggered by the object   Here's the button  var btn = document.getElementById('btn'); // 2. Event type , How to trigger what event  btn.onclick = function() {
       // 3. Event handler  alert(' Some autumn fragrance '); } </script>

3.DOM Flow of events

The event flow describes the order in which events are received from the page , Events are propagated between element nodes in a specific order when they occur , This broadcast process is dom Flow of events

Be careful
js Only one stage of capture or bubbling can be performed in the code
Event capture is rarely used in actual development , Generally, they pay more attention to the bubbling of events
Some events don't bubble , such as onblur,onfocus,onmouseenter,onmouseleave
onclick and attachEvent You can only get the bubbling stage

4. Perform event steps

Perform event steps
1. Get the event source
2. Registration events ( The binding event ) Common mouse events
3. Add event handler ( In the form of function assignment )

 <div>123</div>
    <script> //  Perform event steps  //  Click on div, Console output ' I was chosen ' // 1. Get events  var div = document.querySelector('div'); // 2. The binding event  // div.onclick // 3. Add event handler  div.onclick = function() {
       console.log(' I was chosen '); } </script>