js dom文档对象模型节点二[入门篇]

复制节点。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下的结果:

看出 true 和false的区别了吧。
true的话:是<p>hello world</p> 克隆。
false: 只克隆 <p></p> ,里面的文本不克隆。
和createElement()一样,克隆后的新节点 不会被自动插入到文档 。需要appendChild();
另外还有一个注意: 如果克隆后,id一样,不要忘记用 setAttribute(“id” , “ new_id “);
来 改变新的节点的ID。

插入节点。appendChild():
前面都用到几次了, 应该大概的用法都知道了。
具体解释就是:
给元素追加一个子节点, 新的节点 插入到 最后。
var container = document.createElement("p");
var t =  document.createTextNode("cssrain");
container.appendChild(t);
document.body.appendChild(container);

另外 appendChild()不仅可以用来追加新的元素,也可以你 挪动 文档中现有的元素。
看下面的例子:
<p id="msg">msg</p>
<p id="content">content</p>
<p id="aaa">aaaaaaaa</p>
<script>
 var mes = document.getElementById("msg");
 var container = document.getElementById("content");
 container.appendChild(mes);
</script>
//发现msg放到 content 后面去了 。
Js内部处理方式:
先把ID为msg的从文档中删除,然后再插入到content 后,作为content的最后一个节点 插入。
结果为:
<p id="content">
content
<p id="msg">msg</p>
</p>
<p id="aaa">aaaaaaaa</p>

插入节点。insertBefore():
顾名思义,就是把一个新的节点插入到目标节点的前面。
Element.insertBefore( newNode  ,  targerNode );
// 注意 第一个参数 是新的节点, 后面是目标节点(插入的位置)。
// 新节点是客人,肯定先服务他咯。。。 ^_^

第二个参数是可选,如果第二个参数不写,将默认添加到文档的最后,相当于appendChild();
我们看看insertBefore()怎么使用:
<div id="cssrian">
<p id="content">1111</p>
<div id="msg">msg<div>test</div></div>
<p id="content">222</p>
<p id="aaa">aaaaaaaa</p>
</div>
<script>
var msg = document.getElementById("msg");
var aaa = document.getElementById("aaa");
var test = document.getElementById("cssrian");
test.insertBefore( msg , aaa );
</script>
// 我们发现ID为msg的 插入到了  aaa的前面。
Js内部处理方式跟 appendChild()相似。也是:
先把ID为msg的从文档中删除,然后再插入到 aaa 前,作为aaa的前面一个节点 插入。

时间: 2024-08-02 07:24:01

js dom文档对象模型节点二[入门篇]的相关文章

js dom文档对象模型一[入门篇]

上篇文章纳闷的问题,将在这章和以后的几章里,慢慢搞定. 从今天起,开始学习DOM编程  让我们慢慢称为一名初级的js程序员. 然后往js匠人方向发展. 学习英文: Dom:文档对象模型.Document object model Bom:浏览器对象模型. 注:也可以叫窗口对象模型.(window object model.) API:应用编程接口. 注:DOM其实可以看作一种API. Node:节点. 注:节点分为:元素节点,属性节点,文本节点. 元素节点 包含 属性节点和文本节点. Dom树:

CSS命名规范二 入门篇

2.同一属性的缩写: 同一属性根据它的属性值也可以进行简写,如:  代码如下 复制代码 .search { background-color:#333; background-image:url(../images/icon.gif); background-repeat: no-repeat; background-position:50% 50%; } .search { background:#333 url(../images/icon.gif) no-repeat 50% 50%; }

MDN 文档对象模型 (DOM) - DOM概述

在本文章中 什么是 DOM? DOM 和 JavaScript 如何访问 DOM? 重要的数据类型 DOM 接口 接口及对象 DOM中核心接口 测试DOM API 本节提供了一个简单的概念性的DOM介绍:DOM是什么, 它是如何组织 HTML 及 XML 文档,你要如何访问它,这个API提供了那些参考信息和实例.  什么是 DOM? 文档对象模型 (DOM) 是HTML和XML文档的编程接口.它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和

JavaScript学习总结(一)——ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)

一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,主要用来给HTML增加动态功能. 几乎所有主流的语言都可以编译为JavaScript,进而能够在所有平台上的浏览器中执行,这也体现了JavaScript的强大性和在Web开发中的重要性.如Blade:一个Visual Studio扩展,可以将C#代码转

Nodejs学习笔记之入门篇_node.js

分享第一篇,关于 NodeJS -- Javascript 的常用知识以及如何从 Javascript 开发者过渡到 NodeJS 开发者(不会介绍具体的框架).在读本文前,希望你对 javascript 有一些初步的认识. Javascript 是一门原型模型的解释型语言.解释型将在后面的 NodeJS 里面讨论,原型链是 ES6 之前的 Javascript 的面向对象的实现方式之一,在 ES6 中支持的 class 增加了一种新的实现方式.在 Javascript 里面所有东西都是对象,包

什么是DOM(Document Object Model)文档对象模型_DOM

D:document 文档 浏览器加载的页面 DOM O:object 对象 页面及页面中的任何元素都是对象 M:module 模型 页面中的元素的组织形式 DOM被W3C组织设计为一种平台无关.语言无关的API,程序或脚本通过其动态访问.修改文档的内容.样式.结构. DOM是web 浏览器的运行规范,javascript借助DOM成就了其web标准语言的地位,在web领域实现了所谓"一次编写到处运行"的目标. 文档对象模型(Document Object Model,DOM)是一种用

【SSRS】入门篇(二) -- 建立数据源

原文:[SSRS]入门篇(二) -- 建立数据源 通过 [SSRS]入门篇(一) -- 创建SSRS项目 这篇,我们建立了一个SSRS项目: 接下来,我们以 AdventureWorks2012 示例数据库,讲下如何建立数据源:(AdventureWorks2012 下载)  1.解决方案资源管理器 ->右键选择共享数据源 ->添加新数据源: 2.在共享数据源属性窗口输入数据库名称:AdventureWorks2012:类型选择:Microsoft SQL Server:点击"编辑&

《HTML5 Canvas开发详解》——1.3 文档对象模型(DOM)和Canvas

1.3 文档对象模型(DOM)和Canvas 文档对象模型代表了在HTML页面上的所有对象.它是语言中立且平台中立的.它允许页面的内容和样式被Web浏览器渲染之后再次更新.可以通过JavaScript访问DOM,从20世纪90年代末以来它已经成为JavaScript.DHTML和CSS开发最重要的一部分. 画布元素本身可以通过DOM,在Web浏览器中经由Canvas 2D上下文访问,但是在Canvas中创建的单个图形元素是不能通过DOM访问的.正如本章前面讲到的,这是因为画布工作在即时模式,它并

jQuery 学习入门篇附实例代码_jquery

程序代码 window.onload = function(){ ... } . 访问HTML文档的元素,必须先载入文档对象模型(DOM).当window.onload函数执行的时候,说明所有东西已经载入,包括图像和横幅等等.要知道较大的图片下载速度会比较慢,因此用户必须等待大图片下载完毕才能看到window.onload()执行的代码效果,这样就花费了很长的等待时间,这不是我们想要的. 对于此,jquery提供了一个"ready"事件,你可以使用以下的代码片段: 程序代码 $(doc