JavaScript与DOM小实例 -

zhang964761032

浏览: 116484 次
性别:
来自: 河北

最近访客更多访客>>

森林有情狼

644435563

清香白莲素还真

李黎宇

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JavaScript与DOM小实例

JavaScript 编程 HTML XML

                         JavaScript与DOM
一、什么是DOM
DOM（Document Object Model），文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。有一点很重要，DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言.
二、DOM树
DOM树顾名思义就像树一样，有一个主干派生出很多的枝干。DOM树的根统一为文档对象—document，DOM既然是树状结构，那么它们自然有如下的几种关系:
根结点(document)
父结点(parentNode)
子结点(childNodes)
兄弟结点   兄弟结点
      (sibling)   (sibling)。
我们再来看一下kHTML的结构：
<html>
<head>
<title> </title>
</head>
<body></body>
</html>
我们参照树的概念，画出该HTML文档结构的DOM树：
           html
       body head
        div        title
        文本        文本
从上面的图示可以看出
html有两个子结点，而html就是这两个子节点的父结点
head有节点title，title下有一个文本节点
body下有节点div，div下有一个文本节点
三、操作DOM树
详细代码如下：
<html>
<head>
    <title>Dom.html</title>
<script type="text/javascript">
window.onload = function(){
//通过docuemnt.documentElement获取根节点 ==>html
var zhwHtml = document.documentElement;
//打印节点名称 HTML 大写
alert(zhwHtml.nodeName);
//获取body标签节点
var zhwBody = document.body;
//打印BODY节点的名称
alert(zhwBody.nodeName);
//获取body的第一个子节点
var fH = zhwBody.firstChild;
alert(fH+"body的第一个子节点");
//获取body的最后一个子节点
var lH = zhwBody.lastChild;
alert(lH+"body的最后一个子节点");
//通过id获取<h1>
var ht = document.getElementById("zhw");
alert(ht.nodeName);
var text = ht.childNodes;
alert(text.length);
var txt = ht.firstChild;
alert(txt.nodeName);
alert(txt.nodeValue);
alert(ht.innerHTML);
alert(ht.innerText+"Text");

}
</script>
</head>

<body>
    <h1 id="zhw">你好</h1>
</body>
</html>
欢迎来访，如有问题请留言。

分享到：