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