一、三種獲取頁面元素的方式：
getElementById:通過id來獲取
<body> <input type="text" value="請輸入一個值：" id="txt"/> <input type="button" value="按鈕" id="btn"/> <script> var txt=document.getElementById("txt");//獲取id為txt的頁面元素 console.log(txt); txt.value="haha";//重新給id為txt的文本輸入框的value賦值 </script> </body>
getElementByTagName:通過標簽名來獲取
<body> <input type="text" value="請輸入一個值：" /> <input type="text" value="請輸入一個值：" /> <input type="text" value="請輸入一個值：" /> <input type="text" value="請輸入一個值：" /> <input type="text" value="請輸入一個值：" /> <script> var inputs=document.getElementsByTagName("input");//獲取標簽名為input所有頁面元素。 console.log(inputs); //在控制台中打印可以發現其是一個數組 for(var i=0;i<inputs.length;i++){ inputs[i].value="請輸入另一個值：";//for循環遍歷所有的input元素，可以給他的value重新賦值。 } </script> </body>
getElementByClassName:通過類名來獲取（注意：getElementsByClassName有很強的兼容性問題，一般不用）
<body> <div class="haha"><button class="btn">按鈕</button></div> <script> var Haha=document.getElementsByClassName("haha");//獲取class為haha的頁面元素 console.log(Haha); //打印出來之后發現也是以數組的形式呈現 var Btn=document.getElementsByClassName("btn"); Btn[0].innerText="按鈕1"; //因為本代碼中只有一個類名為btn的button標簽，所以可用它的也就是數組的首項控制這個button里面的屬性。 </script> </body>
二、事件：
事件的三要素：事件源、事件名稱、事件的處理程序（里面執行的代碼或代碼段）
如何注冊一個點擊事件？
<body> <input type="button" value="按鈕" alt="" id="btn1"/> <input type="button" value="按鈕2" alt="" id="btn2"/> <input type="button" value="按鈕3" alt="" id="btn3" /> <input type="button" value="按鈕4" alt="" id="btn4" /> <img src="images/1.jpg" alt="" id="img"/> <script> var img=document.getElementById("img"); var btn1=document.getElementById("btn1"); var btn2=document.getElementById("btn2"); var btn3=document.getElementById("btn3"); var btn4=document.getElementById("btn4"); //第一步獲取事件源：這里是分別通過id獲取一個img與四個button元素，並將它們的值存儲在一個變量之中。 btn1.onclick=function(){ //第二步：給事件源注冊一個事件（下同） img.src="images/2.jpg"; //第三步：事件的處理程序。function(){}里面的代碼就是事件的需要處理的程序。 }; btn2.onclick=function (){ img.src="images/3.jpg"; }; btn3.onclick=function (){ img.src="images/4.jpg"; }; btn4.onclick=function(){ img.src="images/1.jpg"; }; </script> </body>
注冊事件的兩種方式小結：
Css樣式：
<style> a img{ display: block; float: left; } p{ clear: both; } </style>
行內式：
<body> <a href="images/1.jpg" id="a1" onclick="turn1();return false;"><img src="images/1-small.jpg" alt="" /></a> <!--return false讓a標簽不能跳轉--> <a href="images/2.jpg" id="a2" onclick="turn2();return false;"><img src="images/2-small.jpg" alt="" /></a> <a href="images/3.jpg" id="a3" onclick="turn(this);return false;"><img src="images/3-small.jpg" alt="" /></a> <!this指代的是當前頁面元素對象，本段代碼中this指的就是本段代碼的a標簽 --> <a href="images/4.jpg" id="a4" onclick="turn(this);return false;"><img src="images/4-small.jpg" alt="" /></a> <a href="images/5.jpg" id="a5" onclick="turn(this);return false;"><img src="images/5-small.jpg" alt="" /></a> <p></p> <img src="images/placeholder.png" alt="" width="400" id="img"/> <script> var img=document.getElementById("img"); var a1=document.getElementById("a1"); var a2=document.getElementById("a2"); // var a3=document.getElementById("a3"); // var a4=document.getElementById("a4"); // var a5=document.getElementById("a5"); function turn1(){ img.src=a1.href; } function turn2(){ img.src=a2.href; } function turn(jkl){ //封裝這個事件的功能，jkl為函數傳入的參數，傳到HTML代碼的turn(this)之中 img.src=jkl.href; //此處是時間所執行的程序。作用是將上述HTML之中的img之中的src改為a標簽的href路徑。 } </script> </body>
內嵌式：
<body> <a href="images/1.jpg"><img src="images/1-small.jpg" alt=""/></a> <!--return false組織a標簽的默認跳轉方式--> <a href="images/2.jpg"><img src="images/2-small.jpg" alt=""/></a> <a href="images/3.jpg"><img src="images/3-small.jpg" alt=""/></a> <a href="images/4.jpg"><img src="images/4-small.jpg" alt=""/></a> <a href="images/5.jpg"><img src="images/5-small.jpg" alt=""/></a> <p></p> <img src="images/placeholder.png" alt="" width="400" id="img"/> <script> var img = document.getElementById("img"); var links = document.getElementsByTagName("a"); for (var i = 0; i < links.length; i++) { //因為使用getElementByTagName獲取a標簽元素時，所得的是一個數組，所以需要循環遍歷數組中的每一個a標簽 var link = links[i]; //先將獲取到的每一個a標簽存入一個變量link之中 link.onclick = function () { //注冊一個事件，並封裝它的功能 img.src = this.href; //this指代當前注冊觸發事件的對象a return false; } } </script> </body>
三、獲取頁面文本的API:innerText和innerHTML的異同點：
<body> <div id="one"> <p>這是一段文字</p> <p>這是一段文字</p> <p>這是一段文字</p> <p>這是一段文字</p> <p>這是一段文字</p> <p>這是一段文字</p> </div> <script> var one=document.getElementById("one"); console.log(one.innerText); //打印的是文本內容信息 //早期火狐瀏覽器不支持innnerText,而支持innnerHTML,后期全部支持了。 console.log(one.innerHTML); //打印的是頁面元素中的所有內容，包括標簽 </script> </body>
console.log(one.innerText);
單獨運行在控制台中的結果：
這里可以看出innnerText打印的是文本的內容信息。
console.log(one.innerHTML);
單獨運行在控制台運行結果：
這里可以看出innnerHTML打印的是頁面元素之中的所有內容，包括HTML標簽。
相同點：在瀏覽器顯示的結果相同，但是早期的火狐瀏覽器不支持innnerText,而支持innerHTML，后來兩者都支持了，所以它們在瀏覽器中顯示的結果相同。
<div id="one"> </div> <script> var one=document.getElementById("one"); one.innerText="<ul><li>123</li><li>234</li><li>345</li></ul>"; //原樣輸出 // one.innerHTML="<ul><li>123</li><li>234</li><li>345</li></ul>"; //會發生轉譯 </script>
（1） 單獨運行第一句時的結果是：
（2） 單獨運行第二句時的結果是：
比較之后可以發現：用innerText時是按原來引號之中的內容輸出，而使用innnerHTML引號之中的內容則會轉譯成html語言的形式輸出。