(1)JavaScript DOM在什麼位置編寫程式碼
阿新 • • 發佈：2018-11-27
DOM： Document Object Model（文字物件模型）
- D： 文件 - html文件 或 xml文件
- O： 物件 - document物件的屬性和方法
- M： 模型
- DOM 是針對xml（html）的基於數的API
- DOM 樹：節點（node）的層次
- DOM 把 一個文件表示為一棵家譜樹（父，子，兄弟）
- DOM 定義了Node的介面以及許多種節點型別來表示XML節點的多個方面
節點及其型別
節點（node）：來源於網路理論，代表網路中的一個連線點。網路是由節點構成的集合
1）.元素節點
2）.屬性節點： 元素的屬性，可以直接通過屬性的方式來操作；
3）.文字節點： 是元素節點的子幾點，其內容為文字。
建立web工程的步驟 在eclipse中
new -》 file -》選擇 Dynamic Web Project
在WebContent底下建立一個包圍javascript 底下建立一個helloworld.html 的檔案
執行過程 右鍵 點選 open with -》Web Browser
如果是切換成Html編輯 open with -》HTML Editor
各種位置編寫程式碼的比較
@@@1 —
弊端:
HTML程式碼 和 JS程式碼相耦合
</html>
<!DOCTYPE html>
<html>
<head>
< @@@2 —
正確寫法:
內容還沒有完全被載入 沒有獲取到
<!DOCTYPE html>
<html> @@@3 —
正確寫法:
在整個 HTML 文件被載入後 ， 獲取其中的節點 。 在script結點放在html的最後
但是不符合JS程式碼的習慣
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
</script>
</head>
<body>
<button>ClickMe</button>
</body>
</html>
<!--
在整個 HTML 文件被載入後 ， 獲取其中的節點 。 在script結點放在html的最後
但是不符合JS程式碼的習慣
-->
<script type = "text/javascript">
//1.獲取button
var btns = document.getElementsByTagName("button");
alert(btns.length)
//2.為button 新增 onclick 響應函式
btns[0].onclick = function()
{
alert("helloworld !!");
}
</script>
@@@4 —
正確寫法:
window.onload 事件在整個 HTML 文件被完全載入後出發執行。
所以在其中可以獲取到HTML文件的任何元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type = "text/javascript">
alert("1");
//window.onload 事件在整個 HTML 文件被完全載入後出發執行。
//所以在其中可以獲取到HTML文件的任何元素
window.onload = function()
{
alert("3");
}
</script>
</head>
<body>
<button>ClickMe</button>
</body>
</html>
<script type = "text/javascript">
alert("2");
</script>