20170609-DOM相關屬性和方法

Element:

父子元素節點屬性:

• childElementCount:返回子元素節點的個數

• children:返回當前元素的子元素節點的集合

• firstElementChild:返回第一個子元素節點

• lastElementChild:返回最後一個子元素節點

• nextElementSibling:返回同級的下一個元素節點

• previousElementSibling:返回同級的前一個元素節點

• parentElement：返回父元素節點

獲取當前元素節點的相關屬性

• attributes:返回該元素全部屬性的一個實時集合,是一個 NamedNodeMap 對象

var attrs = element.attributes;
    for(var i=attrs.length-1; i>=0; i--) {
        output+= attrs[i].name + "->" + attrs[i].value;
    }

• classList:返回一個元素的類屬性的實時集合

  • classList.add(String[,String]):爲元素添加 類

  • classList.remove(String[,String]):爲元素移除 類

  • classList.item(number): 按集合中的索引返回類值

  • containes(String):判斷當前元素是否存在某一個 類

• className:獲取或者設置元素的class屬性的值

  • var class = element.className

  • element.className = 'class01 class02 class03'

• id:獲取或設置元素的id屬性的值

• name:獲取或設置元素的name屬性的值,例如input元素的name值

• tagName:獲取當前元素的標籤名

• innerHTML:獲取或者設置當前元素的內部內容,用此方法修改元素內部的子節點

• innerText:獲取或者修改當前元素內部的文本內容(排除了html元素)

• outerHTML: 獲取或者設置當前元素的內部內容(包括該節點)

其餘的屬性

• clientHeight:元素內部高度(content+padding的高度,但不包括水平滾動條的高度)

• scrollHeight:和clientHeight類似,包括overflow樣式屬性致使的視圖中不可見內容

• clientWidth

• scrollWidth

• scrollTop: 元素垂直方向上滾動的距離(當一個元素的容器沒有產生垂直方向的滾動條,那它的 scrollTop 的值默認爲0)

• scrollLeft: 元素水平方向上的滾動距離(當一個元素的容器沒有產生水平方向的滾動條,那它的 scrollTop 的值默認爲0.)

• style: 修改當前元素節點的css樣式

document.body.style.background = "green";

經常使用方法:

• 在其子元素節點中查找對應的元素節點:

  • getElement....():

  • querySelector...():

• append():在其字節點的末尾添加新的節點(不必定是元素節點) 不推薦使用!!!

document.body.append("abcdefg"); // 插入文本節點

• getAttribute():返回(參數中)指定的屬性值

• hasAttribute():判斷是否有(參數中)指定的屬性值

• removeAttribute():移除(參數中)指定的屬性

• setAttribute():添加新屬性或修改原有屬性

HtmlNode.setAttribute('name','xin');

• Element能夠調用Node的方法和屬性,可是Node不能夠調用Element的方法和屬性

Node

父子節點屬性

• childNodes:返回全部子節點集合(不必定都是元素節點)

• firstChild:返回第一個子節點(不必定是元素節點)

• lastChild:返回最後一個子節點(不必定是元素節點)

• parentNode: 返回父節點

• nextSibling:返回當前節點的下一個節點(不必定是元素節點)

• previousSibling:返回當前節點的上一個節點(不必定是元素節點)

• children:返回 子元素節點 的集合

• parentElement:返回 夫元素節點

其餘屬性

• innerText:返回其節點和子節點所包含的文字

• nodeName:返回節點名稱

• nodeType:返回節點類型(返回節點名稱對應的數字表示)

• nodeValue:返回節點的值

方法

• appendChild()

• insertBefore()

• removeChild(): 移除指定子節點,並返回該子節點

• replaceChild(newChild, oldChild):替換指定的子節點,並返回被替換的子節點

• cloneNode()

• contains(node): 判斷傳入的節點是不是當前節點的子節點

• hasChildNodes():判斷當前節點是否有子節點