DOM節點操作

NO IMAGE

學習總結:

獲取節點

我們有三種方式找到一個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 = '純文本,即使放了標籤也不會生效,會當作文本處理';

相關文章

MySQL5.7中自增id的小bug

html元素的分類和嵌套規則

我們也許並不瞭解Promise

dockerregistry私有倉庫的使用方法介紹