本章目标
了解DOM的分类和节点间的关系
熟练使用JavaScript操作DOM节点
访问DOM节点
能够熟练的进行节点的创建、添加、删除、替换等
能够熟练的设置元素的样式
能够灵活运用JavaScript获取元素位置的属性来完成网页效果
- 操作DOM
DOM:Document Object Model(文档对象模型)
- 节点和节点关系
- 访问节点
- 使用getElement系列方法访问指定节点
- getElementById()、getElementsByName()、getElementsByTagName()
- 根据层次关系访问节点
- 使用getElement系列方法访问指定节点
- 根据层次关系访问节点2-1
- 节点属性
属性名称 |
描述 |
parentNode |
返回子节点集合,childNodes[i] |
childNodes |
返回子节点集合,childNodes[i] |
firstChild |
返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点 |
lastChild |
返回节点的最后一个子节点 |
lastChild |
返回节点的最后一个子节点 |
nextSibling |
下一个节点 |
previousSibling |
上一个节点 |
-
- element属性
示例:
oNext = oParent.nextElementSibling || oParent.nextSibling
oPre = oParent. previousElementSibling || oParent.previousSibling
oFirst = oParent. firstElementChild || oParent.firstChild
oLast = oParent.lastElementChild || oParent.lastChild
-
- 节点信息
- nodeName:节点名称
- nodeValue:节点值
- nodeType:节点类型
- 节点信息
**大纲**
-
- 操作节点的属性;
- 创建和插入节点;
- 删除和替换节点
- 操作节点样式
- 获取元素的样式
1.操作节点的属性
getAttribute("属性名")
getAttribute("属性名","属性值")
2.创建和插入节点
creatElement(tagName)-创建一个标签名为tagName的新元素节点
A.appendChild(B)--把B节点追加至A节点的末尾
insertBefore(A,B)--把A节点插入到B节点之前
cloneNode(deep)--复制某个指定的节点
3.删除和替换节点
名称 描述
removeChild(node) 删除指定的节点
replaceChild(new,old)属性attr 用其他的节点替换指定的节点
删除:
var delNode=document.getElementById("first");
delNode.parentNode.removeChild(delNode);
替换:
var oldNode=document.getElementById(“second”);
var newNode=document.creatElement(“img”);
newNode.serAttribute(“src” , “images/f03.jpg”);
oldNode.parentNode.replaceChild(newNode , oldNode);
- style属性
HTML元素 . style . 样式属性=”值”
document.getElementById(“titles”) . style. color=”#ff0000”;
document.getElementById(“titles”) .style .fontsize=”25px”;
类别 属性
背景 backgroundColor、bacgroundImage、backgrounRepeat
文本 fontSize、fontWeight、textAlign、textDecoration、font、color
边距 padding、paddingTop、paddingBottom、paddingLeft、paddingRight
边框 border、borderTop、borderBottom、borderLeft、borderRight
名称 描述
onclick 当用户单击某个对象时调用事件
onmouseover 鼠标移到某元素之上
onmouseout 鼠标从某元素移开
onmousedown 鼠标按钮按下
- style属性
-
- 鼠标放在上面:
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”) .style. Display);
语法:
document.defaultView.getComputedStyle(元素,null) .属性;
示例:
var cartList=document.getElementById(“cartList”);
alert(document.defaultView.geyComputedStyle(cartList , null).display)
语法:-------兼容IE浏览器:
HTML元素 .currentStyle .样式属性;
示例:
alert (document.getElementById(“cartList”).currentStyle.display);
- HTML中元素属性以及应用
属性:
属性 |
描述 |
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;