操作DOM
DOM：Document Object Model（文档对象模型）
访问节点
使用getElement系列方法访问指定节点
getElementById()、getElementsByName()、 getElementsByTagName()
根据层次关系访问节点
节点属性
parentNode 返回节点的父节点
childNodes 返回子节点集合，childNodes[i]
firstChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild 返回节点的最后一个子节点
nextSibling 下一个节点
previousSibling 上一个节点
element属性
firstElementChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastElementChild 返回节点的最后一个子节点
nextElementSibling 下一个节点
previousElementSibling 上一个节点
oNext = oParent.nextElementSibling || oParent.nextSibling
oPre = oParent.previousElementSibling || oParent.previousSibling
oFirst = oParent. firstElementChild || oParent.firstChild
oLast = oParent.lastElementChild || oParent.lastChild
节点信息
nodeName：节点名称
nodeValue：节点值
nodeType：节点类型
元素element 1
属性attr 2
文本text 3
注释comments 8
文档document 9
操作节点的属性
getAttribute("属性名")
setAttribute("属性名","属性值")
创建和插入节点
创建节点
createElement( tagName) 创建一个标签名为tagName的新元素节点
A.appendChild( B) 把B节点追加至A节点的末尾
insertBefore( A,B ) 把A节点插入到B节点之前
cloneNode(deep) 复制某个指定的节点
删除和替换节点
removeChild( node) 删除指定的节点
replaceChild( newNode, oldNode)属性attr 用其他的节点替换指定的节点
style属性
HTML元素.style.样式属性＝"值"
document.getElementById("titles").style.color="#ff0000";
document.getElementById("titles").style.fontSize="25px ";
onclick 当用户单击某个对象时调用事件
onmouseover 鼠标移到某元素之上
onmouseout 鼠标从某元素移开
onmousedown 鼠标按钮被按下
背景 backgroundColor、backgroundImage、backgroundRepeat
文本 fontSize、fontWeight、textAlign、textDecoration、font、color
边距 padding、paddingTop 、paddingBottom、paddingLeft、paddingRight
边框 border、borderTop、borderBottom、borderLeft、borderRight
className属性
function over(){
document.getElementById("cart").className="cartOver";
document.getElementById("cartList").className="cartListOver";
}
function out(){
document.getElementById("cart").className="cartOut";
document.getElementById("cartList").className="cartListOut";
}
HTML中元素属性
元素属性应用
offsetLeft 返回当前元素左边界到它上级元素的左边界的距离，只读属性
offsetTop 返回当前元素上边界到它上级元素的上边界的距离，只读属性
offsetHeight 返回元素的高度
offsetWidth 返回元素的宽度
offsetParent 返回元素的偏移容器，即对最近的动态定位的包含元素的引用
scrollTop 返回匹配元素的滚动条的垂直位置
scrollLeft 返回匹配元素的滚动条的水平位置
clientWidth 返回元素的可见宽度
clientHeight 返回元素的可见高度