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方法

  • 添加节点
    

    
    

    **************

    
    
    
    
    
    百度
    
    
    
    
    
    

  • 删除节点

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

  需要注意的是除过通过查找之外其它函数返回的都是一个数组，不可一根筋的直接搞
• 通过innerHTML方法

  • 修改HTML属性

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

  *修改修改HTML内容
  function test() {
  var node=document.getElementById("div1");
  node.innerHTML="帅"
  }
• 修改CSS属性
  function test() {
  var node=document.getElementById("div1");
  node.style.backgroundColor="red";
  }
• 事件监听请见下一篇博客