一：介紹
1.DOM
2.節點分類
節點及其類型:
1). 元素節點
2). 屬性節點: 元素的屬性, 可以直接通過屬性的方式來操作.
3). 文本節點: 是元素節點的子節點, 其內容為文本.
二：JS的位置
0.新建靜態web項目
1.第一種方式
在 body 節點之前編寫 js 代碼, 但需要利用 window.onload 事件,
該事件在當前文檔完全加載之后被觸發, 所以其中的代碼可以獲取到當前文檔的任何節點.
2.程序
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript"> 7 //onload的使用方式 8 window.onload=function(){ 9 var bt=document.getElementsByTagName("button")[0]; 10 bt.onclick=function(){ 11 alert("have click on"); 12 } 13 } 14 </script> 15 </head> 16 <body> 17 <button>click on me</button> 18 </body> 19 </html>
3.運行效果
4.第二種方式
直接在html代碼程序里寫js。
缺點:
①. js 和 html 強耦合, 不利用代碼的維護
②. 若 click 相應函數是比較復雜的, 則需要先定義一個函數, 然后再在 onclick 屬性中完成對函數的引用, 比較麻煩
5.程序
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <button onclick="alert('hello JS 2')"></button> </body> </html>
6.運行結果
7.第三種方式
將js直接放在html文檔的后部分，這樣在html文檔加載完成后再加載js。
但是，不符合習慣。
8.程序
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 </head> 7 <body> 8 <button>click on me</button> 9 <script type="text/javascript"> 10 var bts=document.getElementsByTagName("button"); 11 bts[0].onclick=function(){ 12 alert("hello js 3"); 13 } 14 </script> 15 </body> 16 </html>
9.運行結果
三：問題
1.這里缺少的第四種方式
將js與html代碼分開的第四種方式，有空將補充完整。