Javascript:文件物件模型

標籤：ng-click   classname   節點   post   內容   back   文字   efi   previous   

使用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);

Javascript:文件物件模型