JavaScript操作DOM对象
DOM概述
- Document Object Model,即文档对象模型
- DOM
- DOM Core
- CSS-DOM
- HTML-DOM
- 节点与节点的关系
访问节点
- 使用getElement系列方法访问指定节点
- getElementById() 通过id访问节点
- getElementsByName() 通过类名访问节点
- getElementsByTagName() 通过标签访问节点
- 根据层次关系访问节点
- 节点属性
- parentNode 返回节点的父节点
- childNodes 返回子节点集合,childNodes[i]
- firstChild 返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点
- lastChild 返回节点的最后一个子节点
- nextSibling 下一个节点
- previousSibling 上一个节点
element属性
- firstElementChild 返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点
- lastElementChild 返回节点的最后一个子节点
- nextElementSibling 下一个节点
- previousElementSibling 上一个节点
节点信息
- 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 ";
className属性
//语法:
HTML元素.className=“样式名称”
function over(){
document.getElementById("cart").className="cartOver";
document.getElementById("cartList").className="cartListOver";
}
获取元素样式
-
语法:HTML元素.style.样式属性;
-
不支持IE浏览器
document.defaultView.getComputedStyle(元素,null).属性;
-
兼容IE浏览器
HTML元素. currentStyle.样式属性;
HTML中元素属性
-
offsetLeft 返回当前元素左边界到它上级元素的左边界的距离,只读属性
-
offsetTop 返回当前元素上边界到它上级元素的上边界的距离,只读属性
-
offsetHeight 返回元素的高度
-
offsetWidth 返回元素的宽度
-
offsetParent 返回元素的偏移容器,即对最近的动态定位的包含元素的引用
-
scrollTop 返回匹配元素的滚动条的垂直位置
-
scrollLeft 返回匹配元素的滚动条的水平位置
-
clientWidth 返回元素的可见宽度
-
clientHeight 返回元素的可见高度
-
标准浏览器应用属性案例
document.documentElement.scrollTop; document.documentElement.scrollLeft; 12
-
Chrome应用属性案例
document.body.scrollTop; document.body.scrollLeft;