JavaScript 第三章 javaScript操作DOM对象
JavaScript
(今天我们学习了Js第三章使用javascript操作DOM对象)
本章目标
了解DOM的分类和节点间的关系熟练使用JavaScript操作DOM节点访问DOM节点能够熟练的进行节点的创建、添加、删除、替换等能够熟练的设置元素的样式能够灵活运用JavaScript获取元素位置的属性来完成网页效果
操作DOM
DOM：Document Ojec Model(文档对象模型)DOM Core ----DOM 分别两支 ----HTML--DOM ---css+DOM
访问节点
使用getElemen系列方式访问指定节点getElemengtByID()、getElementsByName()、getElementsByTagName()根据层次关系访问节点
更具层次关系访问节点
节点属性
| 属性名称 |
描述 |
| parentnode |
返回节点的父节点 |
| childNodes |
返回子节点集合，childNodes[i] |
| firstchild |
返回节点的第一个子节点，最普通的用法是访问该元素的文本节点 |
| lastChild |
返回节点的最后一个子节点 |
| nextSibling |
下一个节点 |
| previousSiBling |
上一个节点 |
根据层次关系访问节点
element属性
| 属性名称 |
描述 |
| firstElementChild |
返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点 |
| lastElementChild |
返回节点的最后一个子节点 |
| nextElementSibling |
下一个节点 |
| previousElementSibling |
上一个节点 |
节点信息
nodeName:节点名称nodeValue:节点值nodeType:节点类型
| 节点类型 |
nodeType值 |
| 元素element |
1 |
| 属性attr |
2 |
| 文本text |
3 |
| 注释comments |
8 |
| 文档document |
9 |
操作节点
操作节点的属性创建和插入节点删除和替换节点操作节点样式获取元素样式
操作节点的属性
getAttribute("属性名")
setAttribute("属性名","属性值")
创建和插入节点
创建节点
| 名称 |
描述 |
| creatElement(tagName) |
创建一个标签为tagName的新元素节点 |
| A.appendChild(B) |
把B节点追加至A节点的末尾 |
| insertBefore(A,B) |
把A节点插入到B节点之前 |
| cloneNode(deep) |
复制某个指定的节点 |
删除和替换节点
| 名称 |
描述 |
| removeCHILD(node) |
删除指定节点 |
| replaceChild(newNode,oldNode)属性attr |
用其他的节点替换指定的节点 |
style属性
HTML元素.style.样式属性 = "值"document.getElementByid("HTML元素").style.color = "举例例如颜色"document.getELementByid("title").style.fontsize = "25px";
| 类别 |
属性 |
| 背景 |
backgroundColor、backgroundImage、backgroundRepeat |
| 文本 |
fontSize、fontWeight、textAlign、textDecoration、font、color |
| 边距 |
padding、paddingTop、paddingBottom、paddingLeft、paddingRight |
| 边框 |
border、borderTop、borderBottom、borderLeft、borderRight |
适用的事件
| 名称 |
描述 |
| 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"; }
获取元素样式
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中元素属性
元素属性应用
| 属性 |
描述 |
| offsetLeft |
返回当前元素左边界到它上级元素的左边界的距离，只读属性 |
| offsetTop |
返回当前元素上边界到它上级元素的上边界的距离，只读属性 |
| offsetHeight |
返回元素的高度 |
| offsetWidth |
返回元素的宽度 |
| offsetParent |
返回元素的偏移容器，即对最近的动态定位的包含元素的引用 |
| scrollTop |
返回匹配元素的滚动条的垂直位置 |
| scrollLeft |
返回匹配元素的滚动条的水平位置 |
| clientWidth |
返回元素的可见宽度 |
| clientHeight |
返回元素的可见高度 |
