DOM
操作文档的对象 Document Object Model
(XML DOM 与 HTML DOM)
1.什么是DOM?能做什么?
增删改查
2.XML DOM - Node 对象
都是一个对象,三个重要属性
a.nodeType 节点类型
元素节点(标签节点)(element) 1 例如(div img...)
属性节点() 2 例如(a标签的href属性)
文本节点() 3 例如(<div>Hello</div>)//hello属于div的子节点
注释节点 8 例如(<!--->)
文档节点 9 整个文档document
b.nodeValue 节点的值
元素节点 null
文本节点 文本本身
属性节点 属性的值
c.nodeName 节点名称
标签节点 就是标签名 如"div";
属性节点 是属性名
文本节点 #text 值就是中间的值
文档节点 #document
<a href="http://www.baidu.com" style="color:red">百度</a>
3.DOM节点树
关系 parent children sibling
4.Node节点对象
在Firefox里,标签与标签之间的空白,也是一个节点(文本节点),IE8没有
属性 上面已有3个
firstChild 第一个儿子(长子)
childNodes
lastChild 最后一个子节点
parentNode 父节点
nextSibling 弟弟
previousSibling 哥哥
方法
a.object.cloneNode(true); 把他的子节点一起克隆了
默认参数为true,如果传一个false,则不克隆子节点
b.object.appendChild(对象); 将一个对象添加一个儿子
c.object.removeChild(对象); 通过他爸爸来删除对象
d.object.replaceChild(对象); 替换它的子节点
e.hasChildNodes() 判断是否有子节点 遍历用
f.hasAttributes 判断是否有属性
5.XML DOM - Element 对象
节点类型是1 nodeType
由于元素对象也是一种节点，因此它可继承 Node 对象的属性和方法。
方法
insertBefore 在已有的子节点之前插入一个新的子节点。
getAttribute
setAttribute(a,b)
removeAttribute()
6.XML DOM HTMLElement 对象
属性
a.classname
b.*currentStyle //IE特有
如何得到通过CSS样式设置的属性
Window.getComputedStyle() //其他浏览器
c.innerHTML
d.offsetHeight,offsetWidth
只能获取宽高
只读
e.offsetLeft, offsetTop
只读
f.scrollTop 元素滚动的高度
g.style 只能操作行内样式
h.title当鼠标悬停在元素上的时候，很多浏览器在元素的“工具提示”中显示这一属性的值。
7.HTML DOM Document 对象
alert(document.nodeType) //9
alert(document.nodeName) //#document
属性
all
links
images
forms
方法
创建一个元素
createElement
appendChild()
getElementById()
getElementByTagName()
getElementByName()
8.XML DOM Document 对象
//document.body相当于
document.documentElement
document.doctype