Javascript入门学习第六篇 js DOM编程第1/2页
更新时间：2008年07月06日 10:01:30 作者：
上篇文章纳闷的问题，将在这章和以后的几章里，慢慢搞定。
从今天起，开始学习DOM编程 让我们慢慢称为一名初级的js程序员。
然后往js匠人方向发展。
学习英文：
Dom：文档对象模型。Document object model
Bom：浏览器对象模型。
注：也可以叫窗口对象模型。（window object model.）
API：应用编程接口。
注：DOM其实可以看作一种API。
Node：节点。
注：节点分为：元素节点，属性节点，文本节点。
元素节点 包含 属性节点和文本节点。
Dom树：
下面我们直接看 到底怎么操作DOM。
1， 创建元素节点。createElement():
<SCRIPT LANGUAGE="JavaScript">
var a = document.createElement("p");
alert( "节点类型是 ： " +a.nodeType + " , 节点名称是： " + a.nodeName);
</SCRIPT>
输出 ; nodeType 是 1 . a.nodeName 是 p ;
所以它创建的是一个元素节点 ….你也许会想 为什么文档中没发现 节点 p呢？
我们看下面例子：
<body>
</body>
<SCRIPT LANGUAGE="JavaScript">
var a = document.createElement("p");
document.body.appendChild(a);
</SCRIPT>
用firebug查看下，发现文档中已经 有我们需要的结果了。
原来createElement()方法创建出来的新元素节点不会被自动添加到文档里，既然没添加到文档里，说明它还是一个游离的状态。如果想把它添加到文档里，可以使用 appendChild()或者insertBefore()方法或者replaceChild()方法（后面介绍）。
2，创建文本节点。createTextNode():
var b = document.createTextNode("my demo");
alert( "节点类型是 ： " +b.nodeType + " , 节点名称是： " + b.nodeName);
输出 ; nodeType 是 3 . a.nodeName 是 ＃text ;
所以它创建的是一个文本节点 ….你也许又会想 为什么文档中没发现 这个文本节点 呢？难道也和createElement()一样，需要使用appendChild（）添加到文档里。
对的，你的想法非常对。
我们看下面例子：
<body>
</body>
<SCRIPT LANGUAGE="JavaScript">
var mes = document.createTextNode("hello world");
var container = document.createElement("p");
container.appendChild(mes);//先把文本节点添加到 元素节点
document.body.appendChild(container);//再把元素节点添加到 文档里
</SCRIPT>
3， 复制节点。cloneNode(boolean) :一个参数：
看一个例子：
<body>
</body>
<SCRIPT LANGUAGE="JavaScript">
var mes = document.createTextNode("hello world");
var container = document.createElement("p");
container.appendChild(mes);
document.body.appendChild(container);
var newpara = container.cloneNode(true);//true和false的区别
document.body.appendChild(newpara );
var newpara = container.cloneNode(false);//true和false的区别
document.body.appendChild(newpara );
</SCRIPT>
看下firebug下的结果：
相关文章
这篇文章主要简单介绍了JavaScript函数节流的相关知识，有相同需求的小伙伴们可以仔细阅读下2014-12-12
在添加网页到收藏夹之后会看到一个漂亮的图标，很好奇是怎么实现的呢？下面小编就给大家讲解下网页收藏夹显示ICO图标（代码少），有需要的小伙伴可以来参考下2015-08-08
JavaScript有许多小窍门来使编程更加容易。其中之一就是eval()函数，这个函数可以把一个字符串当作一个JavaScript表达式一样去执行它。以下是它的说明2007-04-04
javascript 数据类型转换(parseInt,parseFloat)
Number、String函数是特殊的函数，在JS引擎中，他会自动判断是作为构造函数调用还是普通调用，所以既可以使用new关键字，也可以作为函数直接调用。2010-07-07
这篇文章介绍了删除Javascript Object中间的key的方法，然后主要详谈了delete的用法，非常的详尽，给小伙伴们参考下2014-11-11
这篇文章主要介绍了javascript、php关键字搜索函数的使用方法的相关资料,需要的朋友可以参考下2018-05-05
这篇文章主要介绍了JavaScript显式数据类型转换，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要介绍了Javascript实现的SHA-256加密算法,以完整实例形式分析了JavaScript实现SHA-256加密的具体步骤与相关技巧,需要的朋友可以参考下2016-02-02
这篇文章主要介绍了JavaScript构造函数及new运算符，通过认识new运算符，代码解读，重点解析，new存在的意义，总结等全面介绍了知识点，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。2017-08-08
本文主要介绍AngularJS 指令,这里详细介绍AngularJS 指令知识并提供实例代码,有需要的小伙伴可以参考下2016-07-07
最新评论