JavaScript与DOM小实例

最新推荐文章于 2024-09-12 15:08:36 发布

zhang964761032

最新推荐文章于 2024-09-12 15:08:36 发布

阅读量480

点赞数

文章标签： javascript html 文档 div 语言 function

本文链接：https://blog.csdn.net/zhang964761032/article/details/6520044

版权

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>
欢迎来访，如有问题请留言。

zhang964761032

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
JavaScript与DOM小实例

JavaScript与DOM一、什么是DOM DOM（Document Object Model），文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。有一点很重要，DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言.二、DOM树DOM树顾名思义就像树一样，有一个
复制链接

扫一扫