第三章 JavaScript操作Dom對象

標籤：ima   設定   cli   遍曆   節點   添加   部分   getc   des   

 

常用的方法：

1.訪問節點: 通過Document.getElementByXXX()獲得一個指定節點-->再通過以下屬性節點訪問節點:
第一部分:節點屬性
a:parentNode 返回節點的父節點
b:childNodes 返回子節點集合,可以for迴圈遍曆
c:firstChild 返回節點的第一個子節點, 空白內容算第一個文本節點
d:lastChile 返回最後一個子節點 同上
e:nextSibling 返回下一個節點 空白內容算第一個文本節點
f:previousSibling 返回上一個節點 同上

第二部分:元素屬性
a:firstElementChild 第一個是元素的子節點,避開空節點
b:lastElementChild 最後一個是元素的子節點,避開空節點
c:nextElementSibling 下一個是元素的弟節點,避開空節點
d:previousElementSibling 上一個是元素的兄節點,避開空節點

第三部分:動作節點的屬性
a:getAttribute("屬性名稱字") 獲得屬性的值
b:setAttribute("屬性名稱字","屬性值") 用來設定屬性的值

節點分很多種:常規: 標籤節點 屬性節點 文本節點
nodeType 1 2 3
nodeName 標籤名 屬性名稱 #text
nodeValue null 屬性值 常值內容
對應的: Element Attribute Text

考慮瀏覽器安全色 用 || 例如:var node=node.firstChild || node.firstElementChild;

2.建立和訪問節點
a:createElement(TagName) 建立一個節點
b:FatherNode.append(ChildNode) 添加子節點到父節點的末尾
c:insertBefore(A,B) 將A節點添加到B節點之前
d:cloneNode(Node) 複製指定的節點,返回新節點

3.刪除和替換節點
a:removeChild(TagName) 操作刪除某個父節點的指定子節點
b:replaceChild(newChild,oldChild) 替換某個父節點的指定子節點為新的子節點

4.動作節點樣式
a:擷取並修改 style屬性 例: 擷取節點 .style.color="red"; 說明:擷取的是內部樣式的style屬性
b:擷取並修改 className屬性 例: 擷取節點 .className="myClass";
c:擷取外部樣式style屬性
文法:元素.currentStyle.樣式屬性; IE瀏覽器支援
文法:document.defaultView.getComputedStyle(元素,null).屬性; 非IE瀏覽器支援

5.擷取元素位置 一般是唯讀屬性
參考:http://www.w3school.com.cn/jsref/dom_obj_all.asp
例子:document.offsetHeight 擷取元素的高度
注意:相容性問題,獲得捲軸時:document.documentElement.scrollTop || document.body.scrollTop

6.補充：
onclick事件除了直接放在 input標籤內 還可以 : 事件來源.onclick=function(){JS代碼};
捲軸事件 window.onScroll = function(){};

 

 

尋找元素

間接尋找

 

 

操作元素

 

 

 

 

事件列表：

 

第三章 JavaScript操作Dom對象