JavaScript學習筆記（五）之DOM樹

2021-08-21 08:00:20 字數 4956 閱讀 3226

十一、dom或以樹型展示的web頁面

定義dom的基礎設施，包括模式（schema）和應用程式設計介面（api）。dom的核心是語言無關的api，可以用任何語言實現，dom的核心就是提供修改、刪除或建立web頁面內容所需的各種功能。主要的兩個api即html和core。它們都能實現相同的功能，但html具有很好的自描述性，有專門的物件名稱，如果想建立自己的可復用物件庫，最好使用更通用的core。

（一）html api

dom html api是一組物件介面（介面是乙個表示特定頁面元素的物件，它沒有建構函式，物件是通過其他函式建立的）集，而不是實際的物件類。通過這些介面可以訪問原有的或新建立的頁面物件。

html api

從htmlelement中繼承了屬性和方法，還從核心的node物件中繼承。而

html物件

是從htmlelement中繼承的，擁有以下屬性

id   

元素識別符號

title

元素內容的描述性標題

lang

元素及其內容的語言

dir文字方向（從左到右）

classname

等價於class屬性

絕大數html屬性都是可讀寫的，這也就意味著可以通過js來訪問和修改它。

var img = document.images[0];


img.src="1.png";


img.width="800";
這種通過js修改元素的技術，也是解決xhtml嚴格要求的一種方法，在開發更為複雜的ajax應用時，該技巧是向頁面元素新增自定義屬性的好方法。

html介面物件提供了建立、刪除或以其他方式修改相關聯的頁面元素的方法。特別是table元素，提供了一組特定的方法和特定的物件，但要建立這些介面物件，需要使用乙個工廠方法。

var tb1 = document.getelementbyid('table1');


tb1.border = "5px";


tb1.cellpadding = "5px";


var img = document.getelementbyid('image1');


img.vspace = "10"


var row1 = tb1.insertrow(-1);


var cell1 = row1.insertcell(0);


var cell2 = row1.insertcell(1);


var txt1 = document.createtextnode("somename");


var txt2 = document.createtextnode("somename");

html介面並不直接表示特定和html元素，而是表示物件的集合（html集合）。

htmlcollection介面只有乙個名為length的屬性，還有兩個能夠返回集合中特定物件的方法：item（數字引數）和nameditem（字串引數）。

（二）core api

產業界開始不再使用html，而逐漸傾向於使用xml和xhtml。對於它們而言，html api依然有效，但名為core api的另一組介面就流行起來。core提供了乙個規範，可以通過兩種不同的技術訪問內容樹的節點：查詢特定型別的所有標籤；遍歷不同的層級。不僅可以從樹上讀取節點，還可以刪除或建立新的節點。

1.node物件（提供層次結構的文件樹支援）

文件的元素描述為乙個節點（node）集合，它們之間是以層次結構的樹形結構相連線的。在dom樹結構中，屬於另乙個元素的乙個元素稱為子節點，作為子節點的容器元素稱為父節點，父節點相同的一級元素稱為兄弟節點。每乙個節點都擁有core的node物件中定義的所有基本屬性集和基本方法集：

nodename

物件名稱（head元素即head）

nodevalue

如果不是乙個元素，返回物件值

nodetype

用數字表示的節點型別

parentnode

當前節點的父節點

childnodes

由其子節點組成的nodelist，前提是存在子節點

firstchild

由子節點組成的nodelist中的第乙個節點

lastchild

由子節點組成的nodelist中的最後乙個節點

previoussibling

表示該列表中的前乙個節點

nextsibing

表示該列表中的下乙個節點

attributes

乙個namednodemap，是該元素的屬性列表

ownerdocument

擁有的document物件

namespaceuri

針對節點的命名空間的uri

prefix

針對節點的命名空間的字首

localname

指定namespace的uri的話，它表示節點的本地名

insertbefore(newchild,refchild)

在refchild指定的現有節點前插入新節點

replacechild(newchild,oldchild)

替換現有節點

removechild(oldchild)

刪除現有子節點

為文件新增子節點。

注：必須在正確的上下文中呼叫這些方法。

//輸出節點屬性


function outputnode (nd)  


alert(strnode);


}
節點中的nodetype屬性是數字型的，也可利用常量訪問每種型別的節點

element_node

1attribute_node

2text_node

3cdata_section_node

4entity_reference_node

5entity_node

6processing_instruction_node

7comment_node

8document_node

9document_type_node

10document_fragment_node

11notation_node

12注：該常量的實現並不普遍，ie沒有實現這些常量

2.document物件（所有頁面元素的所有者/父節點）

web頁面文件之間的核心介面。它提供的方法能夠建立和刪除頁面元素，也能控制它們在頁面中的位置。它還提供了兩個訪問頁面元素的方法：getelementbyid和getelementbytagname。

getelementbytagname方法將返回乙個節點列表（nodelist），它表示的是頁面中指定標籤的所有頁面元素

function highlight () 


}

工廠方法

建立的物件

描述createelement(tagname)

element

建立特定型別的元素

createdocumentfragment

documentfragment

輕量級的document物件，用於獲取文件樹中的乙個部分

createtextnode(data)

text

儲存頁面中的文字

createcomment（data）

comment

xml注釋

createcdatasection(data)

cdatasection

cdata區段（section）

createprocessinginstructions

(target,data)

processinginstruction

xml處理指令

createattribute(name)

attr

元素屬性

createelementns

(namespaceuri,qualitifiedname)

element

建立帶有命名空間的元素

createattributens

(namespaceuri,qualitifiedname)

attr

建立帶有命名空間的屬性

createentityreference(name)

entityreference

建立後面放置的元素

var div = document.createelement("div");


var p = document.createelement("p");


var text = document.createtextnode("text");
如果要在dom樹中新增大量的節點，可以先使用createdocumentfragment方法建立乙個documentfragment，接著為其新增節點，然後將documentfragment新增到文件樹中，這樣效能會加強。

3.element物件（訪問其上下文內元素）

文件中的所有頁面元素都將從element元素中繼承乙個api或多個屬性。其主要功能是獲取和設定屬性值以及檢查屬性是否存在：

element.getattribute(name);


element.setattribute(name,value);


element.removeattribute(name);


element.getattributenode(name);


element.setattributenode(attr);


element.removeattributenode(attr);


element.hasattribute(name);
element物件和document物件共享getelementbytagname方法。

var div = document.getelementbyid("divname");


var p = div.getelementsbytagname("p");

JavaScript學習記錄五

程式設計思想 把一些生活中做事的經驗融入到程式中 面向過程 凡事都要親力親為,每件事的具體過程都要知道,注重的是過程 物件導向 根據需求找物件,所有的事都用物件來做,注重的是結果 物件導向特性 封裝,繼承,多型 抽象性 js不是物件導向的語言,但是可以模擬物件導向的思想 js是一門基於物件的語言 萬...

Javascript 學習筆記

如果在生成的html裡面有事件需要傳遞帶特殊字元的引數，處理如下 singletext 輸入 1.singletext value.escapehtml 為 將html編碼 2.singletext value.escapehtml inspect 為 3.在 jsdebugtext innerht...

javascript學習筆記

視窗操作 1改變視窗的位置 window.location 2視窗的歷史操作 previous 3建立新的視窗 window.open url 視窗名稱 視窗特徵字元 細節 不能換行寫 視窗特徵 width,height,yes,no munubar,status,scrollbars,resiza...