JavaScript基礎之DOM操作

貓董發表於2018-11-11
JavaScript

DOM的結構

  • Document節點
  • 標籤節點，或者叫元素節點
  • 文位元組點

DOM節點元素的獲取

  1. var a = document.getElementByID("div1"); 由於ID的唯一性，返回值是DOM元素本身，只用於document。
  2. var b = div1.getElementsByClassName("p2");獲取的是一個陣列，不僅可以用於document 也可以用域父級元素。
  3. var c = div1.getElementsByTagName("div"); 同上。
  4. 還有一些其他的方法如：getElementsByAttribute( attrib, value ):等

DOM節點的建立，新增與刪除

  1. var div1 = document.createElement("div");建立div 節點；
  2. div0.appendChild(div1); 把div1新增到div0裡面；
  3. div0.removeChild(div1); 把div1從div0裡面刪除掉； div1.parentNode.removeChild(div1);在不獲取父級元素的情況下刪除節點；
  4. var pTxt = document.createTextNode("content");建立文位元組點；div1.appendChild(pTxt);新增文位元組點；

DOM元素的修改

  1. 屬性的修改：
    • html自帶的屬性直接用"."獲取：img1.id, img1.src等；但是有兩個特例需要注意：
      1. 獲取修改class屬性，由於class 是js的關鍵字：img1.className = "container";
      2. style屬性可以層疊，如：img1.style.width = "100px"; img1.style.color = "red";
    • 自定義的屬性：
      1. 獲取：img1.getAttribute("屬性名");
      2. 新增和設定：img1.setAttribute("屬性名","屬性值");
      3. 刪除：img1.removeAttribute("屬性名");
  2. 內容的修改：
    • p1.innerHTML = "內容"; 支援HTML格式，可以含有HTML標籤，並可以被識別；
    • p1.textContent = "內容"; 文字格式
    • p1.innerText = "內容"; 文字格式 （區別是會觸發重排？）

相關文章