DOM

Posted 2020-12-12 joenx

DOM

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

 

访问节点

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

? getElementById()、getElementsByName()、getElementsByTagName()

根据层次关系访问节点

 

节点属性

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

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

 

节点信息

nnodeName：节点名称

nnodeValue：节点值

nnodeType：节点类型

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

操作节点

操作节点的属性

创建和插入节点

删除和替换节点

操作节点样式

获取元素的样式

操作节点的属性

getAttribute("属性名")

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

 

删除和替换节点

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

var delNode=document.getElementById("first");

delNode.parentNode.removeChild(delNode);

var oldNode=document.getElementById("second");

var newNode=document.createElement("img");

newNode.setAttribute("src","images/f03.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元素.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);

HTML中元素属性

元素属性的应用

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

语法：

document.documentElement.scrollTop;

document.documentElement.scrollLeft;

或者：

var sTop=document.documentElement.scrollTop||document.body.scrollTop;