前端之dom操作

1.HTML DOM(文檔對象類型)

Document Object Mode

2.HTML DOM 樹

3.取dom節點

• document.getElementById(“id名”);

  根據Id選擇dom，唯一

• document.getElementsByClass(“class名”);

  根據class選擇dom，不唯一

• document.getElementsByTagName(“标簽名”);

  根據tag選擇dom，不唯一

• document.getElementsByName(“name 屬性名")

  根據name屬性選擇dom，不唯一

  注意：頁面的body節點可以直接用document.body來取

  4.如何取

• 父節點.childNodes;

  即取出所有子節點

• 父節點.children[0];

  即取出第一個子節點

• 子節點.parentNode;

  即取出父節點

• 子節點.parentNode.children[1];

  即取出兄弟節點，先取父節點再取子節點

  補充：通過父節點來建立子節點

• 父節點.insertBefore(子節點1,子節點2);

  子節點1：需要建立的新子節點

  子節點2：選擇一個子節點，新建立的子節點1将會放到該節點之前,如果沒有就用null

• 父節點.appendChild(子節點);

  在父節點末尾追加一個新的子節點

  var divEle = document.createElement(“div”);

  /先建立一個元素賦給divEle/

  document.body.insertBefore(divEle,container);

  /然後在body裡面插入，并且插入的元素放在container節點之前,并且選擇的元素具有唯一性，不能有多個/

  5.删除dom節點

  通過父節點來删除子節點

  父節點.removeChild(子節點);

  6.修改dom節點

  container.innerText = “這是被插入的文本内容，這是一個連結”;

  testDiv[0].innerHTML = “這是被插入的html内容，這是一個連結”;

  運作結果：

  

  注意：不要使用在文檔加載之後使用 document.write()

  innerText和innerHTML重複插入原來内容均會被覆寫