JavaScript DOM——“DOM操作技術”的注意要點

ckllj 發布于2019-08-19 17:12 / 2913人閱讀

摘要：在遍歷的時候很容易犯這樣的錯誤這是一個無限循環，因為是動態的實時更新的。應該把屬性初始化第二個變量應該盡量減少訪問的次數因為每次訪問都會運行依次基于文檔的查詢所以應該考慮將從中提取出的值緩存起來。

動態腳本 插入外部腳本文件

以script元素為例：

使用DOM動態的創建出這個元素：

function loadScript(url) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = url;
    document.body.appendChild(script);
}
loadScript("client.js")

行內方式插入腳本文件

以行內腳本代碼為例：

使用DOM動態的創建出這個元素：

var script = document.createElement("script");
script.type = "text/javascript";
script.appendChild(document.createTextNode("function sayHi(){alert("hi");}"));
document.body.appendChild(script);

但在IE中會報錯，解決辦法是使用script元素的text屬性：

var script = document.createElement("script");
script.type = "text/javascript";
script.text = "function sayHi(){alert("hi");}";
document.body.appendChild(script);

最終通用的解決方案如下：

function loadScriptString(code) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    try {
        script.appendChild(document.createTextNode(code));
    } catch (ex) {
        script.text = code;
    }
    document.body.appendChild(script);
}
loadScriptString("function sayHi(){alert("hi");}");

實際上在全局作用域中把相同的字符串傳遞給eval()是一樣的。

動態樣式 link元素包含來自外部的文件

以link元素為例：

使用DOM動態的創建出這個元素：

function loadStyles(url) {
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.type = "text/css";
    link.href = url;
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(link);
}
loadStyles("style.css");

style元素來指定嵌入的樣式

以嵌入樣式為例：

使用DOM動態的創建出這個元素：

var style = document.createElement("style");
style.type = "text/css";
style.appendChild(document.createTextNode("body{background-color:red}"));
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);

但在IE中會報錯，解決辦法是訪問元素的styleSheet屬性的cssText屬性：

var style = document.createElement("style");
style.type = "text/css";
try{
    style.appendChild(document.createTextNode("body{background-color:red}"));
}catch(ex){
    style.styleSheet.cssText = "body{background-color:red}";
}
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);

最終通用的解決方案如下：

function loadStyleString(css) {
    var style = document.createElement("style");
    style.type = "text/css";
    try {
        style.appendChild(document.createTextNode(css));
    } catch (ex) {
        style.styleSheet.cssText = css;
    }
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(style);
}
loadStyleString("body{background-color:red}");

操作表格

HTML表格為例：

傳統上需要如下大量的DOM代碼：

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

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

//創建第一行
var row1 = document.createElement("tr");
tbody.appendChild(row1);
var cell1_1 = document.createElement("td");
cell1_1.appendChild(document.createTextNode("Cell 1,1"));
row1.appendChild(cell1_1);
var cell2_1 = document.createElement("td");
cell2_1.appendChild(document.createTextNode("Cell 2,1"));
row1.appendChild(cell2_1);

//創建第二行
var row2 = document.createElement("tr");
tbody.appendChild(row2);
var cell1_2 = document.createElement("td");
cell1_2.appendChild(document.createTextNode("Cell 1,2"));
row2.appendChild(cell1_2);
var cell2_2 = document.createElement("td");
cell2_2.appendChild(document.createTextNode("Cell 2,2"));
row2.appendChild(cell2_2);

//將表格添加到文檔主體中
document.body.appendChild(table);

為了方便構建表格，HTML DOM 還為table元素、tbody元素和tr元素添加了一些屬性和方法。如

為table元素添加的屬性和方法如下：

caption：caption元素的指針（如果有）；

tBodies：tbody元素的HTMLCollection；

tFoot：tfoot元素的指針（如果有）；

tHead：thead元素的指針（如果有）；

rows：一個表格中所有行的HTMLCollection；

createTHead()：創建thead元素并將其放入表格中，返回引用；

createTFoot()：創建tfoot元素并將其放入表格中，返回引用；

createCaption()：創建caption元素并將其放入表格中，返回引用；

deleteTHead()：刪除thead元素；

deleteTFoot()：刪除tfoot元素；

11. deleteCaption()：刪除caption元素；
12. deleteRow(pos)：刪除指定位置的行；
13. insertRow(pos)：插入一行到rows集合中；

