資訊專欄INFORMATION COLUMN
摘要：是針對和文檔的一個。在瀏覽器中，對象是繼承自類型的一個實例，表示整個頁面。不過只有公認的特性才會以屬性的形式添加到對象中?？偨Y操作往往是程序中開銷最大的部分，而因訪問導致的問題為最多。有鑒于此，最好的辦法就是盡量減少操作。
DOM是針對HTML和XML文檔的一個API。DOM描繪了一個層次化的節點樹，允許開發人員添加、移除和修改頁面的某一部分。
節點層次
sample page
Hello World!
文檔節點(Document node)是每個文檔的根節點(在瀏覽器中對應的是document)，在這個例子中，文檔節點有兩個子節點，一個是(DocumentTyep類型)，另一個是(Element類型)。文檔元素是文檔最外層的元素，文檔中的其他所有元素都是包含在文檔元素中。每個文檔只能有一個文檔元素，在HTML頁面中，文檔元素始終是元素。
Node類型JavaScript中，所有節點類型都繼承自Node類型，因此所有節點類型都共享著相同的基本屬性和方法
每個節點都有一個nodeType屬性，用于表明節點的類型.
確定節點類型
if (someNode.nodeType == Node.Element_NODE){
alert("Node is an element"); // 表明該節點是一個HTML元素
}
或者
if (someNode.nodeType == 1){
alert("Node is an element"); // 表明該節點是一個HTML元素
}
nodeName和nodeValue
如果node是HTML標簽，則nodeName的值就是元素的標簽名,對于非文檔節點，返回null
if (someNode.nodeType == 1){
tagName = someNode.nodeName;
}
對于文檔節點(HTML標簽)來說, nodeValue返回null. 對于text, comment, 和 CDATA 節點來說, nodeValue返回該節點的文本內容. 對于 attribute 節點來說, 返回該屬性的屬性值.
節點之間的關系(node的一些屬性)：
node.childNodes
node.parentNode
node.previousSibling
node.nextSibling
node.firstChild
node.lastChild
操作節點(node的一些方法)
node.appendChild():返回新增的節點，這個返回的節點是存在于DOM樹中的節點，可以通過上面的屬性訪問DOM樹中的其他節點
var returnNode = parentNode.appendChild(newNode);
insertBefore(newNode, baseNode): 同樣會返回一個新節點，同上
replaceChild(newNode, replacedNode): 同樣會返回一個新節點，同上
removeChild(node):會返回一個節點，該節點不存在于DOM樹中
cloneNode：
// 執行深復制，即復制節點及其整個子樹 var returnNode = someNode.cloneNode(true); // 執行淺復制，只復制節點本身 var returnNode = someNode.cloneNode(false);Document類型
JavaScript通過Document類型表示文檔。在瀏覽器中，document對象是HTMLDocument(繼承自Document類型)的一個實例，表示整個HTML頁面。document對象是window對象的一個屬性，因此可以作為全局對象來訪問
文檔子節點
Document節點(瀏覽器中是document)的子節點可能是DocumentType(最多一個，例如)、Element(最多一個例如 )、ProcessingInstruction、Comment
document.documentElement 始終指向HTML頁面中的文檔元素()
document.body直接返回對
元素的引用document.doctype會返回對的引用
document.title返回文檔標題的內容(只讀)
document.childNodes會返回[,html] (如果存在DOCTYPE的話)
文檔信息：(可以獲取或者設置這些屬性)
document.title
document.URL: 包含頁面完整的URL(地址欄中的URL)
document.domain:
document.referrer: 鏈接到當前頁面的那個頁面的URL
查找元素
document.getElementById()
document.getElementsByTagName()：返回HTMLCollection對象
document.getElementsByName():返回帶有給定name特性的所有元素，返回HTMLCollection對象
文檔寫入：
document.write():原樣寫入傳入的字符串
document.writeln(): 在字符串的末尾添加一個換行符
...
the current date and time is:
在 頁面呈現過程 中，通過上面的方式可以在指定位置輸出內容
這兩個方法如果在頁面加載結束后被調用，那么輸出內容會重寫整個頁面
Element類型
要訪問元素的標簽名，可以使用nodeName屬性或者tagName屬性，這兩個屬性會返回相同的值。注意在HTML中tagName會返回大寫的標簽名，在XML中返回值和代碼中的標簽一致。
var div = document.getElementById("myDiv");
alert(div.tagName); // DIV
alert(div.tagName == div.nodeName); //true
alert(div.tagName.toLowerCase() == "div"); // true
HTML元素
可以直接訪問和修改的屬性：
id： element.id
title: element.title
className: element.className
lang
dir: 文字方向
var div = document.getElementById("myDiv");
alert(div.id);
alert(div.className);
alert(div.title);
alert(div.lang);
alert(div.dir);
取得特性: getAttribute
var div = document.getElementById("myDiv");
alert(div.getAttribute("id"));
alert(div.getAttribute("class");
alert(div.getAttribute("title");
alert(div.getAttribute("lang");
alert(div.getAttribute("dir");
對于style、onclick這種特殊的特性，getAttribute()只能返回相應代碼的字符串，因此在通過JavaScript以編程的方式操作DOM時，開發人員經常不使用getAttribute(),而是只使用對象的屬性(div.id)
任何元素的所有特性，也都可以通過DOM元素本身的屬性來訪問。不過只有公認的特性才會以屬性的形式添加到DOM對象中。 以下面的元素為例：
由于id和align在html中是
的公認特性，因此在該元素的DOM對象中也將存在對應的屬性。
alert(div.id); // "myDiv"
alert(div.my_special_attribute); // undefined
alert(div.align); //"left"
設置特性--setAttribute()
setAttribute()接受兩個參數，要設置的特性名和值。如果特性已經存在，則會替換已有的值，如果特性不存在，則會創建該屬性并設置相應的值。
var div=document.getElementById("myDiv");
div.setAttribute("id","someOtherId");
移除屬性--removeAttribute()
var div=document.getElementById("myDiv");
div.removeAttribute("id");
attributes屬性：使用不方便不經常使用，但是可以用來遍歷元素特性
Element類型是使用attribute屬性的唯一一個DOM節點類型。attribute屬性中包含一個NamedNodeMap。元素的每個特性都有一個Attr節點表示，每個節點都保存在NamedNodeMap對象中。NamedNodeMap對象擁有下列方法。
getNamedItem(name):返回nodeName屬性等于name的節點
removeNamedItem(name): 移除nodeName屬性等于name的節點
setNamedItem(node): 向列表中添加節點，以節點的nodeName屬性為索引
item(pos): 返回位于數字pos位置處的節點
var id = element.attributes.getNamedItem("id").nodeValue;
var id = element.attributes["id"].nodeValue;
使用不方便不經常使用，但是可以用來遍歷元素特性
function outputAttributes(element){
var pairs = new Array(),
attrName,
attrValue,
i,
len;
for(i=0; len=element.attributes.length; i
創建元素
document.createElement()方法可以創建新元素，這個方法只接受一個參數，即要創建元素的標簽名
var div = document.createElement("div");
div.id = "myDiv";
div.className = "box";
// 此時新元素還沒有添加到文檔樹中，因此設置這些特性不會影響瀏覽器的顯示
// 把新元素添加到文檔樹中：appendChild()、insertBefore()、replaceChild()
document.body.appendChild(div);
元素的子節點
如果想通過某個特定的標簽名取得子節點或者后代節點，可以在元素上調用getElementsByTagName()方法
Text類型
文本節點由Text類型表示，包含的是可以按照字面解釋的純文本內容，但是不能包含HTML代碼
重要的特點：
nodeType的值為3
nodeName為#text
nodeValue的值為節點包含的文本
parentNode是一個Element
沒有(不支持)子節點
有一些操作節點中文本的方法：
appendData(text): 將text添加到末尾
deleteData(offset, count): 從offset指定的位置開始，刪除count個字符
insertData(offset, text):
replaceData(offset, count, text)
splitText(offset): 從offset指定位置將當前文本節點分成兩個 文本節點
...
如果在一個包含兩個或多個文本節點的父元素上調用normalize()方法，則會將所有文本節點合并成一個節點，結果節點的nodeValue等于將合并前每個文本節點的nodeValue值拼接起來的值。
DocumentFragment類型：
在所有的節點類型中，只有DocumentFragment在文檔中沒有對應的標記。DOM規定文檔片段是一種“輕量級”的文檔，可以包含和控制節點，但不會像完整的文檔那樣占用額外的資源。
雖然不能把文檔片段直接添加到文檔中，但是可以將它作為一個倉庫來使用，即在里面保存將來可能會添加到文檔中的節點。
創建文檔片段的方式：document.createDocumentFragment()
var fragment = document.createDocumentFragment();
var ul = document.getElementById("myList");
var li = null;
//位ul添加三個li
for(var i=0; i<3; i++){
li = document.createElement("li");
li.innetText = "Item" + (i+1);
fragment.appendChild(li);
}
ul.appendChild(fragment);
上面的例子是為ul元素添加3個列表項，如果逐個地添加列表項，將會導致瀏覽器頻繁渲染新信息。為避免這個問題，可以使用frament，將所有列表項先添加到fragment中，最后將fragment添加到文檔中。通過這種方式減少了瀏覽器的渲染次數。
DOM操作技術
動態腳本
插入外部文件
function loadScript(url){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.body.appendChild(script);
}
行內方式
var script = document.createElement("script");
script.type = "text/javascript";
script.appendChild(document.creatTextNode("function sayHi(){alert("hi");}"));
document.body.appendChild(script);
動態樣式
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);
}
操作表格
HTML DOM為, , 元素添加了一些屬性和方法，通過這些屬性和方法，我們可以方便的對表格進行操作
使用NodeList
NodeList，NamedNodeMap和HTMLCollection都是動態的，每當文檔結構發生變化時，它們都會得到更新。
一般來說，應該盡量減少訪問NodeList的次數，因為每次訪問NodeList，都會運行一次基于文檔的查詢，所以可以考慮將從NodeList中取出的值緩存起來。
總結
DOM操作往往是JavaScript程序中開銷最大的部分，而因訪問NodeList導致的問題為最多。NodeList對象都是“動態的”，這就意味著每次訪問NodeList對象，都會運行一次查詢。有鑒于此，最好的辦法就是盡量減少DOM操作。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/87003.html
相關文章
-
20170609-DOM相關屬性和方法
摘要：父子元素節點屬性返回子元素節點的個數返回當前元素的子元素節點的集合返回第一個子元素節點返回最后一個子元素節點返回同級的下一個元素節點返回同級的前一個元素節點返回父元素節點獲取當前元素節點的相關屬性返回該元素所有屬性的一個實時集合是一個對象
Element:
父子元素節點屬性:
childElementCount:返回子元素節點的個數
children:返回當前元素的子元素節點的集合
...
-
2016年總結 - 收藏集 - 掘金
摘要：然而這次的文章，就像賀師俊所說的這篇文章是從程序員這個老年度總結前端掘金年對我來說，是重要的一年。博客導讀總結個人感悟掘金此文著筆之時，已經在眼前了。今天，我就來整理一篇，我個人認為的年對開發有年終總結掘金又到
2016 Top 10 Android Library - 掘金
過去的 2016 年，開源社區異?；钴S，很多個人與公司爭相開源自己的項目，讓人眼花繚亂，然而有些項目只是曇花一...
-
【經驗分享】測試人員如何寫總結
摘要：參與者項目經理產品經理開發經理測試經理及其它相關人員。項目上線后問題反饋針對項目客戶反饋問題進行分析總結，類似缺陷分析，重點總結遺漏的原因及后需的規避措施。六匯總整理各部門總結并發布基于測試總結過程中的數據分析，我們提出了對部門的建議。 最近參與了幾次面試，面試者的簡歷中都會提及：需求或者...
-
Java學習路線總結，搬磚工逆襲Java架構師（全網最強）
摘要：哪吒社區技能樹打卡打卡貼函數式接口簡介領域優質創作者哪吒公眾號作者架構師奮斗者掃描主頁左側二維碼，加入群聊，一起學習一起進步歡迎點贊收藏留言前情提要無意間聽到領導們的談話，現在公司的現狀是碼農太多，但能獨立帶隊的人太少，簡而言之，不缺干 ? 哪吒社區Java技能樹打卡?【打卡貼 day2...
-
全本 | iKcamp翻譯 | 《JavaScript 輕量級函數式編程》|《你不知道的JS》姊妹篇
摘要：本書主要探索函數式編程的核心思想。我們在中應用的僅僅是一套基本的函數式編程概念的子集。我稱之為輕量級函數式編程。通常來說，關于函數式編程的書籍都熱衷于拓展閱讀者的知識面，并企圖覆蓋更多的知識點。，本書統稱為函數式編程者。
原文地址：Functional-Light-JS
原文作者：Kyle Simpson?。 禮ou-Dont-Know-JS》作者
譯者團隊（排名不分先后）...
發表評論
0條評論
Mertens
男|高級講師
TA的文章
閱讀更多
使用tensorflow
閱讀 2890·2023-04-26 00:26
tensorflow框架
閱讀 3498·2023-04-25 14:30
趣味Python題目10月8日
閱讀 3390·2021-10-09 09:44
自學大數據前，零基礎，三個月，找到一份測試工作
閱讀 3685·2021-09-28 09:35
虛擬主機怎么搭建云免-虛擬主機怎么弄成云電腦??？
閱讀 1862·2021-09-22 16:02
微軟宣布Windows Server 2022全面上市
閱讀 1257·2021-09-03 10:30
面試之旅-深圳 遇到的問題和一些自己的拓展以及答案1
閱讀 3229·2019-08-30 15:53
css3+less隨機動畫總結
閱讀 2160·2019-08-30 14:07
最新活動
閱讀需要支付1元查看
<
