DOM：Document Object Model（文档对象模型)由三部分组成
Core DOM：也称核心的DOM，定义了一套标准的针对任何结构化文档的对象 ，包括XML，HTML，XHTML
XML DOM：定义了一套标准的针对XML文档的对象
HTML DOM：定义了一套标准的针对HTML文档的对象
一、节点的访问（ var a=document.getElementBy~~() 可以获取一个或多个指定元素节点）
常用节点访问属性
常用节点访问属
2、（1）节点.nodeName 获取节点名称，注意并不是节点的name属性值：例如 <input> 此节点获取的节点名称是 INPUT，文本节点获取的是“#text”。
(2) 节点.nodeValue 获取节点的值，一般来说是获取世俗性节点或者文本节点的值
（3) 节点.nodeType 获取节点的类型，参考下表
3、操作节点属性 节点.getAttribute("属性名")
节点.setAttribute("属性名","属性值")
注意：对于div来说高度height并不是他的属性，style才是div的属性
4、创建插入节点
5、删除替换节点
注意：cloneNode(deep)中deep为boolean类型为可选项。该方法将复制并返回调用它的节点的副本。如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点。
举例： var delNode=document.getElementById("first"); 获取节点 delnode
delNode.parentNode.removeChild(delNode); 删除节点 delnode
var oldNode=document.getElementById("second"); 获取旧节点 oldNode
var newNode=document.createElement("img"); 获取新节点 newNode
newNode.setAttribute("src","images/f03.jpg"); 设置新节点的属性
oldNode.parentNode.replaceChild(newNode,oldNode); 新节点替换旧节点
解释：无论在删除还是替换旧节点需要先获取上级节点所以需要 节点.parentNode 来获上级节点
6.操作节点样式
document.get~~.style.属性/事件/
例如：document.getElementById("aa").style.color="red"; id为”aa“的节点的字体颜色为红色
document.getElementById("aa").onclick=eat(); id为”aa“的节点的点击事件为 ss() 事件
7.获取元素位置：
获取元素样式： 1.document.defaultView.getComputedStyle(元素,null).属性;
例：document.defaultView.getComputedStyle(a,null).display
2.HTML元素. currentStyle.样式属性; 兼容IE
例：document.getElementById("aa").currentStyle.height
3.HTML元素.style.样式属性
例：document.getElementById("aa").style
注意获取的值需要转换为数值类型才能使用
8.补充内容 ：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
获取当前页面滚动条纵坐标的位置：document.body.scrollTop与document.documentElement.scrollTop
|获取当前页面滚动条横坐标的位置：document.body.scrollLeft与document.documentElement.scrollLeft
9.关于offset~~和style.top等的区别
我们知道 offsetTop 可以获得 HTML 元素距离上方或外层元素的位置，style.top 也是可以的，二者的区别是：
一、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。(这里的style.top是读的css样式中的top:20px;这种形式的值,所以是带有"px"的)
二、offsetTop 只读，而 style.top 可读写。(style.top赋值切记加上"px",测试过发现IE下用数值是可以的,但其它主流chrome,opera,ff,safari都不能识别,所以必须加"px")
三、如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。
offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也都是类似区别。
网友评论