Javascript入门学习第六篇 js DOM编程

  学习英文:

  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下的结果:

  看出 true 和false的区别了吧。

  true的话:是<p>hello world</p> 克隆。

  false: 只克隆 <p></p> ,里面的文本不克隆。

  和createElement()一样,克隆后的新节点 不会被自动插入到文档 。需要appendChild();

  另外还有一个注意: 如果克隆后,id一样,不要忘记用 setAttribute(“id” , “ new_id “);

  来 改变新的节点的ID。

  4,    插入节点。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>

  5,    插入节点。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的前面一个节点 插入。

  大家自己动动手写写,不然光看记忆性不好。

  好了,讲到这里,明天继续讲。

  今天讲了 用dom方式 创建节点,复制节点,插入节点。

  明天我们将讲 删除节点,替换节点,查找节点等。。。。。。

  如果还有不懂,可以google 搜索资料.