*********BOM和DOM********

JavaScript分為 ECMAScript，DOM，BOM。

 
BOM（Browser Object Model）是指瀏覽器對象模型，它使 JavaScript 有能力與瀏覽器進行“對話”。

DOM （Document Object Model）是指文檔對象模型，通過它，可以訪問HTML文檔的所有元素。

 
Window對象是客戶端JavaScript最高層對象之一，由於window對象是其它大部分對象的共同祖先，
在調用window對象的方法和屬性時，可以省略window對象的引用。例如：window.document.write()
可以簡寫成：document.write()。

 
******window對象（BOM）*******

所有瀏覽器都支持window對象。他表示瀏覽器窗口。

*如果文檔包含框架（frame 或 iframe 標簽），瀏覽器會為 HTML 文檔創建一個 window 對象，並為每個框架創建一個額外的 window 對象。

*沒有應用於 window 對象的公開標準，不過所有瀏覽器都支持該對象。

所有 JavaScript 全局對象、函數以及變量均自動成為 window 對象的成員。

全局變量是 window 對象的屬性。全局函數是 window 對象的方法。

接下來要講的HTML DOM 的 document 也是 window 對象的屬性之一。

一些常用的Window方法：

window.innerHeight 
 
- 瀏覽器窗口的內部高度
window.innerWidth - 瀏覽器窗口的內部寬度
window.open() - 打開新窗口
window.close() - 關閉當前窗口

****window的子對象****

**navigator對象（了解即可）**

瀏覽器對象，通過這個對象可以判定用戶所使用的瀏覽器，包含了瀏覽器相關信息。

navigator.appName     // Web瀏覽器全稱
navigator.appVersion　　// Web瀏覽器廠商和版本的詳細字符串
navigator.userAgent　　// 客戶端絕大部分信息
navigator.platform　　　// 瀏覽器運行所在的操作系統
 


**screen對象（了解即可）**

屏幕對象，不常用。

一些屬性：

screen.availWidth - 可用的屏幕寬度
screen.availHeight - 可用的屏幕高度

**history對象（了解即可）**

window.history 對象包含瀏覽器的歷史。

瀏覽歷史對象，包含了用戶對當前頁面的瀏覽歷史，但我們無法查看具體的地址，可以簡單的用來前進或後退一個頁面。

history.forward()  // 前進一頁
history.back()  // 後退一頁

**location對象**

window.location 對象用於獲得當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面。

常用屬性和方法：

location.href  獲取URL
location.href="URL" // 跳轉到指定頁面
location.reload() 重新加載頁面

**彈出框**

可以在 JavaScript 中創建三種消息框：警告框、確認框、提示框。

*警告框

警告框經常用於確保用戶可以得到某些信息。
當警告框出現後，用戶需要點擊確定按鈕才能繼續進行操作。

語法：
alert("你看到了嗎？");

*確認框（了解即可）

確認框用於使用戶可以驗證或者接受某些信息。
當確認框出現後，用戶需要點擊確定或者取消按鈕才能繼續進行操作。
如果用戶點擊確認，那麽返回值為 true。如果用戶點擊取消，那麽返回值為 false。

語法：
confirm("你確定嗎？")

*提示框（了解即可）

提示框經常用於提示用戶在進入頁面前輸入某個值。
當提示框出現後，用戶需要輸入某個值，然後點擊確認或取消按鈕才能繼續操縱。
如果用戶點擊確認，那麽返回值為輸入的值。如果用戶點擊取消，那麽返回值為 null。

語法：
prompt("請在下方輸入","你的答案")

****計時相關****

通過使用 JavaScript，我們可以在一定時間間隔之後來執行代碼，而不是在函數被調用後立即執行。我們稱之為計時事件。

setTimeout()

語法：
var t=setTimeout("JS語句",毫秒)
setTimeout() 方法會返回某個值。在上面的語句中，值被儲存在名為 t 的變量中。假如你希望取消這個 setTimeout()，你可以使用這個變量名來指定它。

setTimeout() 的第一個參數是含有 JavaScript 語句的字符串。這個語句可能諸如 "alert(‘5 seconds!‘)"，或者對函數的調用，諸如 alertMsg()"。

第二個參數指示從當前起多少毫秒後執行第一個參數（1000 毫秒等於一秒）。

clearTimeout()

語法：
clearTimeout(setTimeout_variable)
舉個例子：

// 在指定時間之後執行一次相應函數
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout設置
clearTimeout(timer);
setInterval()

setInterval() 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。

setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數。

語法：

setInterval("JS語句",時間間隔)
返回值

一個可以傳遞給 Window.clearInterval() 從而取消對 code 的周期性執行的值。

clearInterval()

clearInterval() 方法可取消由 setInterval() 設置的 timeout。

