操作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
||前后的都要写上,从而保证兼容性
节点信息:
1. nodeName:节点名称
元素节点显示标签名称
属性节点显示属性名称
文本节点显示#text
文档节点显示#document
2. nodeValue:节点值
显示对应的节点的值
3. nodeType:节点类型
节点类型 | NodeType值 |
元素element | 1 |
属性attr | 2 |
文本text | 3 |
注释comments | 8 |
文档document | 9 |
操作节点:
1. 操作节点的属性
getAttribute("属性名")
setAttribute("属性名","属性值")
创建和插入节点
deep的值有true和false
true是复制本身加所有子节点
false是只复制自己本身
删除和替换节点
示例:
var delNode=document.getElementById("first");
delNode.parentNode.removeChild(delNode);
var oldNode=document.getElementById("second");
var newNode=document.createElement("img");
newNode.setAttribute("src","images/f03.jpg");
oldNode.parentNode.replaceChild(newNode,oldNode);
操作节点样式
如何实现鼠标移至“我的购物车”显示商品内容?
改变样式的属性
1.style属性
2.className属性
style属性
语法:HTML元素.style.样式属性="值"
示例:
document.getElementById("titles").style.color="#ff0000";
document.getElementById("titles").style.fontSize="25px ";
代码实现:
function over(){
document.getElementById("cart").style.backgroundColor="#ffffff";
document.getElementById("cart").style.zIndex="100";
document.getElementById("cart").style.borderBottom="none";
document.getElementById("cartList").style.display="block";
document.getElementById("cartList").style.position="relative";
document.getElementById("cartList").style.top="-1px";
}
function out(){
document.getElementById("cart").style.backgroundColor="#f9f9f9";
document.getElementById("cart").style.borderBottom="solid 1px #dcdcdc";
document.getElementById("cartList").style.display="none";
}
className属性
语法:HTML元素.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元素.style.样式属性;
示例:alert(document.getElementById("cartList").display);
语法:document.defaultView.getComputedStyle(元素,null).属性;
示例:
var cartList=document.getElementById("cartList");
alert(document.defaultView.getComputedStyle(cartList,null).display);
②语法:HTML元素. currentStyle.样式属性;
示例:alert(document.getElementById("cartList").currentStyle.display); 【兼容IE浏览器】
HTML中元素属性
元素属性应用
语法:
document.documentElement.scrollTop;
document.documentElement.scrollLeft;
【标准浏览器】
或者
document.body.scrollTop;
document.body.scrollLeft;
【Chrome】
var sTop=document.documentElement.scrollTop||document.body.scrollTop;