一份友好的DOM元素操作指南

前言

看文章前先了解一些概念

1.DOM： DOM是針對XML和HTML的API，它描繪了一個層次化的節點（12種節點，都繼承於Node類型）樹，並允許程序員操作、增加、刪除節點

2.節點： DOM中有12種節點

3.元素： 元素是12種節點類型中的 ELEMENT_NODE 類型，也就是我們的HTML標籤，我們操作DOM一般就是在操作這個類型的節點

一. 獲取元素

//參數爲css的任何選擇器，選取匹配的第一個元素
var ele = document.querySelector(".myclass");
//根據自定義屬性獲取節點的寫法，選取匹配的第一個元素
var ele = document.querySelector("div[data-id='value']");
//參數爲css的任何選擇器，選取匹配的所有元素
var eles = document.querySelectorAll("div.title, div.context");

    
//根據id屬性獲取元素，因爲一個網頁不能有重複的id，所以只返回一個
var ele = document.getElementById('id');
//根據name屬性獲取元素，返回所有匹配的元素
var eles = document.getElementsByName('name');
//根據class屬性獲取元素，返回所有匹配的元素
var eles = document.getElementsByClassName('className');
//根據標籤名獲取元素，返回所有匹配的元素
var eles = document.getElementsByTagName('tagName');


//查詢子元素，先獲取父元素，然後用父元素調用查找元素的方法
var eles = ele.getElementsByClassName('className');
var eles = ele.getElementsByTagName('tagName');


//獲取當前節點的子節點(包括所有類型的節點)，可以通過nodeType來判斷
var nodes = ele.childNodes;
//獲取當前元素的子元素
var nodes = ele.children;

//獲取當前元素的第一個子元素
var ele = ele.firstElementChild;
//獲取當前元素的最後一個子元素
var ele = ele.lastElementChild;


//獲取當前元素的下一個元素
var ele = ele.nextElementSibling;
//獲取當前元素的上一個元素
var ele = ele.previousElementSibling;


//下面兩種獲取父節點/父元素的作用是相同的，唯一的區別就是獲取到最頂部，也就是document時，
//parentElement會報null的錯，而parentNode不會，因爲document是DOCUMENT_NODE節點，而不是ELEMENT_NODE節點
//獲取父元素
var parent = ele.parentElement;
//獲取父節點
var parent = ele.parentNode;

二. 添加元素、刪除元素

//在元素最後插入新元素，如果新元素已存在文檔中，則會刪除原來的元素，並添加到末尾
ele.appendChild(newEle);
//移除子元素
ele.removeChild(childEle);
//替換子元素
ele.replaceChild(newElement, oldElement);
//插入指定子元素前插入新的子元素
parentElement.insertBefore(newElement, targetElement);

三. 創建元素

var ele = document.createElement('div');
var node = document.createTextNode('光頭纔是最強！');

四. 元素屬性操作

//獲取元素的所有屬性與值
var attrs = ele.attributes;

//獲取元素的指定屬性的值，返回字符串，沒有則返回null
var attrStr = ele.getAttribute('class');
//設置屬性，這種方法會覆蓋之前的參數所指的屬性值
ele.setAttribute('class', 'new_class');
//添加新類名，不會覆蓋之前的類名
ele.classList.add('new_class');

//判斷元素是否有設置屬性，有任何一種都返回true
ele.hasAttributes();
//判斷元素是否設置了參數所指的屬性
ele.hasAttribute('class');
//判斷元素是否包含該類名
ele.classList.contains('class_value');

//移除參數所指的屬性
ele.removeAttribute('class');
//移除指定類名
ele.classList.remove('class_value');

//獲取元素的樣式，返回一個存有元素所有css屬性的對象，只有行內樣式才能獲取到值
ele.style
//設置單個style屬性
ele.style.fontSize = "60px";
//設置多個屬性
ele.style.cssText = "height: 100px;width:100px;";