javaScript 文件物件模型(DOM)

2021-08-19 23:16:47 字數 4333 閱讀 9215

根據dom會將html轉換成一系列的節點,呈樹狀結構(dom tree),我們能夠通過dom提供的各種api來實現對html文件的,增,刪,查,改等各種操作

節點是dom 中最基本的單位,像一顆樹中的每根樹枝。通過節點與節點之間的關係可以分為:

父節點 2. 子節點 3. 兄弟節點

而 document 物件中包含了所有的節點代表了整個dom樹的最上層,其下只有乙個根節點(rootnode)和乙個文件型別節點(documenttype)

解析html結構 ==> 載入外部的樣式和指令碼檔案 ==> 解析並執行指令碼** ==> 構鍵html dom模型(觸發domcontentloaded事件) ==> 載入等外部檔案 ==> 介面載入完畢(觸發load事件)

所有的節點都有一些屬性和方法有的是共同有的是單獨的,我們可以通過這些屬性和方法進行對dom的一系列操作

nodevalue:節點的文字值

只有文字節點(text)和注釋節點(comment)有文字值

與innertext一致,標籤將不會被解析

console.log(document.baseuri);// file:///f:/home/js/t1.html

可以是元素節點,文字節點,注釋節點等等

通過這種方式返回的父節點,肯能是元素節點文件節點文件片段節點

包括所有的節點

haschildnodes():判斷乙個元素是否有子節點,返回乙個布林值

任何型別的節點都參與判斷

布林值引數代表是否需要同時轉殖子節點

但是會失去所有繫結的事件

referencenode必須是父節點中的子節點

referencenode如果為null則插入的元素的最後 但是不能省略元素

<

divid="box"

>

<

p>1

p>

<

p>2

p>

<

p>3

p>

<

p>4

p>

div>

<

pid="addelement"

>new

p>

<

script

>

box.insertbefore(addelement,box.firstchild);// 新增到最前面

script

>

此方法需要在父級節點上呼叫然後找到自己再進行刪除

<

divid="box"

>

<

p>1

p>

<

p>2

p>

<

pid="rmchild"

>3

p>

<

p>4

p>

div>

<

script

>

rmchild.parentnode.removechild(rmchild);// 移除第三個p標籤

script

>

oldchild 必須是元素的子節點

<

divid="box"

>

<

p>1

p>

<

p>2

p>

<

pid="rmchild"

>3

p>

<

p>4

p>

div>

<

pid="addelement"

>new

p>

<

script

>

box.replacechild(addelement,rmchild);// 將box 裡面的第三個p標籤替換為 addelement

script

>

before(node[, node ...]) / after(node[, node ...]):往前 / 後,新增乙個或者多個兄弟節點

remove():從dom中刪除自己

replacewith(child):替換當前節點

寬度不包括滾動條的寬度,不計算超出內容的寬度

寬度包括滾動條的寬度,不計算超出內容的寬度,同時需要獲取整個網頁的高度,需要從 document.documentelement (html物件)上獲取

寬度包括滾動條的寬度,計算超出內容的寬度

一般結合 scroll 事件使用,同時需要獲取整個網頁的滾動高度,需要從 document.documentelement (html物件)上獲取

// 獲取元素相對整個網頁的位置

function

geteleposition(ele)while(p

!==null);

return ;

}

document 物件為整個文件的最上層的物件,dom中所有的節點都是document物件的子節點,並且包含了許多與dom相關的方法與屬性

var newdiv = document.createelement('div');

newdiv.innerhtml = 'hello dom!';

此方法與innerhtml新增的區別在於,不會影響到原有節點的屬性或者方法的繫結,而innerhtml相當於重新新增了所有元素,將會失去事件的繫結

瀏覽器在本地暫時儲存資料的機制,通常為一些使用者名稱,等等使用者資訊的儲存

cookie的讀寫

cookie實際上就是儲存了一對一對的字串的鍵與值,所以我們只需要給cookie賦值那麼就可以儲存cookie但是需要注意字串有特定的格式:

儲存格式:'key=value;'

讀取格式:'name=amo; password=666666'

ps:每次只能儲存一條資料,讀取的時候為全部讀取,多條資料之間用分號和空格隔開

// 設定

document.cookie

="name=amo;";

document.cookie

="password=666666;";

// 獲取

console.log( document.cookie );// name=amo; password=666666

預設情況下cookie只能儲存到瀏覽器關閉,如果我們需要cookie在一段時間內儲存,我們在儲存cookie的時候設定過期的時間戳

時間戳寫在每條資料後的 expires 屬性中代表當前資料的過期時間

時間戳需要轉換為 utc 的格式

// 設定固定時間戳

vardateuser

='sat, 07 apr 2018 13:56:21 gmt';

document.cookie

="name=amo;expires="

+dateuser;

​// 設定未來某個時間的時間戳

vardatepassword

=new

date( new

date().gettime() +

10000 ).toutcstring();// 設定未來10000毫秒後的時間戳

document.cookie

="password=666666;expires="

+date;

JavaScript建立物件的五種常用模式

所謂工廠模式,就是建立乙個工廠方法,將建立物件的過程用乙個函式進行封裝,即放到工廠方法中,並且在這個函式 工廠方法 內進行物件的初始化,最終返回這個物件。如 function createperson name,age return o 最後返回這個物件 工廠模式的優點 每次建立物件的時候只需呼叫一...

JavaScript 建立物件的5種常見模式

1 工廠模式 定義 以函式來封裝以特定介面建立物件的細節,其實就是通過函式來建立乙個物件並返回。缺點 每次呼叫都會返回乙個物件,不能節省記憶體,同時物件例項無法獲取其物件型別。function createperson name,age,job return o var person1 create...

Javascript定義物件

1.原始方式 建立多個物件缺陷 var car new object car.name asdf car.method1 function 2.工廠模式,可傳遞引數 方法建立多個缺陷 function createcar return tempobj var carobj createcar 3.工...