1 offsetParent
offsetParent 作用：找到最近的有定位的（不能為stactic）父級，它會一層一層的往外找，如果沒有找到的話，默認(rèn)為body茫死。
父級必須為絕對定位或者相對定位，自己有沒有定位無所謂履羞。
語法：
元素.offsetParent
<div id="box1"style="position: relative">1
<div id="box2">2
<div id="box3" style="position: absolute">3
<div id="box4">4</div>
</div>
</div>
</div>
<script>
var box4=document.getElementById("box4");
var box2=document.getElementById("box2");
console.log(box2.offsetParent); //box1
console.log(box4.offsetParent); //box3
</script>
2. offsetLeft
offsetLeft 作用： 找到最近的有定位的父級峦萎，獲取到它與這個父級的距離。
從元素最左邊到父級最左邊的距離吧雹。
注意：如果沒找到有定位的父級骨杂，那這是到html的距離
語法：
元素.offsetLeft
注意：使用DOM方法獲取的距離，長寬是沒有單位的
console.log(box2.offsetLeft) //149
3.offsetTop
offsetTop 作用：找到最近的有定位的父級雄卷，獲取到它與這個父級的距離搓蚪。從元素頂部到父級的最頂部的距離。
注意：如果沒找到有定位的父級丁鹉，那這是到html的距離
語法：
元素.offsetTop
console.log(box2.offsetTop) //171
4. getBoundingClientRect
getBoundingClientRect 可以獲取元素盒模型的相關(guān)信息妒潭，然后返回一個由這些數(shù)據(jù)組成的一個對象。
對象中的內(nèi)容： width height top bottom left right
語法：
元素.getBoundingClientRect()
返回值：
返回一個對象揣钦，這個對象中存在了元素的盒模型的相關(guān)信息雳灾。
注意：
- 得到的width，是包含邊框的冯凹。
- 得到的height谎亩，是包含邊框的。
- 得到的left，是元素左邊到左邊可視區(qū)的距離匈庭。
- 得到的right夫凸，是元素右邊到左邊可視區(qū)的距離。
- 得到的top阱持，是元素上邊到上邊可視區(qū)的距離夭拌。
- 得到的bottom，是元素下邊到上邊可視區(qū)的距離衷咽。
var box=document.getElementById("box");
var boxMessage=box.getBoundingClientRect();
console.dir(boxMessage);
console.log(boxMessage.width); //102
console.log(boxMessage.left); //200 左邊離可視區(qū)的距離
console.log(boxMessage.right); //302 右邊離左邊可視區(qū)的距離
console.log(boxMessage.top); //100
console.log(boxMessage.bottom); //202
firefox瀏覽器下會出現(xiàn)小數(shù)
5.DOM屬性操作
5.1 getAttribute
作用：獲取屬性鸽扁，它不但可以獲取標(biāo)簽自帶的屬性，也可以獲取自定義的屬性镶骗。（使用 . 或者 [] 獲取自定義屬性會返回 undefined）
語法：
元素.getAttribute()
參數(shù)：要獲取的屬性名
返回值： 返回獲取的結(jié)果桶现。
使用 getAttribute 獲取 src，href 等屬性的值卖词，屬性里寫的是什么內(nèi)容就會獲取到什么內(nèi)容巩那。
<img id="img" src="img/1.jpg">
<div id="box" miaoV="kaivon"></div>
<script>
var img=document.getElementById("img");
var box=document.getElementById("box");
console.log(img.src) //"http://localhost:63342/M-project/5.31/2016-05-31/img/1.jpg"
console.log(box.miaov) //undeifined
console.log(img.getAttribute("src")) //img/1.jpg
conosle.log(box.getAttribute("miaoV")) //kaivon
</script>
5.2 setAttribute
setAtteibute 作用： 設(shè)置屬性吏夯〈蓑冢可以設(shè)置自定義屬性，也可以設(shè)置標(biāo)簽自帶的屬性噪生。
語法：
元素.setAttribute(attr,value)
參數(shù)：
attr：要設(shè)置的屬性名
value： 要設(shè)置的屬性值
返回值： 無
<div>一個容器</div>
<script>
var box = document.querySelect("div");
var a = box.setAttribute("id","box");
console.log(a); //undefined
</script>
5.3 removeAttribute
removeAttribute 作用：刪除元素的屬性裆赵。
語法：
元素. removeAttribute(attr)
參數(shù)：
要刪除的屬性名
返回值： 無
<div title="box">一個容器</div>
<script>
var box = document.querySelect("div");
var a = box.removeAttribute("title");
console.log(a); //undefined
</script>
6 元素的寬高
6.1 元素的寬
offsetWidth 作用：獲得元素的寬，包含border的值跺嗽。
clientWidth 作用：獲取元素的寬战授，不包含border的值。
語法：
元素.offsetWidth
元素.clientWidth
6.2 元素的高
offsetHeight 作用：獲取元素的高桨嫁，包含border的值
clientHetght 作用：獲取元素的高植兰，不包含border的值
語法：
元素.offsetHeight
元素.clientHeight
7.可視區(qū)域的寬高
可視區(qū)域的寬:
document.documentElement.clientWidth
可視區(qū)域的高：
document.documentElement.clientHeight
如果窗口改變，這兩個值也會改變
使用上面方法獲取的可視區(qū)域?qū)捀卟话L動條
8 創(chuàng)建元素 createElement
createElement 作用：創(chuàng)建元素璃吧，根據(jù)參數(shù)的名字創(chuàng)建對應(yīng)的標(biāo)簽楣导。
語法：
document.createElement(tagName)
只有document才有這個方法
參數(shù)：
tagName：需要創(chuàng)建的元素的標(biāo)簽名字
返回值：返回創(chuàng)建的新元素值。
var div=document.createElement('div');
div.id='box';
div.style.background='red';
div.innerHTML='這是一個div'
console.log(div)
創(chuàng)建后可以給它添加屬性樣式等。
它不能創(chuàng)建文本，注釋節(jié)點酒贬。
9 添加元素 appendChild
appendChild 作用：添加元素：往父元素里添加相應(yīng)的子節(jié)點级解。
語法：
父元素.appendChild(chileNode)
參數(shù)：
要添加的元素（只能是一個標(biāo)簽節(jié)點）
返回值：
返回要添加的那個元素（參數(shù)），只能添加標(biāo)簽節(jié)點窃祝。
var div=document.createElement('div');
div.innerHTML='這是個div';
div.style.color='red';
div.style.border='10px solid #ccc';
var result=document.body.appendChild(div);
console.log(result); //返回傳進來的參數(shù)
10 插入元素 insertBefore
insertBefore 作用： 插入元素：把第一個節(jié)點插入到第二個節(jié)點前面。
語法:
父節(jié)點.insertBefore(childNode1,childNode2)
參數(shù)：
childNode1 要插入的節(jié)點
childNode2 決定插入的節(jié)點位置的節(jié)點
第二個參數(shù)為null的話，相當(dāng)于 appendChild 把參數(shù)1的節(jié)點添加到父節(jié)點的最后呕缭。
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
var list=document.getElementById("list");
var lis=document.querySelectorAll("#list li");
var li=document.createElement('li');
li.innerHTML='我是要插入的內(nèi)容';
var result=list.insertBefore(li,lis[6]);
console.log(result); //返回第一個參數(shù)
11 刪除節(jié)點 removeChild
removeChild 作用： 刪除節(jié)點
語法：
元素.removeChild(childNodes)
參數(shù)：
要刪除的子節(jié)點（只能為單個節(jié)點）
返回值：
被刪除的元素（參數(shù)）
注意：這個方法可以刪除文本節(jié)點和注釋節(jié)點
var color=document.getElementById("color");
var lis=document.querySelectorAll("#color li");
var result=color.removeChild(lis[lis.length-1]);
console.log(result); //返回被刪除的那個
12 替換節(jié)點replaceChild
replaceChild 作用:替換節(jié)點： 用節(jié)點1替換節(jié)點2
語法：
父節(jié)點.replaceChild(node，childNode)
參數(shù)：
node 替換成的節(jié)點
childNode 被替換的節(jié)點
注意：
- 兩個參數(shù)必須同時出現(xiàn)，不然會報錯
- 如果兩個參數(shù)有同一個父節(jié)點恢总，那么會把第二個刪除落恼，并且把第一個的位置換到第二個節(jié)點的位置。
返回值：
返回被替換的那個元素（參數(shù)2）
var color=document.getElementById("color");
var lis=document.querySelectorAll("#color li");
var newColor=document.createElement('li');
newColor.innerHTML='white';
var result=color.replaceChild(lis[1],lis[3]);
console.log(result); //被替換的那個元素（參數(shù)2）
13 克隆節(jié)點 cloneNode
cloneNode 作用： 克隆節(jié)點
語法：
要被克隆的節(jié)點.cloneNode(Boolean)
參數(shù)：
true 克隆元素和元素包含的子節(jié)點
false 只克隆元素离熏，不包含它的子節(jié)點
注意
- 如果沒有參數(shù)佳谦，默認(rèn)
false - 克隆的只有HTML CSS ，不克隆JS
- 如果克隆有ID的節(jié)點滋戳，克隆后的ID與被克隆的節(jié)點ID是一樣的钻蔑，要注意修改。
返回值：
返回被克隆的節(jié)點
cloneNode 可以克隆文本節(jié)點和注釋
var box=document.getElementById("box");
var divs=box.children;
var spans=box.getElementsByTagName("span");
for(var i=0;i<spans.length;i++){
spans[i].onclick=function(){
alert(this.innerHTML);
};
}
var newDiv=divs[0].cloneNode(false);//只克隆外層div
var newDiv=divs[0].cloneNode(true); //不光有外層標(biāo)簽奸鸯，里面的子節(jié)點都會被克隆
newDiv.setAttribute('id','div2');
console.log(newDiv);
box.appendChild(newDiv);
14 元素操作的特性
appendChild/insertBefore/replaceChild在操作一個已有的元素時咪笑， 是將已有的元素移動，而不是復(fù)制一份進行操作(剪切)
也就是說娄涩，元素在進行添加窗怒，插入，替換操作的時候蓄拣，進行的是剪切操作
14 innerHTML與DOM方法的區(qū)別
- innerHTML方法天花內(nèi)容后扬虚，它先是把原來的內(nèi)容清空，然后再把新的內(nèi)容添加進來球恤。所以原來的事件會被刪除辜昵。
- DOM方法只是在原來的基礎(chǔ)上增加了一些元素，原來的事件還是存在的咽斧。
<ul id="color">
<li>red</li>
<li>green</li>
<li>blue</li>
<li>yellow</li>
<li>pink</li>
</ul>
<script>
var color=document.getElementById("color");
var lis=document.querySelectorAll("#color li");
for(var i=0;i<lis.length;i++){
lis[i].onclick=function(){
alert(this.innerHTML);
};
}
//color.innerHTML+='<li>white</li>';
var newColor=document.createElement('li');
newColor.innerHTML='white'; //當(dāng)使用innerHTML添加元素時堪置，給lis添加的舊的點擊事件不會觸發(fā)
color.appendChild(newColor); //使用DOM方法添加元素時，张惹，給lis添加的舊的點擊事件還可以觸發(fā)
</script>
15 getElementsByTagName 和 querySelectorAll
getElementsByTagName :
- 動態(tài)獲取元素
- 一旦獲取的元素有變化舀锨，那它就會重新獲取一下，原來的索引就會變成新獲取的
querySelectorAll :
- 不會動態(tài)獲取元素
- 只獲取一次宛逗，每個元素對應(yīng)的下標(biāo)是不會變的坎匿，即使元素有變化，它也不會重新再去獲取拧额，原來的下標(biāo)不會變
