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對象