文档对象模型——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给元素添加属性

 　　2.元素操作

　　　　1）元素的大小