JavaScript中操作DOM对象重点总结

DOM：

Document Object Model（文档对象模型）

 

节点和节点关系：

访问节点：

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

节点的属性：

属性名称	描述
parentNode	返回节点的父节点
childNodes	返回子节点集合，childNodes[i]
firstChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild	返回节点的最后一个子节点
nextSibling	下一个节点
previousSibling	上一个节点

element属性：

属性名称	描述
firstElementChild	返回节点的第一个子节点， 最普遍的用法是访问该元素的文本节点
lastElementChild	返回节点的最后一个子节点
nextElementSibling	下一个节点
previousElementSibling	上一个节点

var Next = Parent.nextElementSibling  ||  Parent.nextSibling  

var Pre = Parent.previousElementSibling  ||  Parent.previousSibling 

var First = Parent. firstElementChild  ||  Parent.firstChild  

var Last = Parent.lastElementChild  ||  Parent.lastChild

||前后的都要写上，从而保证兼容性

节点信息：

1. nodeName：节点名称

元素节点显示标签名称

属性节点显示属性名称

文本节点显示#text

文档节点显示#document

2. nodeValue：节点值

显示对应的节点的值

3. nodeType：节点类型

节点类型	NodeType值
元素element	1
属性attr	2
文本text	3
注释comments	8
文档document	9

操作节点：

1. 操作节点的属性

getAttribute("属性名")

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

2. 创建和插入节点

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

deep的值有true和false

true是复制本身加所有子节点

false是只复制自己本身

 

3. 删除和替换节点

名称	描述
removeChild( node)	删除指定的节点 （父节点才能调用removeChild( )）
replaceChild( newNode, oldNode)	用其他的节点替换指定的节点 （前边的替换后面的）

示例：

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 );

4. 操作节点样式

改变样式的属性

①改变style属性

语法：HTML元素.style.样式属性＝"值"

示例：

document.getElementById("titles").style.color="#ff0000";

document.getElementById("titles").style.fontSize="25px ";

style下的其他属性：

类别	属性
背景	backgroundColor、backgroundImage、backgroundRepeat
文本	fontSize、fontWeight、textAlign、textDecoration、font、color
边距	padding、paddingTop 、paddingBottom、paddingLeft、paddingRight
边框	border、borderTop、borderBottom、borderLeft、borderRight

style下的事件绑定：

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

②改变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";  }

5. 获取元素的样式

①语法：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浏览器】

 

获取元素位置：

元素属性应用：

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

 

语法：

document.documentElement.scrollTop;

document.documentElement.scrollLeft;

【标准浏览器】

或者

document.body.scrollTop;

document.body.scrollLeft;

【Chrome】

为了兼容性：

var sTop=document.documentElement.scrollTop   ||    document.body.scrollTop;

总结：