您的位置：首页 > 其它

关于DOM的节点导航

2015-10-10 10:59 363 查看

前言：
HTML DOM 和 XML DOM的关系
XML DOM 定义了访问和处理 XML 文档的标准方法
HTML文档格式符合XML语法标准，所以可以使用XML DOM API
HTML DOM 定义了针对 HTML文档的对象，可以说是一套更加适用于 JavaScript 技术开发的API
HTML DOM是对XML DOM的扩展
进行 JavaScript DOM开发可以同时使用 XML DOM和 HTML DOM

注：以下我们通过XML DOM 的节点进行讲解

节点的分类
整个文档是一个文档节点
每个 XML 标签是一个元素节点
包含在 XML 元素中的文本是文本节点
每一个 XML 属性是一个属性节点
注释属于注释节点

注：
parentNode : 父节点

childNodes ：所有的子标签

firstChild ：第一个儿子

lastChild 　：最后一个儿子

nextSibling ：下一个兄弟节点

previousSibling ：　上一个兄弟节点

代码示例如下：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>节点导航</title>
</head>
<body>
<table>
<tr>
<td>刘德华</td>
<td>男</td>
<td>50</td>
</tr>
<tr>
<td>成龙</td>
<td>男</td>
<td>60</td>
</tr>
<tr>
<td>小龙女</td>
<td>女</td>
<td>18</td>
</tr>
</table>
<script type="text/javascript">

//示例： 拿到成龙的年龄

//拿到根节点
var root = document.documentElement ;
//alert(root.nodeName) ;
//拿到body节点
var body = root.lastChild ;
//alert(body.nodeName) ;
//拿到table节点
var table = body.firstChild ;
//拿到tbody节点
var tbody = table.firstChild ;   //这个节点是浏览器给的，所以在写节点时，对照浏览器给的节点树去写(按F12)
//拿到成龙的年龄
var age = tbody.firstChild.nextSibling.lastChild.firstChild.nodeValue ;
alert(age);
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航