这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
Dom 并非一种编程语言,Dom 只是提供了一系列的接口,利用 Dom 的这些接口可以很方便的读取,修改,删除 html 和 XML 文件中的标签元素和文本内容.在这里我们侧重于讲解 Dom 对 Html 文件的操作.
那么 Dom 是如何读取和管理 Html 文件的呢?首先你必须要了解 html 的源码结构.看图
如果你有学过或写过 Html,那么你会对上图一目了然.我想要说明的就是 Html 的源码结构是有层次的,而且标签与杯签之间还存在着父子,或相邻的关系.上图不难看出 HTML 这个标签是最顶级的.最上层的.也可以理解成 html 文件的根.其次是 Head 与 Body 标签.这两个标签是相邻的.也可以理解成兄弟关系.但他们都属于 html 的子标签或称为子元素.然后 Body 标签内包含了 Table,Div,Div.这三个标签你可以理解为 Body 的子标签或子元素.Body 为父他们为子.Head 所含的标签也是同理.另外第一个 div 内包含了另一个 div.第二个 div 内包含了一些文本内容.他们的关系也是父子关系.Dom 正是利用了 Html 源码的这种关系结构.而巧妙的在你的 html 源码中行走自如.犹如一位武林高手一般.尽情地施展他的"凌波微步".看下面的代码.代码结构与上图是吻合的.不同的是多了几个按扭来执行一些 dom 的指令操作.运行以后你便走进了 Dom 的神秘与精彩世界!!!
[Ctrl+A 全选 注: 如需引入外部 Js 需刷新才能执行]
- <html>
- <head>
- <title>
- 这是网页的标题
- </title>
- <link />
- <meta />
- <body>
- <table border="1">
- <table>
- <div>
- <div>
- </div>
- </div>
- <div>
- 文本内容
- </div>
- <input type="button" value="弹出html标签" onclick="alert_HTML()" />
- <input type="button" value="弹出body标签" onclick="alert_Body()" />
- <input type="button" value="弹出head标签" onclick="alert_Head()" />
- <input type="button" value="修改网页标题" onclick="up_Title()" />
- <input type="button" value="更改表格" onclick="up_Table()" />
- <input type="button" value="获取第一个div和他的子元素" onclick="get_Div()" />
- <input type="button" value="更改第二个div中的文本内容" onclick="up_div_text()" />
- </body>
- </html>
- <script type="text/javascript">
- function alert_HTML() { //弹出html标签函数
- var html = document.documentElement;
- alert(html.tagName);
- }
- function alert_Body() { //弹出body标签函数
- var body = document.body;
- alert(body.tagName);
- }
- function alert_Head() { //弹出head标签函数,
- var html = document.documentElement;
- //head是html标签中的第一个子元素
- //childNodes可以获取某一标签内的所有子元素
- var head = html.childNodes[0].tagName;
- alert(head);
- }
- function up_Title() {
- //注意title标签内的"这是网页的标题"将被改变.
- document.title = "web圈提提供的Dom图解入门教程";
- }
- function up_Table() { //为表格添加行,添加列并写入文本内容
- var Table = document.getElementsByTagName("table")[0]; //获取网页内第一个表格
- var Tr = Table.insertRow(0); //为表格添加一行
- var Td = Tr.insertCell(0); //为新建的行,添加一列
- Td.innerHTML = "我是表格中的文本"; //利用innerHTML属性向td写入文本
- }
- function get_Div() { //获取第一个div和他的孩子
- var div = document.getElementsByTagName("div")[0];
- alert("我是第一个" + div.tagName);
- var child_div = div.childNodes[0]; //虽然是子div,但是按解析顺序他在该页内是第二个出现的div,
- alert("我是第一个div的子元素.我也是" + child_div.tagName);
- }
- function up_div_text() {
- var div = document.getElementsByTagName("div")[2]; //其实如果按解析顺序该div在本页应该是第3个,
- div.innerHTML = "欢迎阅读web圈提供的Dom图解入门教程.www.jb51.net 作者:康董";
- }
- </script>
上面演示的代码实例.略有繁琐.并非是 Dom 最优秀的使用方法.但足以让你了解 Dom 是怎样工作的.
下面将演示 Dom 迅速访问某个标签的方法.可以让你在成千上万个 html 标签中迅速找到你想的某个标签.比如你可以为你的 html 标签添加一个 ID 属性.在 Dom 中有一个 getElementById 方法.该方法可以根据 html 标签的 ID 属性值,迅速找到这个标签.然后对其进行更改或其他操作.
下面的代码我只为 table 和第一个 div 添加一个 id 属性值.利用 getElementByid 迅速向 able 和第一个 div 的子 div 添加内容
[Ctrl+A 全选 注: 如需引入外部 Js 需刷新才能执行]
- <html>
- <head>
- <title>
- 这是网页的标题
- </title>
- <link />
- <meta />
- <body>
- <table id="a" border="1">
- <table>
- <div>
- <div>
- </div>
- </div>
- <div>
- 文本内容
- </div>
- <input type="button" value="更改table" onclick="up_table()" />
- <input type="button" value="为第一个div的子div写入文本" onclick="up_div()" />
- </body>
- </html>
- <script type="text/javascript">
- function up_table() { //更改table函数
- var Table = document.getElementById("a"); //根据id获取标签元素
- var Tr = Table.insertRow(0);
- var Td = Tr.insertCell(0);
- Td.innerHTML = "欢迎光临Web圈,网址:www.web666.net";
- }
- function up_div() { //为第一个div的子div添加文本内容
- var div = document.getElementById("b");
- div.childNodes[0].innerHTML = "我是子div,我被写入文本了";
- }
- </script>
上面的两个例子中分别使用了 Dom 的以下方法:
document:对当前整个 Html 网页的引用
documentElement:获取 html 和 xml 文件中的根元素.在 html 文件中总是返回 Html 标签.在 xml 文件中总是返回最顶层的那个元素
getElementsByTagName:根据指定的标签名称,来获取网页中所有相同的标签元素.如:table, 或 div.则会找出网页中所有 table 元素,或所有 div 元素.以一个类似数组的方式来返回对这些元素的引用.
getElementById:根据指定的标签 id 值.来寻找标签元素.并返回对该标签的引用
childNodes:获取某个标签下所有的子标签元素,也就是我所说的孩子元素.并以一个类似数组的方式来返回对所有子元素的引用
insertRow:为表格增加一行
insertCell:为表格的某行增加一列
该入门教程只讲解了 Dom 中的一部份知识,请了解更多关于 Dom 的内容
作者:康董 出自:Www.Web666.Net
来源: http://www.phperz.com/article/17/0721/284392.html