## Judgment
Document object model Document Object Model
Dom tree
html
|
head body
| |
meta title div
|
the
|
Do you li
Js in the world, each element dom tree are seen as an object, the object will have properties and methods
What dom dom node operation to learn to find elements Element CRUD style operation bindings and other events
## event
Three elements 1 event source who happened to Event 2 Event specific behaviors such as click, mouse over, keyboard press ...
3 event handlers events lead to any results
Zang read magic spell turn on the lights
How to handle events program js
## get the page elements
document.getElementById("**");
document.getElementsByTagName("p");
document.getElementByName()
document.getElementByClassName()
Html5：
document.querySelector()
document.querySelectorAll()
7findEle.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <p id="foo"></p> <div name="foo"></div> <ul> <li class="demo">111</li> <li>222</li> <li class="demo">333</li> </ul> <div class="demo"></div> <script> =attirevardocument.getElementsByName ( " foo " ); // the console.log (oDiv the instanceof Object T, the Array F.); oDiv [ 0 ] .style.color = " Blue " ; // only supported after IE9 var on ELES = document.getElementsByClassName ( " Demo " ); the console.log (eles.length); //. 3 // querySelector querySelectorAll the H5 high common version of the browser selector var P1 = document.querySelector ( " #foo " ); the console.log (P1); var eles2= document.querySelectorAll(".demo"); console.log(eles2); </script> </body> </html>
