首页 > 代码库 > 文档对象模型——DOM

文档对象模型——DOM

DOM:文档对象模型,核心对象document,对html元素的样式(颜色、属性、位置)、内容、属性进行动态的改变和操作

一、document对象

  1.属性

    title   返回或设置当前文档的标题   //document.title="标题名"

    URL   返回当前文档的url            //只能获取不能设置

    bgColor  设置文档的背景色

    fgColor   设置文档的前景色(设置文字颜色)

  2.方法(获取元素的方法)

    document.getElementById("")   //通过id名获取元素,id名是唯一的

    document.getElementByTagName()          //通过标签名获取元素集合,不是数组,但可通过数组的方式访问

    document.getElementByClassName()     //通过类名获取元素,存在兼容性问题

    document.getElementByName()             //通过表单的name名获取元素

    document.querySelector()                    //万能选择器,与jquery中的$选择器类似,可通过类名、标签名等获取元素

    document.querySelectorAll()               //获取元素集合

  3.document对象集合

    docment.all          文档所有元素的集合

    document.forms    文档forms对象的集合

    document.anchors   文档锚链接的集合

    document.links          文档所有链接的集合,包括图片地图

    document.images       文档所有图片的集合

二、元素操作

  1.元素内容的获取与设置

<div class="word" id="list" str="自定义属性">
    我是文本内容
</div>

    1)元素内容

var obj=document.querySelector("div");
console.log(obj.innerHTML)
obj.innerText="修改后的文本内容"
console.log(obj.innerText)

 

      获取:innerHTML  获取或设置文本节点内容,包括空格文本

           innerText   获取或设置文本内容

      ps(innerHTML与document.write 的区别:

        document.write直接输出到浏览器中,并且可继续添加write添加内容,innerHTML是对DOM元素的操作,获取或设置文本内容,并且将所有文本内容替换)

      设置:obj.innerHTML="设置的文本内容"    

         obj.innerText="设置的文本内容"

    2)元素的属性

      获取:对于标签自带属性id class等可以直接获取,

         对于自定义属性,可通过getAttribute获取

console.log(obj.className)
console.log(obj.id)
console.log(obj.getAttribute("class"))
console.log(obj.getAttribute("str"))

      设置:直接设置  obj.className="aa";

         通过setAttribute设置属性      obj.setAttribute("str","list")

     3)元素的样式

      获取:

        obj.style.css属性         //只能获取行内样式

        getComputedStyle(元素对象,null).css属性            //获取非行内样式,只能获取不能设置

        obj.currentStyle.css属性                                    //IE浏览器中获取非行内样式,只能获取不能设置

        //对于非行内样式中的属性,有连字符的属性去掉连字符,首字母大写(W3C标准),getComputedStyle在IE中会直接报错,有兼容性问题,因此在封装函数时不可作为判定条件

      设置:(设置的属性都是行内样式,优先级最高,因此注意样式的覆盖)

        单个属性样式的设置       obj.style.css属性="";

        多个属性样式的设置       obj.style.cssText="width:200px;height:100px";   //多个属性的设置直接将行内样式的Style重新设置

        先给属性添加样式,在通过js给元素添加属性

 

         

 

      

文档对象模型——DOM