《JavaScript高級程序設計》筆記：DOM（十）

時間 2019-11-05

標籤 javascript 高級程序設計筆記 dom 欄目 JavaScript 简体版

原文原文鏈接

Node類型

nodeType
如下是一些重要的nodeType的取值：
1：元素element
2：屬性attr
3：文本text
8：註釋comments
9：文檔documentjavascript

nodeName,nodeValuehtml

節點關係

childNodes: 每一個節點都有一個childNodes屬性，其中保存着一個NodeList對象java

firstChild: 等同於childNodes[0]node

lastChild: 等同於childNodes.length-1app

同時經過使用列表中每一個節點的previousSibling和nextSibling屬性，能夠訪問同一列表中的其餘節點。dom

操做節點

appendChild()
appendChild()方法用於向childNodes列表的末尾添加一個節點。添加節點後，childNodes的新增節點、父節點及之前的最後一個子節點的關係指針都會相應地獲得更新。url

insertBefore()
insertBefore()這個方法接受兩個參數：要插入的節點和做爲參照的節點。spa

// 插入後成爲最後一個子節點
returnedNode = someNode.insertBefore(newNode,null);

// 插入後成爲第一個節點
returnedNode = someNode.insertBefore(newNode,someNode.firstChild);

// 插入到最後一個子節點前面
returnedNode = someNode.insertBefore(newNode,someNode.lastChild);

repaceChild()
repaceChild()接受兩個參數，要插入的節點和要替換的節點.net

var returnedNode = someNode.replaceChild(newNode,someNode.firstChild);

removeChild()
只移除而非替換節點。指針

var formerFirstChild = someNode.removeChild(someNode.firstChild);

cloneNode()

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

var deepList = myList.cloneNode(true);
console.log(deepList.length); // 3

var shallowList = myList.cloneNode(false);
console.log(shallowList.childNodes.length); //0

Document類型

Document節點具備下列特徵：
nodeType的值爲9；
nodeName的值爲#document;
nodeValue的值爲null;
parentNode的值爲null;
ownerDocument的值爲null;

文檔的子節點

var html = document.documentElement; // 取得對<html>的引用
console.log(html === document.childNodes[0]); // true
console.log(html === document.firstChild); // true

文檔信息

// 取得文檔的標題
var originalTitle = document.title; 

// 設置文檔標題
document.title = "New page title";

// 取得完整的url
var url = document.URL;
// 取得域名
var domain = document.domain;
// 取得來源頁面的url
var referrer = document.referrer;

//假設頁面來自p2p.wrox.com域
document.domain = "wrox.com"; // 成功
document.domain = "nczonline.net"; // 失敗

在IE7中調用document.getElementById("myElement");結果會返回<input>元素，以下所示；
最好的辦法是不讓表單字段的name特性與其餘元素的ID相同。

<input type="text" name="myElement" value="text field">
<div id="myElement">a div</div>

特殊集合

document.anchors,包含文檔中全部帶name特性的a元素;
document.forms, 包含文檔中全部form元素，與document.getElementsByTagName("form")獲得的結果相同;
document.images,包含文檔中全部的img元素，與document.getElementsByTagName("img")獲得的結果相同;
document.links，包含文檔中全部帶href特性的a元素;

文檔寫入

<html>
<head>
      <title>document.write() Example 3</title>
</head>
<body>
     <script type="text/javascript">
          document.write("<script type=\"text/javascript\" src=\"file.js\">") + "<\/script>");
     </script>
</body>
</html>

字符串<\/script>不會被看成外部script標籤的關閉標籤，於是頁面中也就不會出現多餘的內容了。

Element類型

Element節點具備如下特徵：
nodeType的值爲1;
nodeName的值爲元素的標籤名;
nodeValue的值爲null;
parentNode多是Document或Element;

要訪問元素的標籤名，能夠使用nodeName屬性，也能夠使用tagName屬性；

<div id="myDiv"></div>
var div = document.getElementById("myDiv");
console.log(div.tagName); // DIV
console.log(div.nodeName); // DIV

if (element.tagName=="div") { // 不能這樣比較，很容易出錯
}

if (element.tagName.toLowerCase =="div") { // 這樣最好（適用於任何文檔）
}

取得特性

操做特性的DOM方法主要有三個，分別是getAttribute()、setAttribute()、removeAttribute()；
注意，傳遞給getAttribute()的特性名與實際的特性名相同。印象要想獲得class的特性值，應該傳入"class"而不是"className"。

var div = document.getElementById("myDiv");
console.log(div.getAttribute("class")); // bd

建立元素

使用document.createElement()方法能夠建立新元素。

元素的子節點

在執行某項操做之前，一般都要先檢查一下nodeType屬性，以下面的例子所示:

for (var i=0; len = element.childNodes.length; i<len; i++){
    if (element.childNodes[i].nodeType ==1) {
        // 執行某些操做
    }
}

Text類型

Text節點具備如下特徵：
nodeType的值爲3；
nodeName的值爲"#text";
nodeValue的值爲節點所包含的文本；
parentNode是一個Element；

建立文本節點

能夠使用document.createTextNode()建立新文本節點。

規範化文本節點

normalize()

分割文本節點

splitText()

Comment類型

comment節點具備下列特徵：
nodeType的值爲8;
nodeName的值爲"#comment";
nodeValue的值是註釋的內容；
parentNode多是Document或Element；
不支持（沒有）子幾點；

DOM操做技術

操做表格

    // 建立 table
var table = document.createElement("table");
table.border = 1;
table.width = "100%";

// 建立tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);

// 建立第一行
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("cell 1,1"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("cell 2,1"));


// 建立第二行
tbody.insertRow(01);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("cell 1,2"));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("cell 2,2"));

document.body.appendChild(table);