JavaScript DOM 篇

DOM Document Object Model (Document Object Model)

How to get the page elements

1. The ID acquisition

getElementById(ID);

<body>
   <div id="card">
       Dawn of that beam of light
   </div>
   <script>
       document.getElementById(card);
   </script>
</body>

console.dir () print elements of the object of our return, a better view of the inside of the properties and methods

2. Get under the label name

Use document.getElementsByTagName () can return a set of tags with the specified name

 <ul>
        <Li> There is a sad </ li>
        <Li> northern winter if too warm in the summer Shanghai </ li>
        <Li> not find </ li>
        <Li> the world a better and you interlocking </ li>
    </ul>
    <script>
        // Get object collection element, stored in the form of an array of pseudo 
        var LIS = document.getElementsByTagName ( ' Li ' );
        the console.log (LIS); 
　　　　  the console.log (LIS [0]); // get the first Li
     </ Script>

You can also get all the child elements inside the specified tag name of an element (parent element)

element.getElementsByTagName ( 'tag name');

3. Get the new method by HTML5

document.getElementsByClassName ( 'class name') // Returns a collection element object class name

querySelector () Returns the first element of an object selector, which selector requires attention plus sign
querySelectorAll () Returns all selector element objects

<div class="box">123</div>
   <div class="box">456</div>
   <script>
       var boxs=document.getElementsByClassName('box');
       console.log(boxs);
       // 2.querySelector () Returns the first selector element object, which pay attention to the need to increase the symbol selector
        // 3.querySelectorAll () Returns all selector element objects 
       var NUM = document.querySelector ( ' . Box ' );
       console.log(num);
   </script>

4. Get special elements (body or html tags)

Obtaining body document.body;

Gets html document.documentElement;

Event three elements:

Event source, event type, event handlers

 <button id="btn">唐伯虎</button>
   <script>
       // implement pop-up dialog box click the button
        // Object 1. event source event to be triggered in here for the button 
       var btn = document.getElementById ( ' btn ' );
        // 2. How to trigger this type of event is a mouse click or time rollover etc. 
       btn.onclick = function () { // implements the dialog box Scholar mouse clicks 
           Alert ( ' Scholar ' );
       }
   </script>

Step events

1. Obtain the event source

2. Register an event (binding event)

3. Add the event handler (taking function assignment program)

js The DOM can edit the content, structure and style of the web structure, may be utilized to modify the DOM operating elements inside the content element, attributes, etc.

Change element content:

element.innerText content from the starting position to the end position, but his html tag is removed. Meanwhile spaces and line breaks will be removed

element.innerHTML starting position to the end position of the entire content, including html tags, while retaining spaces and line breaks

<body>
  <Button> displays the current system time </ button>
  <Div> time </ div>
  <script>
      // achieve div click the button in the text into the current time
       // 1. Obtain elements 
      var btn = document.querySelector ( ' the Button ' );
       var div = document.querySelector ( ' div ' );
       // 2. Registration event 
      btn = .onclick function () {
          div.innerText = getDate (); // directly after the time when the phrase is not within the function, refresh, do not click on the button

}

      getDate function () {
           var DATE = new new a Date ();
           var year = the Date.getFullYear ();
           var month The date.getMonth = () + . 1 ;
           var a dates = date.getDate ();
           var Day = date.getDay () ;
           var ARR = [ " Sunday " , " Monday " , " Tuesday " , " Wednesday " , " Wednesday " , " Thursday " , "Friday ' , ' Saturday ' ];
           return  ' today ' + year + ' in ' + + month The ' May ' + + a dates ' Day ' + arr [Day];
      }
  </script>
</body>

Difference innerText (non-standard) and innerHTML (w3c standard, more commonly used) of

① the former does not identify the html tag, which identify

 <div></div>
  <script>
      var div=document.querySelector('div');
      div.innerText = ' <strong> Today: </ strong> 2019 ' ; // output <strong> Today: </ strong> 2019 
      div.innerHTML = ' <strong> Today: </ strong> 2019 ' ; // press over effect output 
  </ script>

② Both properties are read and write, you can get the content label inside

 <p>
      I am writing
      <span>345</span>
  </p>
  <script>
      var p=document.querySelector('p');
      console.log (p.innerText); // I was writing 345 
      console.log (p.innerHTML); / * I am writing
                                 <span>345</span>*/
  </script>

Modify element properties

Guess you like