獲取 dom 元素的幾種方式
get 方式：
getelementbyid
getelementsbytagname
getelementsbyclassname
getelementsbyname
返回型別 htmlcollection
query 方式：
queryselector
queryselectorall
返回型別 nodelist
獲取 dom 元素的詳細介紹：
首先用兩種方式獲取元素
let a = document.getelementsbyclassname('title')
let b = document.queryselectorall('.title')
for(let key in a)
// dom
// ...（每個dom元素）
// length（集合長度）
// ƒ item()
// ƒ nameditem()
ƒ item()
可通過 a.item(index) 獲取 dom 元素，類似 a[index]
ƒ nameditem()
可通過 a.nameditem('popo') 獲取 name 屬性為 'popo' 的 dom 元素（若多個元素有相同的 name 屬性，返回第乙個）
for-of、for 迴圈可獲取每個 dom 元素：
for(let val of a)
// dom
// ...（每個dom元素）
for(let i = 0; i < a.length; i++)
// dom
// ...（每個dom元素）
foreach、for-of、for 迴圈的結果無差別
但 for-in 相比 get 方式 的 for-in，迴圈得出的結果稍有不同
for(let key in b)
// dom
// ...（每個dom元素）
// length（集合長度）
// ƒ item()
// ƒ entries()
// ƒ foreach()
// ƒ keys()
// ƒ values()
這說明，query 方式獲取的 dom 元素集合，可執行 object 對應的方法，但沒有 nameditem() 方法
es6 提供了 array.from() 方法可將這些集合轉換成普通陣列，這樣就可以享用陣列的各種方法了
let array = array.from(a)因為 childnodes 包含看不見的空格文字，還有注釋等內容，所以使用起來不是太方便
因此，js 又重新引入了元素樹的概念。這個在我們實際應用中，用的比較普遍
元素樹：僅僅包含元素節點的樹結構，不是一顆新樹，盡是節點數的子集
為元素新增了下面幾個屬性：
一般來說，區別元素節點，屬性節點，文字節點的通用方式是判斷該節點的 nodetype
常見的幾種 nodetype:
元素節點：1，
屬性節點：2，
文字節點：3，
注釋節點：8，
...假設 html 如下，要遍歷出 div 中的所有直接子級的元素節點:
hello
world
cookieparse()
let list = document.getelementbyid('list')
let child = list.firstchild
console.log(list.nextsibling)
while(child != list.lastchild)
child = child.nextsibling
}
let list = document.getelementbyid('list')
let child = list.firstelementchild
while(child)
深度優先遍歷：當同時有兄弟節點和子節點的時候，總是優先遍歷子節點
function getchildren(parent)
}getchildren(document.body)
利用forEach迴圈Dom元素
大家都知道foreach是迴圈陣列用的，而且很方便，可以丟掉for迴圈了，但是它不能迴圈dom元素。其實我們可以利用call來完成foreach迴圈dom 假設有這樣的html結構 點選上面的li來輸出自身的索引值，具體可看下面 var arrli document.queryselector bo...
python 迴圈遍歷字典元素
乙個簡單的for語句就能迴圈字典的所有鍵，就像處理序列一樣 in 1 d in 2 for key in d print key,corresponds to d key y corresponds to 2 x corresponds to 1 z corresponds to 3 在python...
DOM尺寸，DOM元素位置
dom尺寸 doctype html en utf 8 viewport content width device width,initial scale 1.0 document title utils.js script box style head box div 以乙個方向為例，每一種都有寬...