document.documentelement //
document.head //
document.body //
①父子關係：
節點.parentnode 獲得當前節點的父節點
父節點.childnodes 獲得當前父節點下所有直接子節點的集合（簡稱集合）
父節點.firstchild 獲得當前父節點下第乙個直接子節點
父節點.lastchild 獲得當前父節點下的最後乙個子節點
②兄弟關係：
節點.previoussibling 獲得平級的前乙個相鄰的兄弟節點
節點.nextsibling 獲得平級的下乙個相鄰的兄弟節點
問題：找到的內容也包含看不見的換行和空字元，干擾查詢
（2）元素樹：僅包含元素節點的樹結構。（在節點樹中新增了僅指向元素節點的新屬性而形成的子樹結構）
①父子關係：
元素.parentelement 獲得當前元素的父元素（也可用parentnode）
父元素.children 獲得當前父元素下的所有直接子元素的集合
父元素.firstelementchild 獲得父元素的第乙個直接子元素
父元素.lastelementchild 獲得父元素的最後乙個直接子元素
②兄弟關係：
元素.previouselementsibling 獲得平級的前乙個兄弟元素
元素.nextelementsibling 獲得平級的下乙個兄弟元素
這裡就涉及到乙個筆試題：
定義乙個函式，遍歷乙個指定的父元素下的所有後代元素
（1）按id屬性查詢：
var 元素=document.getelementbyid(「id」);
找到返回元素物件；找不到返回null
（2）按標籤名查詢：
var 集合=父元素.getelementsbytagname(「標籤名」)
找到返回多個元素組成的集合；找不到返回空集合:.length=0
注意：
（3）按class屬性查詢
var 集合=父元素.getelementsbyclassname(「類名」);
找到返回多個元素組成的集合；找不到返回空集合:.length=0
注意：a 可限制在任意父元素內查詢，減少查詢範圍。
b 不僅查詢直接子元素，且在所有後代中查詢。
c 如果乙個元素同時被多個class修飾，則使用其中乙個class，就可找到該元素。無需所有class都滿足
(4) 按name屬性查詢
var 集合=document.getelementsbyname(「name名」);
找到返回多個元素組成的集合；找不到返回空集合:.length=0
注意：只能用document呼叫，不能用隨意乙個父元素呼叫
常用在表單中查詢表單元素時。
1 只查詢乙個符合條件的元素：
var 集合=父元素.queryselectorall(「任意複雜選擇器」)
找到返回多個元素組成的集合；找不到返回空集合:.length=0
總結:不需要查詢就可直接獲得:
document.documentelement
document.head
document.body
按節點間關係查詢:
父子關係;
元素.parentnode
父元素.children
元素.firstelementchild
元素.lastelementchild
兄弟關係:
元素.previouselementsibling
元素.nextelementsibling
按html特徵查詢：
var 元素=document.getelementbyid(「id」)
var 集合=父元素.getelementsbytagname(「標籤名」)
var 集合=父元素.getelementsbyclassname(「class名」)
var 集合=document.getelementsbyname(「name名」)
按選擇器查詢:
var 元素=父元素.queryselector(「任意選擇器」)
var 集合=父元素.queryselectorall(「任意選擇器」)
dom優化之一:
如果只用乙個條件就可以找到想要的元素時
首選使用getelementsby***()函式查詢——效率高
只有查詢條件複雜時，才選擇按選擇器查詢——效率低
dom 查詢元素節點
var div document.getelementsbytagname div 0 查詢元素節點，方法會存在一些相容性問題，ie低版本瀏覽器不支援 console.log div.parentelement 父元素節點 console.log div.children 子元素節點 console...
DOM 常用查詢元素
1 不需要查詢就可直接獲得的元素物件 4種 document.documentelement document.head document.body document.forms i 2 如果已經獲得乙個元素物件，找周圍附近的元素物件時，就用按節點間關係查詢 2大類關係，6個屬性.a.父子關係 4種...
操作dom元素（3）
class 標籤名 name 選擇器 queryselectorall 查屬性 點語法獲取元素的特點 attribute 獲取 設定 移除 查內容 textcontent innerhtml 增 innerhtml 新增 侷限性 document.createelement 新增步驟 2.設定標籤屬...