JavaScript筆記（瀏覽器上--操作DOM），javascriptdom

JavaScript筆記（瀏覽器上--操作DOM），javascriptdom
1 瀏覽器

注意識別各種國產瀏覽器，如某某安全瀏覽器，某某旋風瀏覽器，它們只是做了一個殼，其核心調用的是IE，也有號稱同時支援IE和Webkit的“雙核”瀏覽器。
不同的瀏覽器對JavaScript支援的差異主要是，有些API的介面不一樣，比如AJAX，File介面。對於ES6標準，不同的瀏覽器對各個特性支援也不一樣。
在編寫JavaScript的時候，就要充分考慮到瀏覽器的差異，盡量讓同一份JavaScript代碼能運行在不同的瀏覽器中。

2 window對象

JS的宿主對象中最為基礎的就是window對象，這個對象的屬性和方法通常稱為BOM（瀏覽器物件模型）。

JavaScript可以擷取瀏覽器提供的很多個物件，並進行操作。
window對象不但充當全域範圍，而且表示瀏覽器視窗。window的innerWidth以及innerHeight屬性可以擷取可以擷取瀏覽器視窗的內部寬度和高度。
window對象的屬性方法有很多，以下列舉一些常用的：

2.1 屬性執行個體

• screen：screen對象包含使用者的螢幕資訊，常用的屬性有：screen.width螢幕寬度，screen.height螢幕高度等
• navigator：navigator對象表示瀏覽器的資訊，最常用的屬性包括：
  
  • navigator.appName：瀏覽器名稱；
  • navigator.appVersion：瀏覽器版本；
  • navigator.language：瀏覽器設定的語言；
  • navigator.platform：作業系統類型；
  • navigator.userAgent：瀏覽器設定的User-Agent字串。
  • 註：瀏覽器資訊很容易被使用者修改
• location：location對象表示當前頁面的URL資訊，最常用的屬性包括：
  
  • location.href：完整網址
  • location.protocol：協議
  • location.host：網站名， ‘www.example.com’
  • location.port：連接埠， ‘8080’
  • location.pathname：路徑，/path/index.html’
  • 要載入一個新頁面，調用location.assign(url)。
  • 要重新載入當前頁面，調用location.reload()。
• history：記錄瀏覽器曆史，調用history.back()返回前一頁面，調用history.forward()返回前一步。
• document：document對象表示當前頁面，HTML在瀏覽器中以DOM形式表示為樹形結構，而document對象就是整個DOM樹的根節點。document對象還有一個cookie屬性，可以擷取當前頁面的Cookie。
  Cookie是由伺服器發送的key-value標示符。因為HTTP協議是無狀態的，但是伺服器要區分到底是哪個使用者發過來的請求，就可以用Cookie來區分。當一個使用者成功登入後，伺服器發送一個Cookie給瀏覽器，例如user=ABC123XYZ(加密的字串)…，此後，瀏覽器訪問該網站時，會在要求標頭附上這個Cookie，伺服器根據Cookie即可區分出使用者。（伺服器在設定Cookie時可以使用 httpOnly，設定了 httpOnly 的Cookie將不能被JavaScript讀取）

2.2 方法

• alert(str)：用於彈出訊息框
• confirm(str)：用於彈出選擇確定訊息框
• prompt(str)：用於彈出文本輸入訊息框
• open(url,name,features)：url必填，後兩個選填，name有三個特殊值用於定義開啟網頁視窗的方式，如_top指的是在當前整個瀏覽器頁面視窗替換後開啟，_target指的是重新開啟一個新瀏覽器視窗頁面，_self指的是當前小視窗開啟。features定義開啟視窗時的小控制項
• close()：關閉當前頁面
• setTimeout(func,time)：多少秒後執行函數，註：第一個參數填寫函數不要加括弧
• cleaarTimeout(id)：取消計時器運作，把setTimeout(func,time)賦值給一個變數，這個變數的名字就是參數id
• setInterval(func,time)：每隔多少時間執行函數
• clearInterval(id)：取消計時器

3 操作DOM

HTML文檔被瀏覽器解析後就是一棵DOM樹（Document Object Modle），而瀏覽器實質顯示的也就是這一課DOM樹。
而JavaScript可以操作一個DOM節點，操作一個DOM節點實際上就是這麼幾個操作：

• 更新：更新該DOM節點的內容，相當於更新了該DOM節點表示的HTML的內容；
• 遍曆：遍曆該DOM節點下的子節點，以便進行進一步操作；
• 添加：在該DOM節點下新增一個子節點，相當於動態增加了一個HTML節點；
• 刪除：將該節點從HTML中刪除，相當於刪掉了該DOM節點的內容以及它包含的所有子節點。

3.1 曆遍DOM節點

