根據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.工...