前情提要

基本型別

使用函式

分支指令

重複指令

基本型別

Number

String

Array

Object

Boolean

函式定義

					
var square=function(n){
	return n*n
}

function increase(n){
	return n+1
}
					

函式呼叫

					
console.log("%c囧囧囧囧囧","font-size:72px;")
console.log(square(9))
					

分支指令

if

if-else

if-else if-else

switch-case

重複指令

while

for

do-while

DOM

DOM

文件物件模型

Document Object Model

一個文件的結構化表示法

重要的DOM型別

document

element

nodeList

attribute

namedNodeMap

document

網頁內容的進入點

可以全域存取

element

由DOM的API回傳的元素或節點

構成DOM

nodeList

裝著element的陣列

可以從中取出節點

attribute

從屬於element

表示element的屬性

namedNodeMap

裝著element的無序集合

可由名稱或索引取得元素

接下來

使用DOM之前讓JS能在HTML中運作

在HTML內使用JS

觀念釐清

HTML只是標記語言不能執行

JavaScript是程式語言可以執行

將JS放在HTML裡要另外標記

程式內嵌

將JS視為HTML中的內容

					
<script>alert("hello, world")</script>
					

要用<script>包起來才能執行

引入程式

要用此方法才可以引入外部的JS程式碼

					
<script src="../lib/js/head.min.js"></script>
					

這裡的<script>標籤中間不能有東西

在JS中引入程式

					
					function loadScript(url)
{
	var head = document.getElementsByTagName('head')[0];
	var script = document.createElement('script');
	script.type = 'text/javascript';
	script.src = url;
	head.appendChild(script);
}
					

真的是有夠麻煩...

接下來

DOM到底可以如何操作咧?

Document

Document

可由window.document或document取得

裏面裝了網頁所有的東西

對其節點操作可以改變網頁內容

取得網址

document.domain

document.URL

document.baseURI

存取標題

document.title

也可以設定標題

document.title="JASS"

然後標題就真的變了很不方便

創造物件

document.createAttribute(attr)

document.createElement(tag)

document.createTextNode(text)

取得元素

document.getElementById(id)

document.getElementsByName(name)

document.getElementsByTagName(name)

document.getElementsByClassName(name)

實際實驗

var n=document.getElementById("nekomimi")
var h=document.getElementsByTagName("h6")[0]
var x=document.getElementsByClassName("x86")[0]
var a=document.getElementsByName("armstrong")[0]
					

接下來

對取得的元素進行操作

Element

Element

許多的Element組成了Document

一個標籤就是一個Element

取得元素資料

element.textContent

element.innerHTML

element.style

element.attributes

實際實驗

					
n.textContent
h.innerHTML
x.style
a.attributes

樹狀結構

DOM是以樹狀結構表達

裏面的元素也是以樹狀結構存在

可以操作元素附近的東西

樹狀操作

父節點

平輩節點

子節點

父節點

"You are someone's son"

element.parentNode

element.parentElement

注意上層有可能是Document而非Element

實際實驗

					
document.body.parentNode
document.body.parentElement
document.documentElement.parentNode
document.documentElement.parentElement
					

平輩節點

和自己屬於同個樹狀階層

element.nextSibling

element.nextElementSibling

element.previousSibling

element.previousElementSibling

想想隔壁有可能是文字或是註解

實際測試

					
x.nextElementSibling
x.nextSibling
x.nextSibling.nextSibling
x.nextSibling.nextSibling.nextSibling
					

子節點列表

element.childNodes

element.children

element.childElementCount

取得子節點

element.firstChild

element.firstElementChild

element.lastChild

element.lastElementChild

實際測試

					
var data=document.getElementById("expdata");
data.firstChild
data.firstElementChild
data.lastChild
data.lastElementChild
					

子節點增刪

element.appendChild()

element.removeChild()

element.replaceChild()

實際測試

					
var thispage=document.getElementById("thispage")
var newH1=document.createElement("h1")
var text=document.createTextNode("ㄈ十 ㄈ艸 ㄈ卉")

thispage.appendChild(newH1)
newH1.appendChild(text)

thispage.removeChild(newH1)
					

接下來

對元素的屬性進行操作

標籤裏面的等號配對就是Attribute

Attribute

Atrribute

由名稱和數值構成

標籤後面的等號配對就是Attribute

取出資料

attr.name

attr.value

attr.isId

attr.specified

實際實驗

					
n.attributes[0].name
n.attributes[0].value
n.attributes["style"].isId
n.attributes["style"].specified
					

由元素存取屬性

element.getAttribute(name)

element.setAttribute(name,value)

element.hasAttribute()

操作元素的屬性

直接看看如何操作吧

					
var thisa=document.getElementById("thisa")
thisa.getAttribute("target")
thisa.setAttribute("href","https://www.google.com.tw")

在JS中引入程式

					
					function loadScript(url)
{
	var head = document.getElementsByTagName('head')[0];
	var script = document.createElement('script');
	script.type = 'text/javascript';
	script.src = url;
	head.appendChild(script);
}
					

有沒有忽然能看懂意思了?

下集待續

DOM當然不只這樣

還有CSS和Event