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,文本节点获取的是“#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 也都是类似区别。