Element:
父子元素節(jié)點屬性:
- childElementCount:返回子元素節(jié)點的個數(shù)
- children:返回當前元素的子元素節(jié)點的集合
- firstElementChild:返回第一個子元素節(jié)點
- lastElementChild:返回最后一個子元素節(jié)點
- nextElementSibling:返回同級的下一個元素節(jié)點
- previousElementSibling:返回同級的前一個元素節(jié)點
獲取當前元素節(jié)點的相關屬性
- 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.classNameelement.className = 'class01 class02 class03'
- id:獲取或設置元素的id屬性的值
- name:獲取或設置元素的name屬性的值,例如input元素的name值
- tagName:獲取當前元素的標簽名
- innerHTML:獲取或者設置當前元素的內部內容,用此方法修改元素內部的子節(jié)點
- innerText:獲取或者修改當前元素內部的文本內容(排除了html元素)
- outerHTML: 獲取或者設置當前元素的內部內容(包括該節(jié)點)
其他的屬性
clientHeight:元素內部高度(content+padding的高度,但不包括水平滾動條的高度)
scrollHeight:和clientHeight相似,包括overflow樣式屬性導致的視圖中不可見內容
clientWidth
scrollWidth
scrollTop: 元素垂直方向上滾動的距離(當一個元素的容器沒有產生垂直方向的滾動條,那它的 scrollTop 的值默認為0)
scrollLeft: 元素水平方向上的滾動距離(當一個元素的容器沒有產生水平方向的滾動條,那它的 scrollTop 的值默認為0.)
style: 修改當前元素節(jié)點的css樣式
document.body.style.background = "green";
常用方法:
- 在其子元素節(jié)點中查找對應的元素節(jié)點:
- getElement....():
- querySelector...():
- append():在其字節(jié)點的末尾添加新的節(jié)點(不一定是元素節(jié)點) 不推薦使用!!!
document.body.append("abcdefg"); // 插入文本節(jié)點
- getAttribute():返回(參數(shù)中)指定的屬性值
- hasAttribute():判斷是否有(參數(shù)中)指定的屬性值
- removeAttribute():移除(參數(shù)中)指定的屬性
- setAttribute():添加新屬性或修改原有屬性
HtmlNode.setAttribute('name','xin');
- Element可以調用Node的方法和屬性,但是Node不可以調用Element的方法和屬性
Node
父子節(jié)點屬性
- childNodes:返回所有子節(jié)點集合(不一定都是元素節(jié)點)
- firstChild:返回第一個子節(jié)點(不一定是元素節(jié)點)
- lastChild:返回最后一個子節(jié)點(不一定是元素節(jié)點)
- parentNode: 返回父節(jié)點
- nextSibling:返回當前節(jié)點的下一個節(jié)點(不一定是元素節(jié)點)
- previousSibling:返回當前節(jié)點的上一個節(jié)點(不一定是元素節(jié)點)
- children:返回 子元素節(jié)點 的集合
- parentElement:返回 夫元素節(jié)點
其他屬性
- innerText:返回其節(jié)點和子節(jié)點所包含的文字
- nodeName:返回節(jié)點名稱
- nodeType:返回節(jié)點類型(返回節(jié)點名稱對應的數(shù)字表示)
- nodeValue:返回節(jié)點的值
方法
- appendChild()
- insertBefore()
- removeChild(): 移除指定子節(jié)點,并返回該子節(jié)點
- replaceChild(newChild, oldChild):替換指定的子節(jié)點,并返回被替換的子節(jié)點
- cloneNode()
- contains(node): 判斷傳入的節(jié)點是否是當前節(jié)點的子節(jié)點
- hasChildNodes():判斷當前節(jié)點是否有子節(jié)點
