DOM節點操做

學習總結：

獲取節點

咱們有三種方式找到一個dom節點：

• 經過id

var d1 = document.getElementById('div1'); // 返回一個節點對象
複製代碼

• 經過標籤名

var d2 = document.getElementByTagName('div'); // 返回節點數組
複製代碼

• 經過class名

var d3 = document.getElementByClassName('nav'); // 返回節點數組
複製代碼

此外，後面兩種方式還能夠不經過document拿到：

var d2 = d1.getElementByTagName('div');
var d3 = d1.getElementByClassName('nav');
複製代碼

也就是說，getElementByTagName和getElementByClassName方法能夠在任何的節點上使用（上例從d1的子節點查找，不包括d1自己），可是getElementById方法只能在document對象使用。

建立節點，添加節點，刪除節點

var d = document.getElementById('div1');

var p = document.createElement('p'); // 建立一個p節點
var pText = document.createTextNode('這是p標籤的內容'); // 建立文本節點

p.appendChild(pText); // 把文本塞到p標籤裏面
d.appendChild(p); // 把p標籤塞到d，成爲d的子節點

d.removeChild(p); // 經過父節點把p節點刪除
p.parentNode.removeChild(p); // 同上，經過父節點把p節點刪除
複製代碼

操做節點

var img1 = document.getElementById('img1');
img1.src = 'test.png'; // 換了圖片
img1.className = 'test_class'; // 換了class名稱，class屬性例外，是js保留關鍵字
img1.style.width = '100px'; // 換了樣式
img1.getAttribute('dat'); // 獲取自定義屬性或者通用屬性
img1.setAttribute('dat','8'); // 修改屬性值，沒有則添加並設置了一個屬性
img1.removeAttribute('dat'); //刪除屬性

var p = document.getElementById('p1');
p.innerHTML = "這是p裏面的內容 <a href = 'www.baidu.com'>this is a tag</a>";
p.textContent = '純文本，即便放了標籤也不會生效，會看成文本處理';
複製代碼