clearInterval() 方法的參數必須是由 setInterval() 返回的 ID 值。

語法：

clearInterval(setinterval返回的ID值)
舉個例子：

// 每隔一段時間就執行一次相應函數
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval設置
clearInterval(timer);


*********DOM********

DOM（Document Object Model）是一套對文檔的內容進行抽象和概念化的方法。 

當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。

HTML DOM 模型被構造為對象的樹。

https://images2018.cnblogs.com/blog/867021/201803/867021-20180312215352312-132101897.png

*DOM標準規定HTML文檔中的每個成分都是一個節點(node)：

文檔節點(document對象)：代表整個文檔
元素節點(element 對象)：代表一個元素（標簽）
文本節點(text對象)：代表元素（標簽）中的文本
屬性節點(attribute對象)：代表一個屬性，元素（標簽）才有屬性
註釋是註釋節點(comment對象)　

*JavaScript 可以通過DOM創建動態的 HTML：

JavaScript 能夠改變頁面中的所有 HTML 元素
JavaScript 能夠改變頁面中的所有 HTML 屬性
JavaScript 能夠改變頁面中的所有 CSS 樣式
JavaScript 能夠對頁面中的所有事件做出反應


****查找標簽****

**直接查找**

document.getElementById("id名")                根據ID獲取一個標簽
document.getElementsByClassName("class名")    根據class屬性獲取
document.getElementsByTagName("標簽名")        根據標簽名獲取標簽集合

註意：
涉及到DOM操作的JS代碼應該放在文檔的哪個位置。

**間接查找**

parentElement                父節點標簽元素
children                    所有子標簽
firstElementChild            第一個子標簽元素
lastElementChild            最後一個子標簽元素
nextElementSibing            下一個兄弟標簽元素
previousElementSibling        上一個兄弟標簽元素


****節點操作****

**創建節點**

語法：

createElement(標簽名)

示例：
var divElement = document.createElement("div");

**添加節點**

語法：
追加一個子節點（作為最後的子節點）
somenode.appendChild(newnode);

把增加的節點放在某個節點的前邊。
somenode.insertBefore(newnode, 某個節點);

示例：
var imgEle=document.createElement("img");
imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);

**刪除節點**

語法：
獲得要刪除的元素，通過父元素調用刪除。

removeChild(要刪除的節點)

**屬性節點**


獲取文本節點的值：

var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML
設置文本節點的值：

var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"


attribute操作

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")

// 自帶的屬性還可以直接.屬性名來獲取和設置
imgEle.src
imgEle.src="..."


**獲取值操作**

語法：
elementNode.value

適用於以下標簽：

.input
.select
.textarea

var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);

**class的操作**

className  獲取所有樣式類名(字符串)

classList.remove(cls)  刪除指定類
classList.add(cls)  添加類
classList.contains(cls)  存在返回true，否則返回false
classList.toggle(cls)  存在就刪除，否則添加

**指定CSS操作**

obj.style.backgroundColor="red"
JS操作CSS屬性的規律：

1.對於沒有中橫線的CSS屬性一般直接使用style.屬性名即可。如：

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

2.對含有中橫線的CSS屬性，將中橫線後面的第一個字母換成大寫即可。如：

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

****事件****

HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動作（action），比如當用戶點擊某個 
HTML 元素時啟動一段 JavaScript。下面是一個屬性列表，這些屬性可插入 HTML 標簽來定義事件動作



**常用事件**

onclick        當用戶點擊某個對象時調用的事件句柄。
ondblclick     當用戶雙擊某個對象時調用的事件句柄。

onfocus        元素獲得焦點。               
onblur         元素失去焦點。               應用場景：用於表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證.
onchange       域的內容被改變。             應用場景：通常用於表單元素,當元素內容被改變時觸發.（select聯動）

onkeydown      某個鍵盤按鍵被按下。          應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress     某個鍵盤按鍵被按下並松開。
onkeyup        某個鍵盤按鍵被松開。
onload         一張頁面或一幅圖像完成加載。
onmousedown    鼠標按鈕被按下。
onmousemove    鼠標被移動。
onmouseout     鼠標從某元素移開。
onmouseover    鼠標移到某元素之上。

onselect      在文本框中的文本被選中時發生。
onsubmit      確認按鈕被點擊，使用的對象是form。


**綁定方式**

方式一：

<div id="d1" onclick="changeColor(this);">點我</div>
<script>
  function changeColor(ths) {
    ths.style.backgroundColor="green";
  }
</script>
註意：
this是實參，表示觸發事件的當前元素。
函數定義過程中的ths為形參。

方式二：


<div id="d2">點我</div>
<script>
  var divEle2 = document.getElementById("d2");
  divEle2.onclick=function () {
    this.innerText="呵呵";
  }
</script>

JavaScript入門三