DOM学习记录

一.DOM
   作用： DOM（Document Object Model）
  1.document 文档 HTML XML 文件（标记语言）
  2.Object 对象（HTML元素转换成的js对象）
    注意：如果使用js操作HTML文档，就需要先将HTML文档结构转成JS对象
     对象可以做的操作    a.操作属性；
                         b.操作内容；
                          innerText内部的文本（IE），textContent（FF）不含有标记
                          innerHTML有标签效果
                          outerText外部的文本，包含自己的标记
                          outerHTML内部的HTML以及自己的标签
                            表单中被容：用value值
                                  
                         c.操作样式；
                         //原先的background-color中的‘-’去掉，后面的首字母大写
                        aobj.style.backgroundColor=“red”；//这是一条一条加样式
                       如果是加多个样式则可以设置一个类，在类中设置多条属性即可
                      使用：aobj.className="classname"//classname是你之前取得类名
                      如果是加多个类样式则需要：aobj.className="classname1 classname2"或者aobj.className=“classname1”aobj.className+=“ classname2”
              
      有了以上3点的操作之前先转成对象，2种方式：
          1.通过标记名（返回的是数组即多个需要拿到其中一个）、id名（id一般唯一）、name（多个）
              document中的三个方法
              var objs=document.getElementsByTagName("a"); objs.href="";
              var objs=document.getElementById("one")；返回的是一个对象(id不能重复，否则不能确定是活儿那一个对象)
              var objs=docuemnt.getElementsByName("two");返回的是一个数组，应该后面加上[0]可以获得第一个对象
              //这些代码应该在标记之后，否则找不到可能出错
          转换成对象后若想看到该对象中的属性可使用如下代码：
           var aobj=document.getElementById("alink");      
           var pro="";
           for(pro in aobj){
        document.write("a."+pro+"="+aobj[pro]+"<br>");
            }
           2.通过数组等方式
                     window.frame
                     document.image=[object]
                     document.anchors=[object]
                     document.forms=[object]
                     document.links=[object]
                     document.all=[object]
                     document.applets=[object]等等
               其中数组可以通过[]的方式访问或者.的方式访问：例如
               document.forms[1].username.value
               document.forms["frm2"].username.value
               document.forms[1]["username"].value
               document.forms.item(1).username.value
               document.forms.frm2.username.value
               document.forms.item("frm2").username.value
               document["frm2"].username.value
               document.frm2.username.value
  3.Model.
    一.将文档想象成一个倒树，每一部分（元素、内容、属性、注释）都是节点
    二.只要知道一个节点，根据关系找到其他节点
        父节点parentNode
        子节点（第一个、最后一个）childNodes、 firstChild、lastChild
        兄弟节点（上一个、下一个） nextSibling、previousSibling
     三、找到节点：节点类型nodeType、节点名nodeName、节点值nodeValue
在一个文档中不能用输出的方式增加一些节点或者减少一个节点，因为文档流结束了，必须用节点来操作；
    （创建节点document.createElement("a")，
     插入到指定的位置---元素.appendChild(元素),在a对象的b对象之前插入c对象用a.insertBefore(c,b)。
     删除节点--对象.removeChild(对象)）