JavaScript基础——第三章，JavaScript操作DOM对象
JavaScript操作DOM对象
DOM：Document Object Model (文档对象模型）
节点和节点的关系
访问节点
使用getElement系列方法访问指定节点
getElemmentById()getElemmentsByName()getElemmentsByTagName()
根据层次关系访问节点
节点属性
| 属性名称 | 描述 |
|---|---|
| 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("属性名","属性值")
创建和插入节点
| 名称 | 描述 |
|---|---|
| createElement(tagName) | 创建一个标签名为tagName的新元素节点 |
| A.appendChild(B) | 把B节点追加至A节点的末端 |
| insertBefore( A, B) | 把A节点插入至B节点之前 |
| cloneNode(deep) | 复制某个指定的节点 |
删除和替换节点
| 名称 | 描述 |
|---|---|
| removeChild(node) | 删除指定的节点 |
| 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/fo3.jpg");
oldNode.parentNode.replaceChild(newNode, oldNode);
操作节点样式
style属性
语法：
HTML元素.style.样式属性 = "值"
示例：
document.getElementById("titles").style.color = "#ff0000";
document.getElementById("titles").style.fontSize = "25px";
| 名称 | 描述 |
|---|---|
| onclick | 当用户单击某个对象时调用的时间 |
| onmouseover | 鼠标移动到某元素之上 |
| onmouseout | 鼠标从某元素移开 |
| onmousedown | 鼠标按钮被按下 |
className属性
语法：
HTML元素.classNma = "样式名称"
示例：
function over() {
document.getElementById("cart").className = "cartOver";
document.getElementById("cartList").className = "cartListOver";
}
function out() {
document.getElementById("cart").className = "cartOut";
document.getElementById("cartList").className = "cartListOut";
}
获取元素的样式
语法1：
HTML元素.style.样式属性;
示例1：
alert(document.getElementById("cartList").diplay);
语法2：
document.defaultView.getComputedStyle(元素,null).属性;
示例2：
var cartList = document.getElementById("cartList");
alert(document.defaultView.getComputedStyle(cartList,null).diplay);
语法3：
HTML元素.currentStyle.样式属性;
示例3：
alert(document.getElementById("cartList").currentStyle.diplay);
HTML中元素属性
| 属性 | 描述 |
|---|---|
| offsetLeft | 返回当前元素左边界到它上级元素的右边界的距离，只读属性 |
| offsetTop | 返回当前元素上边界到它上级元素的上边界的距离，只读属性 |
| offsetHeight | 返回元素的高度 |
| offsetWidth | 返回元素的宽度 |
| offsetParent | 返回元素的偏移容器，即对最近的动态定位的包含元素的引用 |
| scrollTop | 返回匹配元素的滚动条的垂直位置 |
| scrollLeft | 返回匹配元素的滚动条的水平位置 |
| clientWidth | 返回元素的可见宽度 |
| clientHetght | 返回元素的可见高度 |
总结
