HTML-JavaScript操作DOM对象

操作DOM

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

节点和节点关系

访问节点：

1. 使用getElement系列方法访问指定节点：getElementById( )、getElementsByName( )、getElementsByTagName( )
2. 根据层次关系访问节点

节点属性

属性名称	描述
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;