<head>
<meta charset="UTF-8">
<title>JavaScriptt</title>
<script>
//放JavaScript程式
</script>
</head>
<head>
<meta charset="UTF-8">
<title>JavaScriptt</title>
<script src="js檔案路徑"></script>
</head>
<body>
<p onclick="alert('Hello!');">Hello</p>
</body>
window物件:網頁文件所在的瀏覽器視窗物件。ex:window.alert();
document物件:代表HTML網頁內容的物件,透過此物件可存取網頁中的元素、屬性、甚至樣式等。ex: document.write("<h1>Hello</h1>");
getElementById()
var x = getElementById("theId");
x.innerHTML = '<p>theId_changed</p>'
function theFunction(){
...
}
文件物件模型(Document Object Model, DOM)是 HTML、XML 和 SVG 文件的程式介面。它提供了一個文件(樹)的結構化表示法,並定義讓程式可以存取並改變文件架構、風格和內容的方法。DOM 提供了文件以擁有屬性與函式的節點與物件組成的結構化表示。節點也可以附加事件處理程序,一旦觸發事件就會執行處理程序。 本質上,它將網頁與腳本或程式語言連結在一起。
更詳細說明可參考:https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
http://www.w3schools.com/js/js_htmldom.asp
document.firstChild
document.lastChild
document.childNodes[0]
備註:索引值從0開始,以上範例程式碼即為選取第0個子節點物件。
head:document.head
body:document.body
備註:以上如果想要測試可打開開發者工具(Chrome->F12)並使用console.log()。
firstElementChild:document.firstElementChild
lastElementChild:document.lastElementChild
children:document.children[0]
取得元素節點
getElementByTagName():document.getElementByTagName('li')
可取得所有li元素的集合
getElementByName():document.getElementByName('Name')
可取得所有name=Name的元素集合
新增元素
document.createElement()
document.createTextNode()
appendChild()