第三章 JavaScript操作DOM对象
3.1 DOM操作
DOM是Document Object Model的缩写,即文档对象模型。
3.1.1 DOM操作分类
操作DOM是通常分为三类:DOM Core(核心)、HTML-DOM和CSS-DOM。
1.DOM Core
DOM Core不是JavaScript的专属品,它的用途不仅限于处理一种使用标记语言编写出来的文档。
2.HTML-DOM
它提供了一些更简单的标记来描述各种HTML元素的属性。
3.CSS-DOM
CSS-DOM技术的主要作用是获取和设置style对象的各种属性。
3.1.2 节点和节点关系
DOM是以树状结构组织的HTM文档,HTML中每个标签或元素都是一个节点,
- 整个文档是一个文档节点。
- 每个HTML标签是一个元素节点。
- 包含在HTML元素中的文本是文本节点。
- 每个HTML属性是一个属性节点。
- 注释属于注释节点。
一个HTML文档是由各个不同的节点组成的。
使用父(parent).子(child)和同胞(sibling)等术语来描述这些节点的层次关系,父节点拥有子节点,同级的字节被称为同胞或兄弟节点。
- 在节点树中,顶部节点被称为根(root)。
- 每个节点都有父节点,除了根(它没有父节点)。
- 一个节点可以拥有任意数量的子节点。
- 同胞节点是拥有相同父节点的节点。
访问节点
使用DOM Core访问HTML文档的节点主要有两种方式,一种是使用getElement系列方法访问指定节点,另外一种是根据节点的层次关系访问节点。
1.使用getElement系列方法访问指定节点
- getElementById():返回按id属性查找的第一个对象的引用。
- getElementsMyName():返回按带有指定名称name查找的对象的集合,由于一个文档中可能会有多个同名节点(如复选框,单选按钮),因此返回的是元素数组。
- getElementsByTagName():返回带有指定标签名TagName查找的对象的集合,由于一个文档中可能会有多个同类型的标签节点(如图片组,文本输入框),因此返回元素数组。
2.根据层次关系访问节点
节点属性(节点[包含元素,文本,属性,注释,])。
属性名称 | 描述 |
---|---|
parentNode | 返回节点的父节点 |
childNodes | 返回子节点集合,childNodes[i] |
firstChild | 返回节点的第一子节点,最普通的用法是访问该元素的文本节点 |
lastChild | 返回节点的最后一个子节点 |
nextSibling | 下一个节点 |
previousSibling | 上一个节点 |
element属性(结点<标签元素>)
属性名称 | 描述 |
---|---|
firstElementChild | 返回节点的第一个节点,最普通的用法是访问该元素的文本节点 |
lastElementChild | 返回节点的最后一个子节点 |
nextElementSibling | 下一个节点 |
previousElementSibling | 上一个节点 |
3.1.5 节点信息
节点是DOM层次结构中的任何类型的对象的通用名称,每个节点都拥有包含着关于节点某些信息的属性。
- nodeName(节点名称)
- nodeValue(节点值)
- nodeType(节点类型)
节点类型
节点类型 | NodeType值 |
---|---|
元素element | 1 |
属性attr | 2 |
文本text | 3 |
注释comments | 8 |
文档document | 9 |
3.2 操作节点
3.2.1 操作节点的属性
HTML DOM提供了获取及改变节点属性值的标准方法。
- getAttribute(“属性名”):用来获取属性的值。
- getAttribute(“属性名”,“属性值”):用来设置属性的值。
3.2.2 创建和插入节点
创建节点
名称 | 描述 |
---|---|
createElement(tagName) | 创建一个标签名为tagName的新元素节点 |
A.appendChild(B) | 把B节点追加至A节点的末尾 |
insertBefore(A,B) | 把A节点插入B节点之前 |
cloneNode(deep) | 复制某个指定的节点 |
3.2.3 删除和替换节点
删除和替换节点的方法
名称 | 描述 |
---|---|
removeChild(node) | 删除指定的节点 |
replaceChild(newNode,oldNode) | 用其他的节点替换指定的节点 |
方法replaceChild(newNode,oldNode)中的两个参数,newNode是替换的新节点,oldNode是要被替换的节点。
3.2.5 操作节点样式
在JavaScript中,有两种方式可以动态地改变样式的属性,一种是使用样式的style属性,另一种是使用样式的className属性。
1.style属性
style是一个对象,代表一个单独的样式声明,可通过应用样式的文档或元素访问style对象。
语法:
HTML元素.style.样式属性="值";
常用事件
名称 | 描述 |
---|---|
onclick | 当用户单击某个对象时调用事件 |
onmouseover | 鼠标移到某元素之上 |
onmouseout | 鼠标从某元素移开 |
onmousedown | 鼠标按钮被按下 |
2.className属性
className属性可设置或返回元素的class样式。
语法:
HTML元素.className="样式名称"
3.2.6 获取元素的样式
在JavaScript中可以使用style属性获取样式的属性值。
语法:
HTML元素.style.样式属性;(只能拿内联样式)
微软为每个元素提供了一个currentStyle对象,它包含了所有元素的style对象的特性和任何未被覆盖的CSS规则的style特性,currentStyle对象与style对象的使用方式一样。
语法:
HTML元素.currentStyle.样式属性;
但是currentStyle对象的特性是只读的,如果要给样式属性赋值。
不过DOM提供了一个getComputedStyle()方法,这个方法接收两个参数,需要获取样式的属性值。
语法:
document.defaultView.getComputedStyle(元素,null).属性;
3.3 获取元素位置
使用currentStyle或getComputedStyle()可以获得元素的属性值,即可以获取元素在网页中的位置。
3.3.1 元素属性应用
HTML中元素的属性
这就需要使用scrollTop,scrollLeft这两个属性,获得的数值单位是像素(px),对于不滚动的元素,这两个属性值总是0。这两个属性获取滚动条在窗口中滚动的距离
语法:
document.documentElement.scrollTop;
document.documentElement.scrollLeft;
或者
document.body.llTop;
document.body.llLeft;