DOM節點分為：元素節點，文本節點以及屬性節點。屬性節點一定是包含在元素節點中，而文本節點則大多數為元素節點的子節點。

在動作節點之前得先拿到這個節點，擷取節點方法都是通過調用document對象屬性擷取的，常用的就是用document.getElementsBy..這樣的形式，如：

/* js的命名：變數常用底線，而函數名，方法名和對象屬性名稱的命名常用駱駝命名法 */var a = document.getElementById("idname");//注意Element後不跟s，因為id對應的元素只有一個var b = document.getElementsByClassName("classname");//添加s，注意當想要選擇一些帶有多個類名的元素節點時，類名可以用空格隔開var c = document.getElemantsByTagName("tagname");//添加s

document.getElementsByTagName()和document.getElementsByClassName()總是返回一組DOM節點，此時可以使用索引以縮小範圍（搜尋的參數可以寫為萬用字元*）。
另外使用：

• Node.childNodes：來返回一組子節點，值得注意的是chrome等瀏覽器會把一些節點之間的空白文本都會作為子節點返回，所以使用時注意篩選。
• Node.firstChild：第一個子節點
• Node.lastChild：最後一個子節點
• Node.parentNode：父節點
• Node.nextSibling：返回緊跟其後的兄弟節點，沒有返回null
• Node.proviousSibling：返回前一個的兄弟節點，沒有返回null

那麼返回一組子節點，如何篩選出空白文本呢？
這就需要用到一些節點的屬性了:

• Node.nodeType：這返回的是數字，其中“元素”返回數字1，也就是說使用它能篩選出空白文本
• Node.nodeName：如果是“元素”，則返回元素名，如段落，返回p

更多可看：

3.2 更新DOM

拿到一個DOM節點，可以對其屬性進行修改更新。

3.2.1 HTML

修改innerHTML屬性，innerHTML屬性不僅能修改HTML元素文本，還可以改變元素內部結構。

//擷取<p id="sei">123</p>var p = document.getElementById("sei");//修改文本p.innerHTML="ABC"; //變為 <p>ABC</p>//修改結構p.innerHTML="ABC<span>123</span>"; //變為 <p>ABC<span>123</span></p>

修改innerText或textContent屬性，只能改變文本，不能修改結構：

p.innerText="ABC";p.textContent="ABC";

3.2.2 CSS

DOM節點的style屬性對應所有的CSS，可以直接擷取或設定，但一些如font-size這樣的名稱，就要自動轉化為駝峰式命名fontSize。

p.style.color="deeppink";p.style.fontSize="small";

3.3 插入DOM

拿到一個DOM節點，可以運用其方法進行插入DOM節點。

3.3.1 appendChild

DOM節點使用appendChild()方法，可以將某DOM節點放進其尾部。

/*<div id="list">    <p id="java">Java</p>    <p id="JavaScript">JavaScript</p>    <p id="scheme">Scheme</p></div>*///比如要建立一個python段落放置在list模組底下。//建立JavaScript段落var python = document.createElement("p"); //建立段落元素python.id="python"; //綁定idpython.innerText="python" //綁定文本//放置在listt模組底下。var list = document.getElementById("list"); //擷取節點list.apppendChild(python); //運行節點的方法，末尾插入節點/*此時的DOM文檔樹<div id="list">    <p id="java">Java</p>    <p id="JavaScript">JavaScript</p>    <p id="scheme">Scheme</p>    <p id="python">python</p></div>*/

3.3.2 insertBefore

上述的appendChild只能插進尾部，那麼插進指定部位的就要使用到insertBefore了，insertBefore的用法是，首先要獲得定位節點以及它的父節點，當然還有插入位元組本身，然後調用父節點的insertBefore方法，文法：
parentElement.insertBefore(newElement, referenceElement); newElement會放置在referenceElement前頭

/* 在上題文檔樹JavaScript前插進一個C */var c = document.createElement("p");c.innerText="C";c.id="C";var JavaScript = document.getElementById("JavaScript");list.insertBefore(c,JavaScript)；//c在前

注意看一下如何建立DOM子節點：

• 使用document.createElement(str);,str為HTML元素名
• 然後綁定一些屬性，如：id，innerText，樣式要用到的setAttribute，如d.setAttribute('type', 'text/css');

3.4. 刪除DOM

要刪除一個節點，首先要獲得該節點本身以及它的父節點，然後，調用父節點的removeChild把自己刪掉。

// 拿到待刪除節點:var self = document.getElementById('to-be-removed');// 拿到父節點:var parent = self.parentElement;// 刪除:parent.removeChild(self);

註：平時遍曆一個父節點的子節點並進行刪除操作時，調用children屬性要小心，以為刪除的同時，children屬性也是在縮小。
此時可使用while語句

頂

0

踩

0

    查看評論