JS Browser BOM

window

window 是物件

window.innerHeight  /*獲得視窗高度*/
window.innerWidth  /*獲得視窗寬度*/
window.open() /*開啟新頁籤*/
window.close()  /*關閉頁籤*/
window.moveTo() /*移到某視窗*/
window.resizeTo() /*重新設定視窗大小*/

Screen

screen.width /*取得螢幕寬度*/
screen.height /*取得螢幕高度*/ 

Location

window.location.href /*取得超連結*/
window.location.hostname /*取得hostname(主葉面網址)*/
window.location.pathname /*取得pathname(主頁面之後的網址)*/
window.location.protocol /*取得protocol(如:http: or https:)*/
window.location.assign() /*跳轉道括弧內的網址*/
window.location.replace(window.location.href)/*刷新當前頁*/
window.location.replace()/*跳轉到括號內的網址*/

可參考此網址

History

history.back() /*回上一頁*/
history.forward() /*到下一頁*/

Navigator(瀏覽器)

可以取得版本名稱等等，處理器的型號或語言抑或是瀏覽器的開發商都可以顯示
目前我應該是用不到。如需使用時請看這裡

Popup Boxes

alert('') /*警告視窗，顯示在''內的文字*/
confirm('') /*有確定或取消的警告視窗*/
prompt('') /*有輸入框的警告視窗，可以接收輸入框內的傳回值*/
/*也是利用/n換行*/

使用方式的詳細可參考這裡

Timing Event

時間事件。可在網頁中製作小時鐘或是倒數
利用setinterval製作時間顯示

Cookies 在每次傳回資料時會附上cookie>>伺服器端的

JS HTML DOM >>可以利用這個將網頁分部分，比較好修改

/*取得三種不同分類的資料內容*/
document.getElementById(id)	
document.getElementsByTagName(name)	
document.getElementsByClassName(name)

document.createElement(element)	 /*建立新的元素*/

document.anchors/*取得所有超連結*/
document.body /*取的body的部分*/
document.cookie	/*取得記錄下來的快樂小餅乾*/
document.doctype /*取得文件的型態*/
document.documentElement  /*取得整個文件的元素*/
document.documentMode	/* 取得瀏覽器的模式*/
document.documentURI	/*取得網址*/
document.domain	/*取得網域*/
document.forms /*取得表單*/

要用再查

Elements

取得的元素都是以陣列的方式存取，若要提取出來，需要利用陣列中的內容提取法(x[0])

document.getElementsByTagName("p"); /*取該標記的所有元素(這裡是p)*/

let x = document.getElementById("main");
let y = x.getElementsByTagName("p");
/* 可利用此種方式取得main底下的p*/
```js
const x = document.querySelectorAll("p.class");/*取得class中的p*/

Animation

position: relative/*相對位置*/
而position: absolute/*絕對位置*/
而position: fix/*位置固定(指定位置裡不動)*/

寫法 我的發現: 連續按好幾下的click會出現奇怪的效果，目前我最好不要把這個放進網頁裡

DOM Events

點擊改變字符、使用函式的版本

點擊顯示date、利用HTML DOM

確定快樂小餅乾有沒有被做出來

輸入小寫轉大寫 >> toUpperCase()

onmouseover and onmouseout

onmousedown, onmouseup and onclick

EventListener

addEventListener()

可以增加許多founction 像下面這樣

element.addEventListener("click", Function1);
element.addEventListener("click", Function2);

resize是指螢幕大小改變

removeEventListener() 

取消掉某個事件觸發後會發生的founction

Navigation >>效能高，占較少記憶體

19歲的怠惰廢物說自己看得懂那個父子的結構，阿以後用到的我應該也看得懂所以不放圖了，希望以後的我不會繼續英文殘廢(這個是19歲的我的英文殘廢也看得懂了，未來的我看不懂請反省)

parentNode/*取副節點*/
childNodes[nodenumber]/*取第幾個子*/
firstChild/*取第一個子*/
lastChild/*取最後一個子*/
nextSibling/*取下一個兄弟*/
previousSibling/*取前一個兄弟*/

Nodes

appendChild()/*附加為最後一個子元素*/
insertBefore() /*成為第一個子元素*/
a.removeChild(b)/*刪除子元素，先定義a是父，b是子*/

老師的講解appendChild
老師的講解2insertBefore

removeChild集合

const P=document.getElementsByTagName("p");
P[0];

取得P中第一個子元素

• length可以取得有多少子元素在內 改變所有p的顏色>>利用for迴圈 他像是陣列，但又不是陣列(Node List 也是)