DOM

1.DOM

文档对象模型
文档：整个的html网页文档
对象：将网页中的每一个部分转化为一个对象
模板：使用模型来表示对象之间的关系，方便我们获取对象

2.节点

Node—构成HTML文档的最基本的单元
文档节点：整个HTNL文档 可以直接使用
元素节点：HTML文档中的HTML标签
属性节点：元素的属性 id

文本节点：HTML标签中的文本内容

    <button id="btu">我是一个按钮</button>
    <script>
        //获取对象
        var btn = document.getElementById("btu");
        //修改内容
        btn.innerHTML = "I am button";
    </script>

3.事件

用户与浏览器之间的交互行为

    //不推荐
    <button id="btn" ondblclick="alert('你点我干嘛！')">点我</button>
    //为对象事件绑定处理函数的形式来响应事件 比如 单击相应函数
    <button id="b" >点我</button>
    <script>
       var btn = document.getElementById("b");
       btn.onmouseover = function(){
           alert("你还点~~~");
       }
    </script>

4.文档的加载

一行一行
onload事件会在整个页面加载完之后才触发
为window绑定一个onload事件

5.获取元素节点

通过document对象调用
1.getElementById()
–通过id属性获取一个元素节点的对象
2.getElementsByTagName()
–通过标签名获取一组元素节点对象
3.getElementsByName()
–通过name属性获取一组元素节点对象

6. 其他查询方式

    1.document.body:保存的body的引用
    2.document.documentElement:保存的是html的标签
    3.document.all:代表页面中的所有的元素
    4.根据class来查询
    document.getElementsByClassName
    兼容性不好
    5.document.getElementsByTagName("div")
   获取标签为div的所有元素
    6.document.querySelector
    获取元素节点的方式和CSS相同
    返回的元素只有一个，有多个时，只有第一个返回
    var div = document.querySelector(".div div");
    ** div.innerHTML** 只获取内容
    7.document.querySelectorAll 数组
    获取所有的class为此的元素的节点
    var divs = document.querySelectorAll(".div");

DOM的增删改