使用DOM樹 一、訪問元素 1、選擇單個元素節點 （1）getEelementById（） 使用元素的id屬性 （2）使用CSS選擇器，返回第一個匹配的元素 querySelector（） VarhotItem=document.querySelectorAll('li .hot"); 2、選擇多個 ...
使用DOM樹
一、訪問元素
1、選擇單個元素節點
（1）getEelementById（）
使用元素的id屬性
（2）使用CSS選擇器，返回第一個匹配的元素
querySelector（）
VarhotItem=document.querySelectorAll('li .hot");
2、選擇多個元素
(1)選擇所有在class屬性中使用了特定值的元素
getElementByClassName()
(2) 選擇所有使用了指定標記的元素
getElementByTagName()
(3)使用CSS選擇器來選擇所匹配的元素
querySelectorAll()
3、在元素節點的遍歷
(1)選擇當前元素節點的父節點
parentNode()
(2) 選擇DOM樹中的前一個或下一個兄弟節點
previousSibling/nextSibling
(3) 返回當前元素的第一個或 最後一個子節點
firstChild/lastChild
二、操作這些元素
1、訪問或更新文本節點
使用文本節點唯一的屬性nodeValue從元素中獲取文本
2、 操作html內容
（1）有一個屬性可以訪問子元素和文本內容
innerHTML
（2）另一種屬性僅訪問文本內容
textContent
（3）還有一些方法可以用來創建新的節點，將節點添加到樹中或從樹中移除節點
createElement()
createTextNode()
appendChild()
removeChild()
3、訪問或更新屬性值
（1）可以通過他們來獲取或更新class和id屬性
className/id
（2）第一個用來檢查屬性是否存在，第二個用來獲取屬性值，第三個用來更新屬性值，第四個用來移除屬性值
hasAttribute（）
getAttribute()
setAttribute()
removeAttribute()
三、NodeList:返回多個元素的DOM查詢
以下4個不同的DOM查詢，都返回一個NodeList
getElementsByTagName()
getElementsByTagName()
getElementsByClassName()
querySelectorAll()
四、迴圈遍歷NodeList
For(vari=0;i<hotItems.length;i++)
{
hotItems[i].className='cool';
}
遍歷DOM
parentNode
如果你從第一個<li>元素開始，那麼它的父節點是<ul>元素
previousSibling、nextSibling
這兩個屬性找到當前節點的前一個或後一個兄弟節點（如果存在的話)
firstChild、lastChild
這兩個屬性找到當前元素的第一個或最後一個子節點
五、前後兄弟節點
VarstartItem =document.getElementById('two');
VarprevItem=startItem.previousSibling;
VarnextItem =startItem.nextSibling;
prevItem.className='complete';
nextItem.className='cool';
六、第一個和最後一個字元
VarstartItem =document.getElementsByTagName('ul')[0];
VarfirstItem=startItem.firstChild;
VarlastItem=startItem.lastChild;
firstItem.setAttribute('class','complete');
lastItem.setAttribute('class','cool');
七、如何獲取/更新元素內容
文本節點
nodeValue:訪問節點文字 //使用nodeValue屬性時，必須在文本節點上操作，而不是在包含文本的元素節點上的操作
innerHTML:獲取、設置文本和標簽
textContent:僅獲取、設置文本
innerText:僅獲取、設置文本
八、使用DOM操作添加元素
VarnewE1=document.createElement('li');
VarnewText=document.createTextNode('quinoa');
newE1.appendChild(newsText);
Varposition =document.getElementsByTagName('ul')[0];
Position.appendChild(newE1);
九、使用DOM操作移除元素
VarremoveE1=document.getElementsByTagName('li')[3];
VarcontainerE1=removeE1.parentNode;
containerE1.removeChild(removeE1);
十、屬性節點
getAttribute():獲取屬性值
hasAttribute():檢查元素節點是否包含特定屬性
setAttribute():設置屬性值
removeAttribute():從元素節點移除屬性
className:獲取或設置class屬性的值
id:獲取或設置id屬性的值
十一、檢查一個屬性並獲取他的值
VarfirstItem=document.getElementById('one');
If(firstItem.hasAttribute('class')){
Var attr=firstItem.getAttribute('class');
Vare1=document.getElementById('scriptResults');
e1.innerHTML='<p>Thefirst item has a class name:"+attr+'</p>';
十二、創建屬性並更改其值
VarfirstItem= .getElementById('one');
firstItem.className='complete';
VarfourthItem=document.getElementsByTagName('li').item(3);
E12.setAttribute('class','cool');
十三、移除屬性
VarfirstItem =document.getElementById('one');
If(firsttIteem.hasAttribute('class'))
{
firstItem.removeAttribute('class');
}
十四、不同的事件類型
FunctioncheckUsername()
{…}
FunctiontipUsername()
{…}
Vare1=document.getElementById('username');
Vare1Msg=document.getElementById("feedback');
E1.addEventListener('focus',tipUsername,false);
E1.addEventListener('blur'-,checkUsername,false);
