Javascript-DOM總結

DOM摘要

1.DOM的意義

    DOM是Document Object Model文件物件模型的縮寫。根據W3C DOM規範,DOM是一種與瀏覽器，平台，語言無關的接口，使得你可以訪問頁面其他的標準組件。 

DOM 中的節點：

   *  整個文件就是一個文件節點。

   *  而每一個HMTL標籤都是一個元素節點(divElement)。

   *  標籤中的文字則是文字節點(div)。

   *  標籤的屬性是屬性節點(divAttribute)。

   *  一切都是節點

 

2.找出元素

 

1.透過id取得某個標籤，

docum

1.透過id取得某個標籤，

docum.多個標籤

var allA = document.getElementsByClassName('a');

 

3.透過標籤的name (a 或表單中)屬性取得多個標籤

document.getElementsByName('namename' ;

 

4.透過標籤名字取得多個標籤

var allDiv = document.getElementsByTagName('DIV')

 

5,透過選擇器取得某個標籤(如果找到多個標籤,會回傳的第一個)

var aDiv = document.querySelector('div');

 

6,透過選擇器取得多個標籤

document.querySelectorAll('選擇器名稱');節點-元素

1.取得到標籤在內的所有文字

alert(標籤名字.outerHTML)例如li

 

2.透過dir可以看到所有關於節點的屬性資訊

cons

2.透過dir可以看到所有關於節點的屬性資訊

cons

2.標籤名字)例如li

 

3.for in 可以看到關於節點的所有屬性和方法

 

4.取得某個節點的前一個或是後一個元素節點

alert(li1.previousElementSibling. );

alert(li1.nextElementSibling.innerText);

 

5..取得某個節點的前一個或是後一個元素節點（可能是空白文字節點）

alert(li1.previousSibling.nodeName) ;

alert(li1.nextSibling.nodeName);

 

6.取得ul中第一個子節點

alert(ul.firstChild);

！ ！ ！節點

alert(ul.firstElementChild);

alert(ul.lastElementChild.innerText);

7.建立一個新的li節點

var newLi = document.createElement('li'); = 'JQuery';

newLi.style.color = 'red';

 

8.往ul的最後追加一個子節點

ul.appendChild(newLi);

節點替換 之前的某一個子節點

ul.replaceChild(newLi,li1);

 

10. 移除某一個子節點（要移除的節點必須是ul的子節點）

ul.remChildul. (newLi.previousElementSibling);

 

11.往某一個子節點前去插入一個新的節點

ul.insertBefore(newLi,li1);

+節點物件

'beforeBegin', 'afterBegin', 'beforeEnd', 'afterEnd'

ul.insertAdjacentElement('afterEnd',newLi);

 

13. ','

ppppp

');

 

14.插入文字

ul.insertAdjacentText('afterBegin','開始之後')

4.DOM-文本-文本-文本-文本for (var i = 0; i 使用駝峰命名法對變數 或 函數 命名   goShoppingToMall

var aNode = ulChild[i];一個系統的節點類型 元素ELEMENT  屬性ATTRIBUTE  文本TEXT

if (aNode.nodeType == Node.ELEMENT_NODE) {

宏定義 用數字代表節點類型  1，元素2，屬性(aNode.nodeType);

alert(aNode.nodeName);

}

}

 

2.children 取得內部的子！ ！ ！元素！ ！ ！節點

childNode 取得內部的子節點（包含文字節點）

var cssText = ul.children[1].childNodes[0];

取得文字節點中的文字

alert(cssText.node

取得文字節點中的文字

alert(cssText.nodede

); alert(cssText.textContent);

 

3.追加資料

cssText.appendData('CSS');

a:從第幾個字元開始從0開始

: b

長的資料

cssText.deleteData(3,1);

4.替換某一個範圍的字元為另外一段字元

cssText.replaceData(1,2,'CCCCC');

 

5.把某一段字元插入到某個位置（考慮插入之後在什麼位置）

cssText.insertData(2,'A');

 

5.移除文字節點中的文字

cssText.remove(節點-屬性

1.所有的屬性

alert(a.attributes.length);

 

2.直接對元素節點呼叫get方法來取得

alert(a.getAttribute('title'));

 

3.也可以透過set方法來修改某一個屬性的值

3.也可以透過set方法來修改某一個屬性的值

a.setAttribute( 'title','在點我一下');

 

4.也可以透過打.的方式快速取得某一個屬性的值

alert(a.title);

a.title = '不要再點了';

 

5.設定快速鍵

alt + shift + A   瀏覽器測試

a.accessKey = 'A';

 contentEditable = 'true';

 

7.判斷元素是否包含某個屬性

alert(a.hasAttribute('title'))

 

8.獲取元素的類型

9.直接修改元素的類型可能會導致先前的類型遺失

a.className = 'bigSize yellowText';

往a的類型清單中直接加入某一種新類型，不會影響先前的類型

往a的類型清單中直接加入某一種新類型，不會影響先前的類型

a.classList.add('border');

刪除某個屬性

a.classList.remove('bigSize');

 

10.切換是否使用某一個類型

 

10.切換是否使用某一個類型

本來沒有 就加

a.classList.toggle('bigSize');

 

11.剛才透過js設定的樣式可以拿到

直接寫在屬性中的樣式可以拿到

寫在屬性中的樣式可以拿到表（Style標籤）中的樣式js拿不到

a.style.padding = '20px';

alert(a.style.padding);

 

12.取得計算之後（包含屬性中的，樣式表中的，js中修改的）的樣式

var aStyle = window.getComputedStyle(a,':after');🎜🎜alert(aStyle.border);🎜🎜🎜🎜