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

• 網(wǎng)頁(yè)被加載是瀏覽器都會(huì)自動(dòng)創(chuàng)建DOM如下：

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

Javascript DOM的主要用途

• JavaScript DOM能夠改變頁(yè)面中的所有 HTML 元素
• JavaScript DOM能夠改變頁(yè)面中的所有 HTML 屬性
• JavaScript DOM能夠改變頁(yè)面中的所有 CSS 樣式
• JavaScript DOM能夠?qū)?yè)面中的所有事件做出反應(yīng)

改變頁(yè)面中的HTML元素

• 查找HTML元素

eg:同下

改變?cè)?/h5>

• 通過(guò)appendchild方法

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

  • 刪除節(jié)點(diǎn)

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

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

  • 修改HTML屬性

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

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