dom对象的获取与编辑js

1·DOM：文档对象模型 Document Object Model

     浏览器通过渲染html文件生成一个层次分明的DOM树

     js通过这种层级关系对任意一个DOM节点进行操作

     操作方法分类：

         1）·Core Dom  这套方法具有通用性，可以作用于xml，html等任意具有结构性的文档

         2)·Xml Dom 专门用来操作Xml文档

         3)·HTML Dom：专门用来操作HTML文档

2·getElementsBy...

      getElementById  通过id选择器:返回结果只有一个 

              如果存在多个同名id，按顺序返回第一个  若没有同名id存在返回空对象null

      getElementsByName  通过name选择器：返回结果是数组类型

              返回数组包含所有name属性匹配的元素

      getElemnetByTagName  通过标签选择器：与name相同

      getElementByClassName   通过类选择器：与name相同

      增强for循环  ：  for （item in arr）{}

3·获取和修改元素属性

    

     设操作对象为： <img src = "...." alt="..." id="img">

      1)查找你要操作的元素

      var img = document.getElementById("img");

      2)获取元素对应的值

      img.getAttribute("src");

      3)改变元素属性值

      img.setAttribute("src","图片地址")；

4·点符号法（可弥补setAtrribute缺点）

   text.style.属性 = "属性值";

   多个属性的定义时候    需要点符号法的优化

    1）cssText

     text.style.cssText +=";属性1：属性值;属性2：属性值..."; --- 可以实现多个样式的追加

    2）className

     text.className += "空格+类名称（直接在css中写一个类）";  ---- 可以实现多个类同时存在

   实现多个样式类或者样式ID的添加

       1）样式id 的添加

       var text = documentgetElementById（"id"）;

       var id = text.getAtrribute("id"); 

       text.setAtrribute("id",id + " id名称")

       一个元素不能同时存在（如“id=id1  id2 ”）多个id，否则一个id也不会生效 

       即若text已经通过id选择器添加了样式 则添加了的新id样式和之前的id样式都会失效

 

       2)样式类的添加

        var text = document.getElementByClassName("calss");

        var class = text.getAtrribute("calss");

        text.setAtrribute("calss",class + "类名称");