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);🎜🎜🎜🎜
