JavaScript基础——第三章，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	返回元素的可见高度

总结