文档对象模型——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）元素的大小
