常見的DOM操作

1 offsetParent

offsetParent 作用：找到最近的有定位的（不能為stactic）父級，它會一層一層的往外找，如果沒有找到的話，預設為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 可以獲取元素盒模型的相關資訊，然後返回一個由這些資料組成的一個物件。
物件中的內容： width height top bottom left right
語法：

元素.getBoundingClientRect()

返回值：
返回一個物件，這個物件中存在了元素的盒模型的相關資訊。

注意：

• 得到的width，是包含邊框的。
• 得到的height，是包含邊框的。
• 得到的left，是元素左邊到左邊可視區的距離。
• 得到的right，是元素右邊到左邊可視區的距離。
• 得到的top，是元素上邊到上邊可視區的距離。
• 得到的bottom，是元素下邊到上邊可視區的距離。

var box=document.getElementById("box");
var boxMessage=box.getBoundingClientRect();
console.dir(boxMessage);
console.log(boxMessage.width);  //102
console.log(boxMessage.left);   //200   左邊離可視區的距離
console.log(boxMessage.right);  //302   右邊離左邊可視區的距離
console.log(boxMessage.top);    //100
console.log(boxMessage.bottom); //202

firefox瀏覽器下會出現小數

5.DOM屬性操作

5.1 getAttribute

作用：獲取屬性，它不但可以獲取標籤自帶的屬性，也可以獲取自定義的屬性。（使用 . 或者 [] 獲取自定義屬性會返回 undefined）

語法：

元素.getAttribute()

引數：要獲取的屬性名
返回值： 返回獲取的結果。
使用 getAttribute 獲取 src，href 等屬性的值，屬性裡寫的是什麼內容就會獲取到什麼內容。

<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 作用： 設定屬性。可以設定自定義屬性，也可以設定標籤自帶的屬性。

語法：

元素.setAttribute(attr,value)

引數：
attr：要設定的屬性名
value： 要設定的屬性值

返回值： 無

<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)

引數：
要刪除的屬性名

返回值： 無

<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.可視區域的寬高

可視區域的寬:

document.documentElement.clientWidth

可視區域的高：

document.documentElement.clientHeight

如果視窗改變，這兩個值也會改變
使用上面方法獲取的可視區域寬高不包括滾動條

8 建立元素 createElement

createElement 作用：建立元素，根據引數的名字建立對應的標籤。

語法：

document.createElement(tagName)

只有document才有這個方法

引數：
tagName：需要建立的元素的標籤名字

返回值：返回建立的新元素值。

var div=document.createElement('div');
div.id='box';
div.style.background='red';
div.innerHTML='這是一個div'
console.log(div)

建立後可以給它新增屬性樣式等。
它不能建立文字，註釋節點。

9 新增元素 appendChild

appendChild 作用：新增元素：往父元素裡新增相應的子節點。

語法：

父元素.appendChild(chileNode)

引數：
要新增的元素（只能是一個標籤節點）

返回值：
返回要新增的那個元素（引數），只能新增標籤節點。

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);    //返回傳進來的引數

10 插入元素 insertBefore

insertBefore 作用： 插入元素：把第一個節點插入到第二個節點前面。

語法:

父節點.insertBefore(childNode1,childNode2)

引數：
childNode1 要插入的節點
childNode2 決定插入的節點位置的節點
第二個引數為null的話，相當於 appendChild 把引數1的節點新增到父節點的最後。

<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='我是要插入的內容';
var result=list.insertBefore(li,lis[6]);
console.log(result);    //返回第一個引數

11 刪除節點 removeChild

removeChild 作用： 刪除節點

語法：

元素.removeChild(childNodes)

引數：
要刪除的子節點（只能為單個節點）

返回值：
被刪除的元素（引數）

注意：這個方法可以刪除文字節點和註釋節點

var color=document.getElementById("color");
var lis=document.querySelectorAll("#color li");

var result=color.removeChild(lis[lis.length-1]);
console.log(result);    //返回被刪除的那個

12 替換節點replaceChild

replaceChild 作用:替換節點： 用節點1替換節點2
語法：

父節點.replaceChild(node，childNode)

引數：
node 替換成的節點
childNode 被替換的節點

注意：

• 兩個引數必須同時出現，不然會報錯
• 如果兩個引數有同一個父節點，那麼會把第二個刪除，並且把第一個的位置換到第二個節點的位置。

返回值：
返回被替換的那個元素（引數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);    //被替換的那個元素（引數2）

13 克隆節點 cloneNode

cloneNode 作用： 克隆節點

語法：

要被克隆的節點.cloneNode(Boolean)  

引數：
true 克隆元素和元素包含的子節點
false 只克隆元素，不包含它的子節點
注意

• 如果沒有引數，預設false
• 克隆的只有HTML CSS ，不克隆JS
• 如果克隆有ID的節點，克隆後的ID與被克隆的節點ID是一樣的，要注意修改。

返回值：
返回被克隆的節點

cloneNode 可以克隆文字節點和註釋

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); //不光有外層標籤，裡面的子節點都會被克隆
newDiv.setAttribute('id','div2');
                
console.log(newDiv);
box.appendChild(newDiv);

14 元素操作的特性

appendChild/insertBefore/replaceChild在操作一個已有的元素時， 是將已有的元素移動，而不是複製一份進行操作(剪下)

也就是說，元素在進行新增，插入，替換操作的時候，進行的是剪下操作

14 innerHTML與DOM方法的區別

• innerHTML方法天花內容後，它先是把原來的內容清空，然後再把新的內容新增進來。所以原來的事件會被刪除。
• DOM方法只是在原來的基礎上增加了一些元素，原來的事件還是存在的。

<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';     //當使用innerHTML新增元素時，給lis新增的舊的點選事件不會觸發
                
    color.appendChild(newColor);    //使用DOM方法新增元素時，，給lis新增的舊的點選事件還可以觸發
</script>

15 getElementsByTagName 和 querySelectorAll

getElementsByTagName :

• 動態獲取元素
• 一旦獲取的元素有變化，那它就會重新獲取一下，原來的索引就會變成新獲取的

querySelectorAll :

• 不會動態獲取元素
• 只獲取一次，每個元素對應的下標是不會變的，即使元素有變化，它也不會重新再去獲取，原來的下標不會變