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