JS和DOM相關的操作

參考文章：https://blog.csdn.net/hj7jay/article/details/53389522

節點操作

查找節點

var mydiv = document.getElementById("mydiv");    //通過id查找
var mydiv = document.getElementsByClassName("mydiv");    //通過類名查找
var mydiv = document.getElementsByTagName("div");    //通過標籤名查找
var mydiv = document.getElementsByName("mydiv");    //通過元素的name屬性查找
var mydiv = document.querySelector("mydiv");    //返回指定選擇器的第一個元素
var mydiv = document.querySelectorAll("mydiv");    //返回指定選擇器的元素列表
var mydiv = document.forms;    //獲取當前頁面所有form

創建節點

//createElement
var elem = document.createElement("div");
elem.id = 'test';
elem.style = 'color: red';
elem.innerHTML = '我是新創建的節點';
document.body.appendChild(elem);

//createTextNode 創建文本節點
var node = document.createTextNode("我是文本節點");
document.body.appendChild(node);

還有一種文檔碎片，當我們需要創建許多節點的時候，可以先把節點都存放在文檔碎片中，最後再把文檔碎片添加到對應節點上

<ul id="ul"></ul>
<script>
(function()
{
    var start = Date.now();
    var str = '', li;
    var ul = document.getElementById('ul');
    var fragment = document.createDocumentFragment();
    for(var i=0; i<10000; i++)
    {
        li = document.createElement('li');
        li.textContent = '第'+i+'個子節點';
        fragment.appendChild(li);
    }
    ul.appendChild(fragment);
})();
</script>

修改節點

//appendChild 將child節點添加到parent節點最後
parent.appendChild(child);

//insertBefore 在parentNode中，將newNode節點插入到refNode節點的前面
parentNode.insertBefore(newNode, refNode);

//removeChild 用於刪除指定的子節點並返回子節點
var deletedChild = parent.removeChild(node);
//deletedChild指向被刪除節點的引用，它仍然存在於內存中，可以對其進行下一步操作。
//另外，如果被刪除的節點不是其子節點，則將會報錯，所以一般這麼刪除
function removeNode(node){
    if(!node) return;
    if(node.parentNode) node.parentNode.removeChild(node);
}

//replaceChild 用於將一個節點替換另一個節點
parent.replaceChild(newChild, oldChild);

節點關係

DOM中的節點相互之間存在着各種各樣的關係，如父子關係，兄弟關係等

父關係API

• parentNode ：每個節點都有一個parentNode屬性，它表示元素的父節點。Element的父節點可能是Element，Document或DocumentFragment；
• parentElement ：返回元素的父元素節點，與parentNode的區別在於，其父節點必須是一個Element元素，如果不是，則返回null；

子關係API

• children ：返回一個實時的 HTMLCollection ，子節點都是Element，IE9以下瀏覽器不支持；
• childNodes ：返回一個實時的 NodeList ，表示元素的子節點列表，注意子節點可能包含文本節點、註釋節點等；
• firstChild ：返回第一個子節點，不存在返回null，與之相對應的還有一個 firstElementChild ；
• lastChild ：返回最後一個子節點，不存在返回null，與之相對應的還有一個 lastElementChild ；

兄弟關係型API

• previousSibling ：節點的前一個節點，如果不存在則返回null。注意有可能拿到的節點是文本節點或註釋節點，與預期的不符，要進行處理一下。
• nextSibling ：節點的後一個節點，如果不存在則返回null。注意有可能拿到的節點是文本節點，與預期的不符，要進行處理一下。
• previousElementSibling ：返回前一個元素節點，前一個節點必須是Element，注意IE9以下瀏覽器不支持。
• nextElementSibling ：返回後一個元素節點，後一個節點必須是Element，注意IE9以下瀏覽器不支持。

元素屬性

//setAttribute 設置元素屬性
element.setAttribute(name, value);

//getAttribute 返回指定的特性名相應的特性值，如果不存在，則返回nul
var value = element.getAttribute("class");

//removeAttribute 用於徹底刪除元素特性  IE6以前不支持
div.removeAttribute('class')

元素樣式

直接修改元素的樣式

elem.style.color = 'red';
elem.style.setProperty('font-size', '16px');
elem.style.removeProperty('color');

動態添加樣式規則

var style = document.createElement('style');
style.innerHTML = 'body{color:red} #top:hover{background-color: red;color: white;}';
document.head.appendChild(style);