DOM文檔對象模型(Document object model)

• 網頁被加載是瀏覽器都會自動創建DOM如下：

  
  
  Screenshot from 2017-05-31 23-19-00.png

Javascript DOM的主要用途

• JavaScript DOM能夠改變頁面中的所有 HTML 元素
• JavaScript DOM能夠改變頁面中的所有 HTML 屬性
• JavaScript DOM能夠改變頁面中的所有 CSS 樣式
• JavaScript DOM能夠對頁面中的所有事件做出反應

改變頁面中的HTML元素

• 查找HTML元素

eg:同下

改變元素

• 通過appendchild方法

  • 添加節點
    <div id="div1">
    <p>**************</p>
    </div>
    <div id="div2">
    <a href="http:www.baidu.com">百度</a>
    
    <input type="text" placeholder="請輸入文本">
    <input type="button" value="提交" onclick="test()">
    </div>
    <script >
    function test() {
    var element=document.getElementById("div1");
    var inner_div=document.createElement("div");//創建元素節點
    var inner_text=document.createTextNode("#######");//創建文本節點
    inner_div.appendChild(inner_text)
    element.appendChild(inner_div);
    }
    </script>

  • 刪除節點

    function test() {
    var element=document.getElementById("div1");
    alert(1);
        p_node=document.getElementsByTagName("p");
        element.removeChild(p_node[0]);
    }
    

  <b>需要注意的是除過通過查找之外其它函數返回的都是一個數組，不可一根筋的直接搞</b>
• 通過innerHTML方法

  • 修改HTML屬性

       function test() {
        var node=document.getElementsByTagName("input");
        node[0].type="radio";
           }
    

  *修改修改HTML內容
  function test() {
  var node=document.getElementById("div1");
  node.innerHTML="<i>帥</i>"
  }
• 修改CSS屬性
  function test() {
  var node=document.getElementById("div1");
  node.style.backgroundColor="red";
  }
• 事件監聽請見下一篇博客