手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >Javascript入门学习第六篇 js DOM编程第1/2页
Javascript入门学习第六篇 js DOM编程第1/2页
摘要:学习英文: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入门学习第六篇 js DOM编程第1/2页】相关文章:

怎么用javascript进行拖拽第1/2页

简单介绍JavaScript的变量和数据类型

理解javascript定时器中的单线程

JavaScript正则表达式之multiline属性的应用

使用JavaScript刷新网页的方法

javascript删除元素节点removeChild()用法实例

在JavaScript中处理时间之setMinutes()方法的使用

JavaScript数组去重的3种方法和代码实例

JavaScript中的parse()方法使用简介

Javascript 不能释放内存.

精品推荐
分类导航