JavaScript操作DOM对象
JavaScript操作DOM对象
DOM操作
DOM是Doument Obiect Model的编写,即文档对象模型、 是基于文档编程的一 套API接口.1998年,W3C发布了第一级的DOM规范,这个规范允许访问和操作HTM页面中的每个单独元素,如网页的表格、图片、文本、表单元素等。由于大部分主流的浏览器都执行了这个标准。因此基本解决了浏览器兼容性的问题。
使用JavaScript操作DOM时分为三个方面: DOM Core (核心),HTML-DOM和CSS-DOM。通过这些标准,开发人员可以让网页真正地动起来,动态地增加、修改、删除数据,使用户与计算机的 交互更加便捷,交互也更加丰富。
1.DOM操作分类
使用JvaSceaep操作DOM时通常分为三类DOM Core(核心) ,HTML-DOM,CSS-DOM。
- DOM-Core
DOM Core 不是JavaScript的专属品,任何一种支持DOM的编程语言都可以使用它,它的用途不仅限与处理一种使用标记语言编写出来的文档,如HTML。
- HTML-DOM
它提供了一些更简单的标记来描述各种HTML元素的属性,相对于DOM Core获取对象、属性而言,当使用HTML-DOM时,代码通常较为简短,只是它的应用范围没有DOM Core广泛,仅适用于处理HTML文档。
- CSS-DOM
针对CSS的操作,在JavaScript中,CSS-DOM技术的主要作用时获取和设置style对象的各种属性,即CSS属性。
2.节点和节点关系
DOM是以树状结构组织的HTML文档,HTML文档中的每个标签或元素都是一个节点,在DOM中是这样的规定的:
- 整个文档是一个文档节点。
- 每个HTML标签是一个元素节点。
- 包含在HTML元素中的文本是文本节点。
- 每个HTML属性是一个属性节点。
- 注释属于注释节点。
使用父(parent),子(child) 和同胞(sibling)等术语来措述这些节点的层次关系,父节点拥有子节点,同级的子节点被称为同胞或兄弟节点,它们的关系如下:
- 在节点树中,顶部节点被称为根(root),如<htmI>节点
- 每个节点都有父节点,除了根(它没有父节点)如<head>和<body>的父节点都是<hm>,文本节点 “DOM应用” 的父节点是<p>节点。
- 一个节点可以拥有任意数量的子节点如<body>节点的子节点有<img>,和<p>。
- 同胞节点是拥有相同父节点的节点, 如<p>,<h>就是兄弟节点,它们的父节点均为<body>节点。
3.访问节点
使用DOM Core访问HTML文档的节点主要有两种方式:
1):使用getElement系列方法访问指定节点,
2):根据节点的层次关系访问节点。
1.使用getElement系列方法访问指定节点:
- getElementById():返回按id属性查找的第一个对象的引用。
- getElementsByName():返回按带有指定名称name查找的对象的集合,返回的是元素数组。
- getElementsByTagName():返回带有指定标签名Tag Name查找的对象的集合,返回的是元素数组。
2.根据节点的层次关系访问节点:
1.节点属性:(节点:包含元素,文本,属性,注释)
属性名称 | 描述 |
---|---|
parentNode | 返回节点的父节点 |
chiildNodes | 返回子节点集合 |
fistChild | 返回节点的第一个子节点,最普遍的用法是访问该元素的文本信息 |
lastChild | 返回节点的最后一个子节点 |
nextSibing | 下一个节点 |
previousSibling | 上一个节点 |
2.element属性:(结点:标签元素)
属性名称 | 描述 |
---|---|
fistChildElementChild | 返回节点的第一个子节点,最普遍的用法是访问该元素的文本信息 |
lastElementChild | 返回节点的最后一个子节点 |
nextElementSibing | 下一个节点 |
previousElementSibing | 上一个节点 |
注意:在IE下支持 firstChild、lastChild、 previousibling、 nextSibling, 但是在FireFox 下由于,它会把标签之间的空格、换行等当成文本节点,因此为了准确地找到相应的元素,使用 firstElementChild、lastElementChild、 previousElementSibling、 nextElementSibling来兼容浏览器。
4.节点信息
- nodeName(节点名称)
- nodeValue(节点值)
- nodeType(节点类型)
节点类型:
节点类型 | NodeType值 |
---|---|
元素element | 1 |
属性attr | 2 |
文本text | 3 |
注释comments | 8 |
文档document | 9 |
操作节点
1.操作节点属性
HTML DOM提供了获取及改变节点属性值的标准方法:
- getAttribute(“属性名”);
getAttribute("属性名");
//用来获取属性的值
- setAttibute(“属性名”,“属性值”);
setAttibute("属性名","属性值");
//用来设置属性的值
2.创建和插入节点
创建的插入节点的方法:
名称 | 描述 |
---|---|
createElement(tagName) | 创建一个标签名为tagName的新元素节点 |
A.appendChild(B) | 把B节点追加至A节点的末尾 |
inserBefore(A,B) | 把A节点插入B节点之前 |
cloneNode(deep) | 复制某个指定的节点 |
- insertBefore(A,B)中有连个参数,A是必选项,表示新插入的节点,B是可选项,表示新节点被插入B节点的前面
- cloneNode(deep)中的参数deep为布尔值,若deep值为true,则复制该节点及该节点的所有子节点,若deep值为false,则只复制该节点和其属性
3.删除和替换节点:
名称 | 描述 |
---|---|
removeChild(node) | 删除指定的节点 |
replaceChild(newNode,oldNode) | 用其他的节点替换指定的节点 |
4.操作节点样式
在JavaScript中提供了两种动态改变样式属性的:
1):style属性
2):className属性
1.style属性:
//style属性的语法
HTML元素.style.样式属性="值";
//例如:
document.getElementById("titles").style.color="#ff0000"
style对象的常用属性:
style常用的事件:
名称 | 说明 |
---|---|
onload | 一个页面或一幅图像完成加载 |
onlick | 鼠标单击某个对象 |
onmouseover | 鼠标指导移到某个元素上 |
onkeydown | 某个键盘按键被按下 |
onchange | 域的内容被改变 |
2.className属性:
//className属性的语法:
HTML元素.className="样式名称"
4.获取元素样式
1.内联样式
//语法:
HTML元素.style.样式属性;
//只能拿内联样式
2.currentStyle对象(只读)
//语法:
HTML元素.currentStyle.样式属性;
//currentStyle属性是只读属性,局限于IE浏览器
3.getComputedStyle()方法
//语法:
document.defaultView.getComputedStyle(元素,null).属性;
//IE浏览器不支持