JavaScript操作DOM对象
JavaScript操作DOM对象
一、DOM操作
DOM：文档对象模型，是基于文档编程的一套API接口
- DOM操作分类
使用JavaScript操作DOM时通常分为三类：DOM Core（核心）、HTML-DOM和CSS-DOM
- 节点和节点关系
DOM是以树状结构的HTML文档，根据DOM概念，HTML文档中的每个标签或元素都是一个节点。
- 整个文档是一个文档节点
- 每个HTML标签是一个元素节点
- 包含在HTML元素中的文本是文本节点
- 每个HTML属性是一个属性节点
- 注释属于注释节点
使用父（parent）、子（child）和同胞（sibling）等术语来描述这些节点的层次关系，父节点拥有子节点，同级的子节点被称为同胞或兄弟节点，关系如下：
l 在节点树中，顶端节点被称为根（root）
l 每个节点都有父节点、除了根（它没有父节点）
l 一个节点可拥有任意数量的子
l 同胞是拥有相同父节点的节点
- 访问节点
使用DOM Core访问HTML文档的节点主要有两种方式，一种是使用getElement系列方法访问指定节点，另一种是根据节点的层次关系访问节点。
节点属性：
Childnodes：返回一个数组，这个数组由給定元素节点的子节点构成。
Fristchcild：返回第一个子节点
Lastchild:它返回最后一个子节点
Parentnode:它返回一个给定节点的父节点
Nextsibling:它返回给定节点的下一个节点
Previousibling:它返回給节点的上一个节点
- 节点信息
节点是DOM层次结构中的任何类型的对象的通用名称，每个节点都拥有包含着关于节点某些信息的属性，这些属性如下。
nodeName(节点名称)
nodeValue(节点值)
nodeType(节点类型)
节点类型
|
节点类型 |
NodeType值 |
|
元素element |
1 |
|
属性attr |
2 |
|
文本text |
3 |
|
注释comments |
8 |
|
文档document |
9 |
二、操作节点
- 操作节点的属性
获取：alert(a[0].getAttribute("src"));
设置：a[0].setAttribute("src","");
a[0].setAttribute("width",10);
a[0].setAttribute("height",10);
- 创建和插入节点
创建节点
|
名称 |
描述 |
|
createElement(tagName) |
创建一个标签名为tagName的新元素节点 |
|
A.appendChild(B) |
把B节点追加至A节点的末尾 |
|
InsertBefore(A,B) |
把A节点插入B节点之前 |
|
CloneNode(deep) |
复制某个指定的节点 |
新建节点：createElement("节点名")
新建文本节点：createTextNode("文本内容")
将文本节点添加到新建节点中：appendChild(文本节点名)
获取要插入节点的对象：getElementById("id名")
将新建节点插入到目标节点对象中：insertChild(要插入节点名，目标节点位置)
- 删除和替换节点
|
名称 |
描述 |
|
removeChild(node) |
删除指定节点 |
|
replaceChild(newNode,oldNode) |
用其他的节点替换指定的节点 |
- 操作节点样式
1.style
对象.style.样式名=值;
2.className
cLassName=”样式名”;
3.获取对象的样式值
对象.style.样式名
常用事件：
onclick 当用户单击某个对象时调用事件
onmouseover 鼠标移到某元素之上
onmouseout 鼠标从某元素移开
onmousedown 鼠标按钮被按下
- 获取元素的样式
HTML元素.style.样式属性；
HTML元素.currentStyle.样式属性；
三、获取元素位置
- 元素属性应用
|
属性 |
描述 |
|
offsetLest |
返回当前元素左边界到它上级元素的左边界的距离，只读属性 |
|
offsetTop |
返回当前元素上边界到它上级元素的上边界的距离，只读属性 |
|
offsetHeight |
返回元素的高度 |
|
offsetWidth |
返回元素的宽度 |
|
offsetParent |
返回元素的偏移容器，即对最近的动态定位的包含元素的引用 |
|
scrollTop |
返回匹配元素的滚动条的垂直位置 |
|
scrollLeft |
返回匹配元素的滚动条的水平位置 |
|
clientWidth |
返回元素的可见宽度 |
|
clientHeight |
返回元素的可见高度 |
