JS學習筆記（第10章）（DOM之節(jié)點層次）

kamushin233 發(fā)布于2019-08-26 10:20 / 1175人閱讀

摘要：節(jié)點層次是針對和文檔的一個。每一段標記都可以通過一個節(jié)點來表示。用于表明節(jié)點的類型。返回新增的這個節(jié)點。將節(jié)點插入到節(jié)點列表指定的位置。節(jié)點有以下的特性為，為指向元素，指向元素。提供了對元素的標簽名，子節(jié)點和特性的訪問。

節(jié)點層次

DOM是針對HTML和XML文檔的一個API。DOM描繪了一個層次化的節(jié)點樹，允許開發(fā)人員添加、移除和修改頁面的某一部分。

DOM可以將任何HTML或XML文檔描繪成一個由多層節(jié)點構成的結構。每個節(jié)點都有自己的特點、數(shù)據(jù)和方法，也與其他的節(jié)點存在某種關系，構成了層次。

元素為文檔元素。是文檔的最外層元素。每一段標記都可以通過一個節(jié)點來表示。HTML元素通過元素點表示，特性通過特性點來表示。文檔類型通過文檔類型節(jié)點來表示。注釋通過注釋節(jié)點來表示。共有12種節(jié)點類型，這些類型都繼承自一個基類型。

1、Node類型

每個節(jié)點都有一個nodeType屬性。用于表明節(jié)點的類型。要了解節(jié)點的具體信息，可以使用nodeName和nodeValue這兩個屬性。這兩個屬性的值完全取決于節(jié)點的類型。

每個節(jié)點都有一個childNodes屬性，其中保存著NodeList對象?？梢酝ㄟ^方括號，也可以使用item()來訪問Nodelist中的節(jié)點。

每個節(jié)點都有一個parentNode屬性，指向父節(jié)點。都有previousSibling 和nextSibling

父節(jié)點的firstChild和lastChild分別指向其childNodes的第一個和最后一個節(jié)點。

因為節(jié)點的關系指針都是只讀的，所以DOM提供了操作節(jié)點的方法。

appendChild():向childNodes列表的末尾添加一個節(jié)點。返回新增的這個節(jié)點。如果已經(jīng)有了這個節(jié)點，那么就將該節(jié)點從原來的位置轉移到最后的位置。

insertBefore():將節(jié)點插入到節(jié)點列表指定的位置。接收兩個參數(shù)，被插入的節(jié)點和作為參照的節(jié)點，被插入的節(jié)點將會變成參照節(jié)點的前一個同胞節(jié)點。

replaceChild():替換節(jié)點。接收兩個參數(shù)，要插入的節(jié)點和要替換的節(jié)點。返回要替換的節(jié)點。

removeChild():移除節(jié)點。返回值為那個被移除的節(jié)點。

cloneNode():復制節(jié)點。參數(shù)為 true的時候執(zhí)行深復制，為false則執(zhí)行淺復制。這個方法只復制特性，不會復制節(jié)點中的js屬性。

2、Document類型

js通過document類型表示文檔。document對象是HTMLDocument的一個實例。Document節(jié)點有以下的特性：
nodeType為9，nodeName為‘#document’document.documentElement指向html元素，document.body指向body元素。

document.title:獲取或修改文檔的標題。

document.URL:獲取完成的URL

document.domain:獲取域名

document.referrer:獲取來源頁面的URL

document.getElementById():

document.getElementByTageName:獲取到HTMLCollection對象，這個對象有一個方法namedItem()，可以通過元素的name特性取得集合中的項。

document.getElementByName():獲得所有有name特性的元素。

特殊集合：

document.forms:取得文檔中所有form元素。

document.images:取得所有的img元素。

document.links:取得所有帶href特性的a元素

document.write():頁面寫入內(nèi)容

3、Element類型

element類型為xml或者html的元素。提供了對元素的標簽名，子節(jié)點和特性的訪問。

特性：nodeType為1， nodeName的值為元素的標簽名。 parentNode可能為Document或者Element

標準屬性：id、title 、lang（元素內(nèi)容的語言代碼，很少使用）、dir（值為ltr或rtl）、className

取得特性： getAttribute()有兩類特殊的特性，通過getAttribute返回的值并不相同。第一個就是style，返回的是style的字符串。第二個就是onlick這樣的事件處理程序，返回的也是相應代碼的字符串?；谶@些，一般只有在取得自定義特性值的時候，才使用getAttribute的方法。

　　- setAttribute():參數(shù)為要設置的特性名和值

　　- removeAttribute():刪除元素的特性。

　　- attributes屬性

創(chuàng)建元素