為tbody元素添加的屬性和方法如下：

deleteRow(pos)：刪除指定位置的行；

insertRow(pos)：插入一行到指定位置的rows集合中；

為tr元素添加的屬性和方法如下：

cells：tr元素中單元格的HTMLCollection；

deleteCell(pos)：刪除指定位置的單元格；

insertCell(pos)：插入一個單元格到cells集合中；

使用這些方法和屬性可以極大的減少創建表格所需的代碼數量，返回對心插入單元格的引入；前面的代碼重寫如下：

//創建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(1);
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);

使用NodeList

需要理解NodeList以及NamedNodeMap和HTMLCollection；這三個集合都是“動態的”；每當文檔結構發生變化時，他們都會得到更新。
在遍歷NodeList的時候很容易犯這樣的錯誤：

var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
    var div = document.createElement("div");
    div.appendChild(document.createTextNode("data"));
    document.body.appendChild(div);
}

這是一個無限循環，因為divs是動態的實時更新的。

應該把length屬性初始化第二個變量：

var divs = document.getElementsByTagName("div");
for (var i = 0, len = divs.length; i < len; i++) {
    var div = document.createElement("div");
    div.appendChild(document.createTextNode("data"));
    document.body.appendChild(div);
}

應該盡量減少訪問NodeList的次數；因為每次訪問NodeList都會運行依次基于文檔的查詢；所以應該考慮將從NodeList中提取出的值緩存起來。

云服務器 GPU云服務器 javascript的dom對象 javascript的dom編程 javascript dom javascript dom 編程藝術

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78295.html

React要點入門學習總結

摘要：上面代碼中，通過為組件指定事件的回調函數，確保了只有等到真實發生事件之后，才會讀取屬性。七表單代碼九要點文本輸入框的值，不能用讀取，而要定義一個事件的回調函數，通過讀取用戶輸入的值。一.JSX簡介 JSX即JavaScript XML,一種在React組件內部構建標簽的類XML語法。在不使用JSX的情況下，React程序中創建DOM是這樣的： //v0.11 React.DOM.h1...

Towers 2019-08-22 12:46 評論0 收藏0
JavaScript JavaScript與XML——“XML DOM”的注意要點

摘要：如發生解析錯誤時，仍然會從中返回一個對象。但這個對象的文檔元素是對象根元素第一個子元素為。 DOM2級核心 docuent.implementation中引入了createDocument()方法，IE9支持該方法，如： var xmldom = document.implementation.createDocument(namespaceUri, root, doctype); ...

melody_lql 2019-08-19 17:37 評論0 收藏0
JavaScript JavaScript與XML——“XML DOM”的注意要點

摘要：如發生解析錯誤時，仍然會從中返回一個對象。但這個對象的文檔元素是對象根元素第一個子元素為。 DOM2級核心 docuent.implementation中引入了createDocument()方法，IE9支持該方法，如： var xmldom = document.implementation.createDocument(namespaceUri, root, doctype); ...

figofuture 2019-08-27 10:53 評論0 收藏0
JavaScript DOM擴展——“專有擴展”的注意要點

摘要：另外，以及這兩個方法，在測試了一下，并無反應。不知是否兼容問題。下面是獲得焦點的時候，自動以每毫秒的速度往下滾屏文檔模式頁面的文檔模式是由IE8引入的，文檔模式決定了可以使用的CSS級別、JS中的API以及如何對待文檔類型（doctype）；在IE9，提供了4中文檔模式： IE5：混雜模式； IE7：IE7標準模式渲染頁面； IE8：IE8標準模式渲染頁面，可以使用Selecto...

wudengzan 2019-08-19 17:15 評論0 收藏0
JavaScript DOM2和DOM3——“DOM的變化”的注意要點

摘要：和級分為許多模塊，分別描述了的某個非常具體的子集。這些模塊主要有核心視圖事件樣式遍歷和范圍以及。另外還有方法和方法框架的變化框架和內嵌框架分別用和表示，它們在級中都有一個新屬性這個屬性包含一個指針，指向表示框架內容的文檔對象。 DOM2和DOM3級分為許多模塊，分別描述了DOM的某個非常具體的子集。這些模塊主要有核心（Core）、視圖（Views）、事件（Events）、樣式（Styl...

騫諱護 2019-08-19 17:14 評論0 收藏0