JavaScript的DOM应用

#DOM

---

1. DOM，全程Document Object Model文档对象模型。
2. JS中通过DOM来对HTML文档进行操作，只要理解DOM就可以随心所欲的操作web页面。
3. 文档 表示的就是整个的HTML网页文档。
4. 对象 表示将网页中的每一个部分都转换为一个对象。
5. 模型 使用模型来表示对象之间的关系，这样方便我们获取对象。

#节点属性

---

         nodeName    nodeType   nodeValue
 文档节点  #document     9          null
 元素节点   标签名        1          null
 属性节点   属性名        1          属性值
 文本节点   #text        3         **文本内容**

#获取元素节点
通过document对象调用

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

#事件

---

• 事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。
• Java与HTML之间的交互是通过件事实现的
• 对于Web应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、按下键盘上某个键，等等。

#DOM中常用的方法

---

##一.主要作用在DOM增、删、减、查的方法

增：

 1.createElement() 用来增添一个节点
   语法： document.createElement("标签名")
 2.createTextNode() 用来增加一个文本
   语法： document.createTextNode("文本内容")
 3.appendChild()  将一个节点添加到一个元素中
   语法： 原素.appendChild(newItem);
   实例:   
        <ul id="city">
            <li>北京</li>
            <li>上海</li>
            <li>广州</li>
            <li>合肥</li>
        </ul>

       <script type="text/javascript">
             onload = function(){
                   var citys = document.getElementById("city");
                   var newli = document.createElement("li");
                   var liText = document.createTextnode("南京");
                   newli.appendChild(liText);
              }
       </script>

删：

  4.element.removeChild()  用来移除元素中的子节点
  5.element.replaceChild() 用来替换元素中的子节点

改：

  6.element.innerHTML 属性返回元素的内容（注意该属性不能够返回单标签的内容）
    利用改属性可以查询元素的内容然后进行赋值操作来更改属性内容，
  7.element.checked  该属性返回的值是 true & false 一般只用来显示该复选框是否为选中状态

查：

  8.getElementById()  返回指定ID的第一个对象的引用
  9.getElementByTagName()  返回指定标签名称的一组对象的集合
  10.getElementByName()   返回指定名称一组对象集合