JavaScript操作DOM对象

第三章

1.操作DOM

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

2.节点和节点关系

3.访问节点

1.使用getElement系列方法访问指定节点

getElementById()
getElementsByName()
getElementsByTagName()

2.根据层次关系访问节点

4.根据层次关系访问节点

1.节点属性

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

2.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 

5.节点信息

• nodeName：节点名称

• nodeValue：节点值

• nodeType：节点类型

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

6.操作节点

• 操作节点的属性

• 创建和插入节点

• 删除和替换节点

• 操作节点样式

• 获取元素的样式

1.操作节点的属性

• getAttribute("属性名")

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

2.创建和插入节点

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

3.删除和替换节点

名称	描述
removeChild( node)	删除指定的节点
replaceChild( newNode, oldNode)属性attr	用其他的节点替换指定的节点

4.操作节点样式

改变样式的属性

1. style属性

2. className属性

1.style属性

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

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

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

2.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.样式属性;

HTML元素. currentStyle.样式属性;

var cartList=document.getElementById("cartList");
alert(document.defaultView.getComputedStyle(cartList,null).display);
​
alert(document.getElementById("cartList").currentStyle.display);

7.HTML中元素属性

元素属性应用

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

8.总结