Javascript DOM
2015-09-15 21:58
627 查看
什么是 DOM
DOM 是 文档对象模型(Document Object Model)的简称,它的基本思想是把结构化文档(比如 HTML 和 XML)解析成一系列的节点,再由这些节点组成一个树状结构(DOM Tree)。所有的节点和最终的树状结构,都有规范的对外接口,以达到使用编程语言操作文档的目的,所以,DOM 可以理解成文档(HTML 文档、XML 文档)的编程接口。严格地说,DOM 不属于 JavaScript,但是操作 DOM 是 JavaScript 最常见的任务,而 JavaScript 也是最常用于 DOM 操作的语言,本章介绍的就是 JavaScript 对 DOM 标准的实现和用法。
节点
DOM 的最小组成单位叫做 节点(node),一个文档的树形结构(DOM 树),就是由各种不同类型的节点组成。对于 HTML 文档,节点主要有以下六种类型:
节点 | 名称 | 含义 |
---|---|---|
Document | 文档节点 | 整个文档(window.document) |
DocumentType | 文档类型节点 | 文档的类型 |
Element | 元素节点 | HTML 元素(比如<head>、<body>等) |
Attribute | 属性节点 | HTML 元素的属性(比如 class="right") |
Text | 文本节点 | HTML 文档中出现的文本 |
DocumentFragment | 文档碎片节点 | 文档的片段 |
选取文档元素
通过 ID 选取元素
我们可以使用方法 getElementByID() 通过元素的 ID 而选取元素,并对其做操作,比如:<html> <body> <div id="my_div"></div> <script> document.getElementById("my_div").style.height="100px"; // 设置 my_div 高度为 100px document.getElementById("my_div").style.background="red"; // 设置 my_div 颜色为 红色 </script> </body> </html>
通过 getElementByID() 设置了 ID 为 my_div 的一个 div 标签的高度(100px)和颜色(red),效果:
通过名字(Name)或标签名(TagName)选取元素
除了通过 ID 选择元素,我们还可以使用 getElementByName() 方法或者 getElementsByTagName() 方法找到元素,不过如果有多个同类型标签,那我们需要以下标来确认:<html> <body> <input type="text" /> <input type="text" /> <script> document.getElementsByTagName("input")[0].value="hello"; // 下标为 [0] 表示选取第 1 个 input 标签 document.getElementsByTagName("input")[1].value="shiyanlou"; // 下标为 [1] 表示选取第 2 个 input 标签 </script> </body> </html>
效果如图:
节点、属性操作和文档遍历
1. 查询和设置元素的属性
可以通过 getAttribute() 和 setAttribute() 查询和设置元素的属性:<html> <head> <style> .class_1 { height:100px; width:100px; background:red; } .class_2 { height:100px; width:100px; background:blue; } </style> </head> <body> <div id="div_1" class="class_1"></div> <br/> <a>before:</a> <script> document.write(document.getElementById("div_1").getAttribute("class")); // 查询 div_1 的属性 </script> <br/> <a>after:</a> <script> document.getElementById("div_1").setAttribute("class","class_2"); // 修改 div_1 的属性为 class_2 document.write(document.getElementById("div_1").getAttribute("class")); // 再次查询 div_1 的属性 </script> </body> </html>
代码可见,一开始 div_1 的属性为 class_1,我们通过getAttribute() 方法可以查看到该结果;
然后我们使用 setAttribute() 方法将 div_1 的属性设置为 class_2 ,然后再次使用 getAttribute() 方法查询,可见属性已经变为 class_2 ,结果如图:
父节点
通过 parentNode() 方法可以查看并操作一个节点的父节点,示例:找到 id 为 demo 的元素的父节点,并输出其 class 的名称:<html> <body> <div class="demo-parent"> <div id="demo"> </div> </div> <script> document.write(document.getElementById("demo").parentNode.getAttribute("class")); </script> </body> </html>
创建和插入节点
在了解 JavaScript 之前,可能会以为一个 HTML 页面被写出来是什么样,那它就固定了是什么样子。但是 JavaScript 可以动态地在页面中创建并插入节点,这便需要用到 createElement()、appendChild() 方法,它们的作用分别是创建节点和插入节点。
比如:创建一个 div 并为其设置高度(100px)和背景色(red),并追加到 body 后面:
<html> <body> <div style="background:#00F; height:100px"></div> <script> var mydiv = document.createElement("div"); mydiv.style.height = "100px"; mydiv.style.background = "red"; document.getElementsByTagName("body")[0].appendChild(mydiv); </script> </body> </html>
删除节点
除了创建,我们还可以删除一个节点,通过 removeChild() 方法:<html> <head> <body> <div> <div id="div_red" style="background:#F00; height:100px"></div> <div id="div_blue" style="background:#00F; height:100px"></div> </div> <script> function remove_red(){ var obj = document.getElementById("div_red"); obj.parentNode.removeChild(obj); } </script> <button onclick="remove_red()">remove red div</button> </body> </html>
点击按钮 “remove red div” 便可以删去页面上红色的部分:
相关文章推荐
- JavaScript 对象
- JS设计模式之接口
- 浅谈——JSP九大内置对象与四大作用域
- H5 应用程序返回button的js代码设计,设计仿stack
- JavaScript 事件
- js中使用正则表达式(一)创建正则表达式的方式:正则对象方式和正则字面量方式
- jsp九大内置对象
- JSON数据的解析
- servlet&jsp的设计模式
- 《项目经验》--后台一般处理程序向前台JS文件传递JSON,JS解析JSON,将数据显示在界面--显示在DropDownList 或 显示在动态创建的table中
- 浅谈JS闭包
- jsp中session的生命周期
- jsp的4个作用域
- javascript中的function
- jsp的九大内置对象
- javascript判断非空
- JSP之Session生命周期
- Js按键调到文本框
- JSP的四大作用域
- 自己的JS框架--Amy框架。