[Javascript] DOM

Document Object Model 文檔對象模型

(1) 查找

 document.getElementById()  元素Id的屬性值
 document.getElementByTagName() 元素標籤 
 得到的內容是一個數組的形式
 document.getELementByName() 元素name的屬性值


 getAttribute(屬性名)//getAttribute("id")
 setAttribute(屬性名, 值)//setAttribute("id","jessica")
 removeAttribute(屬性名)


 tagName   獲取標籤名
 innerHTML 獲取文本內容
 eg:
 <div>jessica</div>
    document.getElementById("A").tagName;//DIV
    document.getElementById("A").innerHTML;//jessica

(2) 創建

 document.creatElement();
 document.creatTextNode(); 創建文本節點
 document.createDocumentFragment(); 創建一個DOM片段

(3) 增刪改

增：

 appendChild() 子節點的尾部
 parent.insertBefore(pre,next)

刪除：

 removeChild()

替換：

 replaceChild()

複製節點：

 cloneChild()

(4) 節點關係

  childNodes 所有子節點
  firstChild
  lastChild

  parentNode

  previousSibling 同級 前一節點
  nextSibling

  attributes 節點的所有屬性集合

---

Example:

<div id="wrapper">

    <div class="section">
      <label class="label" for="ac-gf-directory-column-section-state-responsibility">
          <h3>Apple</h3> 
      </label>
      <a href="#" class="a" name="jessica"> 
          <span name="jessica">Open</span> 
      </a>

      <ul class="ul">
        <li id="li">Enovironment</li>
        <li>Responsibility</li>
        <li>accessibility</li>
        <li>Privacy</li>
      </ul>
    </div>

</div>

<script type="text/javascript">
    console.log("(1) getElementById:");
    var li=document.getElementById("li");
    console.log(li);

    console.log("\n(2)getElementsByTagName:");
    var ul=document.getElementsByTagName("ul");
    console.log(ul);
    console.log(ul[0]);

    console.log("\n(3)getElementsByName:");
    var a=document.getElementsByName("jessica");
    console.log(a);
    console.log(a[0]);

    console.log("\n(4)getAttribute():");
    var getclass=a[0].getAttribute("class");
    console.log(getclass);

    console.log("\n(5)setAttribute():");
    var setid=li.setAttribute("id","JESSICAKRYSTAL");
    console.log(li);

    console.log("\n(6)innerHTML:");
    console.log(li.innerHTML);

</script>

---

<script type="text/javascript">
    console.log("(1) childNodes:");
    var a=document.getElementById("attributea");
    console.log(a.childNodes);

    console.log("(2) previousSibling:");
    console.log(a.previousSibling);

    console.log("(3) parentNode:");
    console.log(a.parentNode);
</script>

---

<div id="wrapper">
  <p>jessica krystal</p>
  <span>TV Show</span>
</div>

<script type="text/javascript">
var w=document.getElementById("wrapper");
var element=
document.createElement("strong");
element.innerHTML="jessica";
//放到wrapper子節點的最後面
w.appendChild(element);
</script>

var body=
document.getElementsByTagName("body")[0];
body.insertBefore(element,w);

---