　　- document.createElement()可以創(chuàng)建新元素，參數(shù)為要創(chuàng)建元素的標簽名。

元素的子節(jié)點

　　- 元素的childNodes屬性中包含了它的所有的子節(jié)點

4、Text類型

文本節(jié)點由Text類型表示，包含的可以是純文本內(nèi)容。

特性： nodeType為3， nodeName為‘#text’， nodeValue為節(jié)點所包含的文本。不支持子節(jié)點

創(chuàng)建文本節(jié)點

　- document.createTextNode()創(chuàng)建新文本節(jié)點。參數(shù)為要插入的文本。

規(guī)范化文本節(jié)點

　- normalize()可以將一個包含多個文本節(jié)點的父元素的所有文本節(jié)點合并成一個節(jié)點。

　- splitText():按照指定的位置分割ndoeValue

5、Comment類型

注釋類型，特性為:nodeType為8，nodeName為‘#comment’，nodeValue為注釋內(nèi)容

6、DocumentFragment類型

文檔片段在文檔中是沒有對應的標記的。不過可以包含和控制節(jié)點。

document.createDocumentFragment()

7、Attr類型

元素的特性就是Attr類型來表示。特征為： nodeType為2，nodeName為特性的名稱，nodeValue為特性的值

GPU云服務器云服務器明解c語言第9章 js中操作dom節(jié)點深度學習層次 dom節(jié)點

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/106015.html

JS學習筆記（第19章）（E4X）

摘要：的類型類型創(chuàng)建對象的方法調(diào)用構造函數(shù)使用字面量將數(shù)據(jù)直接指定給一個變量。表示解析器應該忽略標記中的處理指令。這三個設置會影響對傳入到構造函數(shù)中的字符串以及字面量的解析。 showImg(https://segmentfault.com/img/bVbvHVV?w=737&h=593); 1、E4X的類型 1.1 XML類型 1、創(chuàng)建XML對象的方法：（1）調(diào)用構造函數(shù)： var x ...

lijinke666 2019-08-26 10:26 評論0 收藏0
《JavaScript高級程序設計》（第3版）讀書筆記第10章 DOM

摘要：年月級規(guī)范成為的推薦標準，為基本的文檔結構及查詢提供了接口。這意味著中的對象與原生對象的行為或活動特點并不一致。結果第一條注釋就會成為中的第一個子節(jié)點。由于跨域安全限制，來自不同子域的頁面無法通過通信。 DOM(文檔對象模型)是針對HTML和XML文檔的一個API（應用程序編程接口）。DOM描繪了一個層次化的節(jié)點樹，允許開發(fā)人員添加、移除和修改頁面的某一部分。DOM脫胎于Netsc...

yearsj 2019-08-26 13:51 評論0 收藏0
JS學習筆記（第18章）（JavaScript與XML）

摘要：函數(shù)接收三個參數(shù)上下文節(jié)點表達式和可選的命名空間對象。命名空間對象應該是下面這種字面量的形式。使用樣式表轉換文檔跨瀏覽器使用這個函數(shù)接收兩個參數(shù)要執(zhí)行轉換的上下文節(jié)點和文檔對象。 showImg(https://segmentfault.com/img/bVbvHVd?w=962&h=496); 本章主要講解了以下四個問題： 1、將XML解析為DOM文檔跨瀏覽器把XML解析為DOM文...

GT 2019-08-26 10:25 評論0 收藏0
JS學習筆記（第10章）（DOM操作技術）

摘要：動態(tài)腳本創(chuàng)建動態(tài)腳本有兩種方式插入外部文件和直接插入代碼。一般來說應該盡量減少訪問的次數(shù)，因為每次訪問，都會運行一次基于文檔的查詢。所以，可以考慮將從中取得的值緩存起來。 1、動態(tài)腳本創(chuàng)建動態(tài)腳本有兩種方式：插入外部文件和直接插入Javascript代碼。（1）調(diào)用外部文件 function loadScript(url) { var script = documen...

UCloud 2019-08-26 10:20 評論0 收藏0
《Head First JavaScript》讀書筆記

摘要：設定的值的時候，即已自動暗示類型。第五章循環(huán)自我重復的風險數(shù)組用于在單一場所存儲多段數(shù)據(jù)數(shù)組的頁碼稱為鍵，索引只是一種形式特殊的鍵，它是數(shù)值鍵存儲在數(shù)組里的數(shù)據(jù)不一定為相同類型并不要求二維數(shù)組具有相同的行數(shù)，但是最好保持一致。 ** 簡介 **書名：《Head First JavaScript》中文譯名：《深入淺出JavaScript》著：Michael Morrison編譯：O’R...

ztyzz 2019-08-19 17:13 評論0 收藏0