Javascript入门学习第六篇 js DOM编程第1/2页

学习英文：
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下的结果：

当前1/2页 12下一页阅读全文

赞 (0)

相关推荐

  • 高性能JavaScript DOM编程（1）

    我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵.有个贴切的比喻,把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间用收费桥梁连接,ECMAScript每次访问DOM,都要途径这座桥,并交纳"过桥费",访问DOM的次数越多,费用也就越高.因此,推荐的做法是尽量减少过桥的次数,努力待在ECMAScript岛上.我们不可能不用DOM的接口,那么,怎样才能提高程序的效率? 1.DOM访问与修改 访问DOM元素是

  • 实现JavaScript高性能的数据存储

    1.JavaScript中四种基本数据存取位置:字面量,本地变量,数组元素,对象成员. 一般来说:[字面量,局部变量]运行速度>[数组,对象成员] 2.内部属性包含了一个函数被创建的作用域中对象的集合.这个集合被称为作用域链. 3.执行函数->创建执行环境->创建活动对象(即函数运行时变量对象). 所以多次调用同一个函数会导致创建多个执行环境. 4.函数执行过程 每遇到一个变量都会经历一次标识符解析过程,从哪里获取或存储数据.该过程搜索执行环境的作用域链.正是这种搜索过程影响了性能. 5

  • Ajax与用户交互的JSON数据存储格式

    数据存储是JavaScript的核心功能,这是一个在学习前期的一个容易让人迷惑的问题.它并不是那种像页面滑动.幻灯片展示.淡入淡出等吸引人眼球的特效.适当的存放好数据,就有利于我们组织起结构,又能使应用程序稍后访问这些内容更加容易.JavaScript提供了各种不同的数据存储方式,它是一个从基本到未来走向的演化模式: XML代表可扩展标记语言,是一种比较灵活的数据格式,很多应用程序存储数据都喜欢用到它,结构像HTML,也包含元素,标签以及属性,模型都一样.它的一大优势在于它是一种可扩展的格式,你

  • 读JavaScript DOM编程艺术笔记

    1.获得当前元素的下一个元素 复制代码 代码如下: function getNextElement(node){ if(node.nodeType==1){ return node; } if(node.nextSibling){ return getNextElement(node.nextSibling); } return null; }; 2.外部引入的js,添加页面加载方法 复制代码 代码如下: function addLoadEvent(func){ var oldonload=wi

  • JavaScript数据存储 Cookie篇

    1.什么是cookie?     答:cookie是用于在客户端存储会话信息的. 2.cookie的组成部分?     ①名称:一个唯一确定cookie 的名称.建议区分大小写.cookie 的名称必须是经过URL 编码的.     ②值:储存在cookie 中的字符串值.值必须被URL 编码.     ③域:cookie 对于哪个域是有效的.所有向该域发送的请求中都会包含这个cookie 信息.这个值可以包含子域(subdomain,如www.wrox.com),也可以不包含它(如.wrox.

  • 总结JavaScript三种数据存储方式之间的区别

    sessionStorage .localStorage 和 cookie 之间的共同点: 都是保存在浏览器端,且同源的. sessionStorage .localStorage 和 cookie 之间的区别: cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递.而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存.cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下. 存

  • js 数据存储和DOM编程

    数据存储 ·在javascript中,数据存储的位置会对代码整体性能产生重大的影响. ·数据存储共有4种方式:字面量.变量.数组.对象成员. ·要理解变量的访问速度,就要理解作用域.由于局部变量处于作用域的起始位置,因此访问速度比访问跨域作用域变量(即除起始位置之外的外层作用域变量)更快.即变量处在作用域的位置越深,访问速度越慢.这也就说明,访问全局变量的速度是最慢的. 总的来说,字面量和局部变量的访问速度快于数组和对象成员的访问速度. 因此,常见的一些提高数据访问速度的方法有: ①避免使用wi

  • javascript DOM编程实例(智播客学习)

    并给我们讲解了很多关于如何去学习DOM的方法,觉得真的是受益匪浅啊.下面就几个我觉得比较好的例子和大家分享一下. 1.二级连动下拉菜单(一级是省份,二级是城市,要求一级选中省份,二级城市对应出现) 步骤:1)基本框架(HTML):两个复选框,而第二个复选框里面开始应该是没有选项的,注意第一个下拉框会作为事件源,通过 onchange方法激发JavaScript中的功能实现部分. 复制代码 代码如下: <xmp> <select id="province" onchan

  • Javascript入门学习第六篇 js DOM编程第1/2页

    学习英文: Dom:文档对象模型.Document object model Bom:浏览器对象模型. 注:也可以叫窗口对象模型.(window object model.) API:应用编程接口. 注:DOM其实可以看作一种API. Node:节点. 注:节点分为:元素节点,属性节点,文本节点. 元素节点 包含 属性节点和文本节点. Dom树: 下面我们直接看 到底怎么操作DOM. 1,    创建元素节点.createElement(): <SCRIPT LANGUAGE="JavaS

  • Javascript入门学习第八篇 js dom节点属性说明第1/2页

    今天我们讲DOM属性. 前面其实我们已经碰过DOM属性了. 比如: nodeName,nodeType-..今天我们详细的讲解下. 1,nodeName属性  : 节点的名字. 如果节点是元素节点,那么返回这个元素的名字.此时,相当于tagName属性. 比如: <p>aaaa</p>  : 则返回 p ; 如果是属性节点,nodeName将返回这个属性的名字. 如果是文本节点,nodeName将返回一个#text的字符串. 另外我要说的是: nodeName属性是一个只读属性,不

  • Javascript入门学习第七篇 js dom实例操作第1/2页

    直接从方法说起: 1,    删除节点.removeChild(): <body>  <div id="cssrain">  <div id="a">a </div>  <div id="b">b </div>  <div id="c">c </div>  </div>  </body> <script

  • Javascript入门学习第四篇 js对象和数组第1/2页

    比较难哦.做好心里准备吧...... 深呼吸... 1 , for  /  in : 一种遍历(枚举)对象属性的方法,可以循环我们呢事先不知道的属性. 它可以枚举处用户定义的所有属性,但却不能枚举出某些预定义的属性和方法. 不能枚举的属性通常是继承的属性 删除一个对象的属性:  delete book.width ; 从对象中移除了属性,在删除之后,用for/in将不会枚举该属性,并且用width in book 也检测不到该属性. for/in 的另一个重要的用途就是跟关联数组一起使用:(如果

  • Javascript入门学习第五篇 js函数第1/2页

    1 ,函数: function是一个定义一次 却可以多次调用的js代码. 当一个函数被一个对象调用时,那么这个函数就叫做这个对象的方法. function cssrain( x , y) {  //code } 解释: cssrain  :  为函数名: ( )     :   为 运算符: x ,  y  :   为 参数: 2 ,函数的返回值: function a(x){     document.write(x); } function b(y){    document.write(y

  • Javascript入门学习第三篇 js运算第1/2页

    1, 表达式: 最简单的表达式:直接量或者变量名.var a =1; 直接量表达式的值:本身. 变量表达式的值:该变量所存放或引用的值. 2 , 运算符: 一元运算符: 比如  - 3  二元运算符: 比如  3+4  三元运算符: 比如  ?   : 新手常遇到的问题: 递增运算符: 比如: i  =  1 ; j  = ++ i ; // 前递增运算,即先对运算数进行递增,然后再去计算. //输出   i  =2;    j=2 ; i  =  1 ; j  =  i ++; // 后递增运

  • Javascript入门学习资料收集整理篇

    Javascript入门学习第一篇 js基础Javascript入门学习第二篇 js类型Javascript入门学习第三篇 js运算Javascript入门学习第四篇 js对象和数组Javascript入门学习第五篇 js函数Javascript入门学习第六篇 js DOM编程Javascript入门学习第七篇 js dom实例操作Javascript入门学习第八篇 js dom节点属性说明Javascript入门学习第九篇 Javascript DOM 总结jQuery基础教程笔记适合js新手

  • JavaScript事件学习小结(五）js中事件类型之鼠标事件

    JavaScript事件学习小结(五）js中事件类型之鼠标事件

    相关阅读: JavaScript事件学习小结(五)js中事件类型之鼠标事件 http://www.jb51.net/article/86259.htm JavaScript事件学习小结(一)事件流 http://www.jb51.net/article/86261.htm javaScript事件学习小结(四)event的公共成员(属性和方法) http://www.jb51.net/article/86262.htm JavaScript事件学习小结(二)js事件处理程序 http://www

  • Javascript入门学习第一篇 js基础第1/2页

    Javascript学习第一篇 js基础 1 , javascript字符集: javascript采用的是Unicode字符集编码. 为什么要采用这个编码呢? 原因很简单,16位的Unicode编码可以表示地球人的任何书面语言.这是语言 国际化的一个重要特征.(大家也许见过用中文写脚本,比如:function 我的函数() {}  ); Javascript中每个字符都是用2个字节表示的.(因为是16位编码) 2 ,大小写敏感: js是一种区分大小写的语言. 注意下:以前我也犯过的错误. HT

  • JavaScript入门学习书籍推荐

    在 JavaScript 方面,自己不是什么专家,也不是什么高手,但自己一路走来,JavaScript 从迷茫到认识,对于 JavaScript 书籍的认识或许还有些借鉴价值. 入门推荐首选书籍:<JavaScript DOM 编程艺术 > 当初读了不下 4 遍,书内容简单,易学,上手快,编程思想严谨.好的入门书,对你未来的编程都会有着深远的影响.此本书不辜负这个历史使命. 更详细的评论可以看 Realazy 在豆瓣上的评论在 豆瓣 上的评论<通往终点的过程与终点本身同样重要> 基

随机推荐