上篇博客提到js是純oop思想的語言 也就是在使用js編程的時候注重的是：什么時候 什么東西 做什么。
之前提到Js一經加載會馬上執行，如果我們要控制的對象在js代碼的下面那么網頁被打開時js會先被執行然后加載下面的html代碼，當js被執行的時候，下面的html代碼還沒加載到，js控制的對象還沒有存在於當前的頁面這個時候js就會報錯，提示找不到對象，根據這個原理呢，我們編寫js代碼的時候，要盡量把js代碼寫在html下面以確保所有的html代碼全部被加載，而像一些自定義函數之類的js定義，則應該要寫在html頁面的最上面，比如<head>里面，以確保下面的js代碼運行時可以找到這個自定義函數，之前說到了document對象，它是整個html文檔對象，也是所有html對象的根源，因為所有的html代碼都是寫在頁面內，不會寫在頁面的外面，我們想控制一個對象，就要得到代表這個對象的量，document最容易這個詞就表示了這個量，但是，我們在實際效果中我們要控制的往往不是document本身，而是它里面的html元素，比如<div><input>之類的，為了方便的我們找到文檔里的html元素，document給我們提供了兩個常用的方法。
getElementById,getElementByTagName,這兩個名字是區分大小寫的，getElementByTagName可以讓我們通過html標簽名來找到這個html元素，getElementById可以通過我們定義的id來找到html元素，每個html元素都是一個對象，既然是對象就有自己的屬性和方法，我們先說下document.getElementByTagName方法，這個可以通過標簽名字找到，但一個html頁面中往往不止一個叫這個名字的，所以這個方法會返回一個“數組”，“數組”中的每一個量就對應每一個用這個標簽名的東西，下面實踐一下，
<html> <body> <div>第一個</div> <div>第二個</div> <script type="text/javascript"> var divs = document.getElementsByTagName('div'); alert(divs); </script> </body> </html>
返回值還是一個對象，那怎么證明是一個數組呢，統計下它有多少個索引就可以了，由於在js中每一個常規的量都是用對象的方法來表達，如果真是一個數組對象的話它就會知道自己喲多少個索引，也就是屬性length alert(divs.length);結果彈出div的總數，這個就是數組的總數，php中我們知道數組由多個量組成的，由於getElementsByTagName方法會返回使用這個標簽的所有對象，它只能用數組的形式給我們裝回來，那要怎么讀取其中一個量呢，和php是一樣的用[] divs[0]就是取回第一個量 也就是頁面中第一個使用這個標簽的對象，之前提到凡是自身有屬性，又可以再標記中寫東西的html標簽都是DOM對象，<標簽 屬性=屬性值>內容</標簽>凡是符合的都是DOM對象，那上面的標記的屬性是否可以直接讀取呢，對象.屬性，用這種方法我們可以試一試，
<html> <body> <div align="center">第一個</div> <div>第二個</div> <script type="text/javascript"> var divs = document.getElementsByTagName('div'); alert(divs[0].align); </script> </body> </html>
很顯然是可以讀取的 那么是否可以賦值呢？
alert(divs[0].align="right");可以看到產生的相應的變化，對於js和html來說這個很直觀，如果要讀取對象的內容，這意味着內容應該是一個屬性，而不是方法，因為內容是名詞 不是做什么（方法），DOM有兩個屬性表示內容，一個是innerHTML另一個是innerText,, innerHTML是指內容里的一切包含html代碼在內，innerText只有文字，因為我們的html元素里面還可能嵌套額外的html標簽，我們試一試，
<html> <body> <div align="center"><h1>第一個</h1></div> <div>第二個</div> <script type="text/javascript"> var divs = document.getElementsByTagName('div'); alert(divs[0].innerHTML); </script> </body> </html>
下面說說DOM對象的getElementById 網頁做大之后div可能很多，要一個一個去算是很累人的，getElementById,提供了這個便利，只要在html某個標簽中指定一個id屬性，就可以通過getElementById方法找到，
<html> <body> <div align="center"><h1>第一個</h1></div> <div id="two">第二個</div> <script type="text/javascript"> var divs = document.getElementById("two"); alert(divs.innerHTML); </script> </body> </html>
通過id找到對象然后打印對象的內容，相對getElementsByTagName是一種精確地查找，
如果說我們要找一個表單對象呢，比如<input type="text" name="username" id="username" />
在制作用戶注冊的時候 往往有多個表單元素要填寫，如果填寫錯了一個提交了才發現就要全部重寫了，最好的辦法呢，是用戶提交前知道那地方錯了，這個時間的把握非常重要，也就是說這個js不是一開始就運行的，那什么時候運行呢，我們在填寫一個表單的時候填寫完之后，當表單按鈕被點擊的時候，點擊和提交之間，例子如下：
<form> <input type="text" name="username" id="username" /> <input type="submit" id="b" value="提交" /> </form>
表單如上，上面說到點擊的時候說明是點擊事件onclick 我們首先找到它
var but = document.getElementById('b');
but.onclick=click;
然后給它的oncilck事件綁定一個方法，要檢查的是username填寫的名字，先找到它，
var inp = document.getElementById("username");這是一個input對象 填寫東西是什么呢，這不是一個DOM對象，它沒有innerText,input對象都有value屬性 默認是空的，
<form> <input type="text" name="username" id="username" /> <input type="submit" id="b" value="提交" /> </form> <script type="text/javascript"> function onclick(){ var inp = document.getElementById("username"); var con = inp.value; alert(con); } var but = document.getElementById("b"); but.onclick=click(); </script>
找到會被點擊的東西 然后給它的點擊事件綁定click方法，click方法的任務是找到表單 然后讀取它的值，最后彈出這個值
全部代碼如下，
<html> <body> <div align="center"><h1>第一個</h1></div> <div id="two">第二個</div> <form> <input type="text" name="username" id="username" /> <input type="submit" id="b" value="提交" /> </form> <script type="text/javascript"> function click(){ var inp = document.getElementById("username"); var con = inp.value; if(con=='') alert("用戶名不能為空"); } var but = document.getElementById("b"); but.onclick=click; </script> </body> </html>
在此注意：but.onclick=click而不是but.onclick=click(),我換一種寫法就會看懂了，在面向對象中由於有事件這一概念，而事件，要執行一個方法，或者說一個過程，更准確的表達代碼如下
but.onclick= function(){
var inp = document.getElementById("username");
var con = inp.value;
if(con=='')
alert("用戶名不能為空");
}
把一個過程交給一個事件，或者如下寫
var click= function(){
var inp = document.getElementById("username");
var con = inp.value;
if(con=='')
alert("用戶名不能為空");
}
這樣寫就清晰多了。
下面繼續表單的問題，就是表單提交以后即使沒有填寫還是會被提交，因為submit的確被點擊了，我們在此可以改成button，
<html> <body> <div align="center"><h1>第一個</h1></div> <div id="two">第二個</div> <form id=”form”> <input type="text" name="username" id="username" /> <input type="button" id="b" value="提交" /> </form> <script type="text/javascript"> function click(){ var inp = document.getElementById("username"); var con = inp.value; if(con==''){ alert("用戶名不能為空"); return false; } document.getElementById("form").submit(); } var but = document.getElementById("b"); but.onclick=click; </script> </body> </html>
當檢查到用戶名為空的時候，彈出一個提示框，然后用 return 返回，以中斷自定義函數的執行。不然提示完了，下面的代碼還是會被執行的。
return 在 PHP 里說過的，是返回值，在自定義函數中出現的時候，會中斷自定義函數的執行，並返回 值。在這里，其實返回什么不重要，只是為了中斷自定義函數而已。如果不想彈出提示框，同學們可以自行發揮想像力。比如，指定哪個對象，或者 div 顯示什么。div 是 DOM 對象，innerHTML 屬性，即然可以用於讀出內容，當然也可以用於寫入內容了。
下面說說子對象，
document.getElementById() 這個的意思是，在文檔里找到這個ID。如果我不想在一個文檔里找呢？我想在指定范圍里找呢？
比如，一個 DIV 里面還有N個 DIV。或者，一個 <ul> 里的所有 li。這就涉及一個子對象的問題，對象里面還有對象。雖然可以給 ul 里的每個 li 都指定 ID ，但是太麻煩了。我們可以先找到這個 ul 再找里面的 li。
<ul id="list"> <li>第一個</li> <li>第二個</li> </ul>
要找到這個 ul 很容易，只要用 getElementById 就可以。
var list = document.getElementById("list");
之前說過，符合這個格式的，都是 DOM 對象。而 getElementById 和 getElementsByTagName 方法，都是 DOM 對象的方法。也就是說，只要是 DOM 對象，就可以用這個方法，而不是局限於 document。document 是整個文檔對象，也只是一個對象。
var list = document.getElementById("list");
var lis = list.getElementsByTagName("li");
這樣，我們就可以得到所有的 li 了，而且，只是這個 ul 里的。為了方便起見，我們可以連起來寫。
var lis = document.getElementById("list").getElementsByTagName("li");
在文檔里找到 list ，然后在里面找到所有 li。li 就是 ul 的子對象。
所有的 HTML 標簽，都是 document 的子對象。如果把它們用一個量來表示，可以寫成長長的一串。
document.body.ul.li……
之后，就看最后這個對象是什么對象了，都有什么方法和屬性可供我們操作了。
最常用的子對象，呵呵，應該要算是 style 對象。CSS 樣式對象。
style 在 標簽里，看起來像是一個屬性。
<div style="color:red;">
但是，JS 還是把它當成一個對象來理解，因為它里面還有更多的屬性和值。雖然沒有什么方法。所以，style 其實應該算是一個子對象。而且，通過 CSS 對象，我們可以實現的效果更多。凡是 CSS 可以定義的屬性，都是 CSS 對象的屬性。對應的值，就是屬性值。
<div id="f" style="color:red;">紅字</div>
alert(document.getElementById("f").style.color);
（文檔中找到 f 對象）這是一個對象了。對象的.style 的 顏色。相對的，也可以給它賦值。
<body> <script> function color(c) { document.getElementById("f").style.color = c; } </script> <div id="f" style="color:red;">文字</div> <input type="button" value="紅色" onclick="color('red');" /> <input type="button" value="綠色" onclick="color('green');" /> <input type="button" value="藍色" onclick="color('blue');" /> </body>
當不同按鈕點擊的時候，我可以通過參數，傳遞進不同的值，然后賦值給 style 的 color，文字的顏色也會跟着改變。
當然了，如果我們指定是 CSS 的隱藏屬性的話，呵呵。那它就會，顯示，隱藏。以此類推，就看我們改變的是對象的哪一個 CSS 屬性了。什么時候，改變了對象的，樣式的，啥……
配合不同的事件，比如窗口大小變化，滾動條位置變化。
當滾動時，讀取滾動條位置，計算出對應 DIV 絕對定位的 Top 值。可以做到，讓一個 DIV 一直跟着滾動條走。最常見的就是飄浮在網頁左右兩邊的廣告條，就是用這個原理制作出來的。
說到底，JS 的熟悉程度，完全取決於你對 JS 的對象的了解程度。然后跟據不同對象的屬性、方法，進行相應的計算、控制，就可以做出各種千變萬化的“動態”網頁效果了。比如，當鼠標懸停在某個對象上面的時候，另一個 DIV 的寬度就產生變化，或者高度。這個效果，就常見於各種 下拉菜單的制作，或者干脆隱藏/顯示。