jQuery---DOM

DOM：Document Object Model（文档对象模型）

访问节点

使用getElement系列方法访问指定节点

• getElementById()
• getElementsByName()
• getElementsByTagName()

根据层次关系访问节点

属性：

• parentNode
• childNodes
• firstChild
• lastChild
• nextSibling
• previousSibling

element属性

• firstElementChild  返回节点的第一个子节点
• lastElementChild  返回节点的最后一个子节点
• nextElementSibling  下一个节点
• previousElementSibling  上一个节点

节点信息

• nodeName 名称
• nodeValue 值
• nodeType 类型

操作节点

• 操作节点的属性
• 创建和插入节点
• 删除和替换节点
• 操作节点样式
• 获取元素的样式

操作节点的属性

getAttribute("属性名")
setAttribute("属性名","属性值")

创建和插入节点

createElement( tagName)	创建一个标签名为tagName的新元素节点
A.appendChild( B)	把B节点追加至A节点的末尾
insertBefore( A,B )	把A节点插入到B节点之前
cloneNode(deep)	        复制某个指定的节点

删除和替换节点

removeChild( node)	        删除指定的节点
replaceChild( newNode, oldNode)	用其他的节点替换指定的节点

style属性

HTML元素.style.样式属性＝"值";

onclick	        当用户单击某个对象时调用事件
onmouseover	鼠标移到某元素之上
onmouseout	鼠标从某元素移开
onmousedown	鼠标按钮被按下　　

className属性

HTML元素.className="样式名称“;

获取元素的样式

HTML元素.style.样式属性;
document.defaultView.getComputedStyle(元素,null).属性;
HTML元素. currentStyle.样式属性;

HTML中元素属性

offsetLeft 	返回当前元素左边界到它上级元素的左边界的距离，只读属性
offsetTop	返回当前元素上边界到它上级元素的上边界的距离，只读属性
offsetHeight	返回元素的高度
offsetWidth	返回元素的宽度
offsetParent	返回元素的偏移容器，即对最近的动态定位的包含元素的引用
scrollTop	返回匹配元素的滚动条的垂直位置
scrollLeft	返回匹配元素的滚动条的水平位置
clientWidth	返回元素的可见宽度
clientHeight	返回元素的可见高度

元素属性应用

标准
document.documentElement.scrollTop;
document.documentElement.scrollLeft;
谷歌
document.body.scrollTop;
document.body.scrollLeft;