Javascript DOM操作

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元素

方法	描述
getElementsByName	通过标签的name属性查找(可用于单选按钮)
getElementsByClassName	通过类名查找
getElementsByTagName()	通过标签名查找
getElementById	通过ID属性查找

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";
  }
• 事件监听请见下一篇博客