Javascript入门学习第六篇 js DOM编程第1/2页_Javascript教程-查字典教程网
Javascript入门学习第六篇 js DOM编程第1/2页
Javascript入门学习第六篇 js DOM编程第1/2页
发布时间:2016-12-30 来源:查字典编辑
摘要:学习英文:Dom:文档对象模型。DocumentobjectmodelBom:浏览器对象模型。注:也可以叫窗口对象模型。(windowobj...

学习英文:

Dom:文档对象模型。Documentobjectmodel

Bom:浏览器对象模型。

注:也可以叫窗口对象模型。(windowobjectmodel.)

API:应用编程接口。

注:DOM其实可以看作一种API。

Node:节点。

注:节点分为:元素节点,属性节点,文本节点。

元素节点包含属性节点和文本节点。

Dom树:

下面我们直接看到底怎么操作DOM。

1,创建元素节点。createElement():

<SCRIPTLANGUAGE="JavaScript">

vara=document.createElement("p");

alert("节点类型是:"+a.nodeType+",节点名称是:"+a.nodeName);

</SCRIPT>

输出;nodeType是1.a.nodeName是p;

所以它创建的是一个元素节点….你也许会想为什么文档中没发现节点p呢?

我们看下面例子:

<body>

</body>

<SCRIPTLANGUAGE="JavaScript">

vara=document.createElement("p");

document.body.appendChild(a);

</SCRIPT>

用firebug查看下,发现文档中已经有我们需要的结果了。

原来createElement()方法创建出来的新元素节点不会被自动添加到文档里,既然没添加到文档里,说明它还是一个游离的状态。如果想把它添加到文档里,可以使用appendChild()或者insertBefore()方法或者replaceChild()方法(后面介绍)。

2,创建文本节点。createTextNode():

varb=document.createTextNode("mydemo");

alert("节点类型是:"+b.nodeType+",节点名称是:"+b.nodeName);

输出;nodeType是3.a.nodeName是#text;

所以它创建的是一个文本节点….你也许又会想为什么文档中没发现这个文本节点呢?难道也和createElement()一样,需要使用appendChild()添加到文档里。

对的,你的想法非常对。

我们看下面例子:

<body>

</body>

<SCRIPTLANGUAGE="JavaScript">

varmes=document.createTextNode("helloworld");

varcontainer=document.createElement("p");

container.appendChild(mes);//先把文本节点添加到元素节点

document.body.appendChild(container);//再把元素节点添加到文档里

</SCRIPT>

3,复制节点。cloneNode(boolean):一个参数:

看一个例子:

<body>

</body>

<SCRIPTLANGUAGE="JavaScript">

varmes=document.createTextNode("helloworld");

varcontainer=document.createElement("p");

container.appendChild(mes);

document.body.appendChild(container);

varnewpara=container.cloneNode(true);//true和false的区别

document.body.appendChild(newpara);

varnewpara=container.cloneNode(false);//true和false的区别

document.body.appendChild(newpara);

</SCRIPT>

看下firebug下的结果:

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

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类