javascript 与 DOM

menjoy

浏览: 422884 次
性别:

最近访客更多访客>>

Jackiezmb

zkhiker

hy1988

默默的看雨下

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript&Html

JavaScript J#脚本 HTML 浏览器

主要概述一些有用的基础的DOM的方法以及怎样用使用javascript使用它们。

可以实现比如动态地新建控制移动HTML元素。

Document 对象的常用方法

1、getElementById(id)

通过元素的ID访问元素，这是DOM一个基础的访问页面元素的方法，我们要经常用到它.

例如下面的例子，我们可以同DIV的ID迅速的访问到它，而不必通过DOM层层遍历，

Just for testing;

Just for testing;
<script>
var div=document.getElementById(‘divid’);
alert(div.nodeName);
</script>

注意使用这个函数时如果元素的ID不是唯一的，那么会获得第一个符合条件的元素。
在IE6中如果input、checkbox,radio. 等元素name匹配指定的ID，也会被访问到
例如下面的例子中，获得的元素是input：

    Just for testing;
<script>
   var div=document.getElementById('divid');
   alert(div.nodeName);
</script>

2、getElementsByName(name)
返回名字是name的元素数组，在IE6中元素ID匹配这个名字的话，这个元素也将包括在内，而且getElementsByName()仅用于象input,radio,checkbox等元素对象。
象下面例子中georges数组的长度应该是0。

hello

DOM Element 常用方法
1、appendChild(node)
向当前节点对象的追加节点。经常用于给页面动态的添加内容。

例如下面给div添加一个文本节点：

var newdiv=document.createElement("div")

var newtext=document.createTextNode("A new div")

newdiv.appendChild(newtext)

document.getElementById("test").appendChild(newdiv)

</script>

上面的例子中给DIV添加文本，也可以用newdiv.innerHTML=”A new div”实现，

不过innerHTML不属于DOM

2、removeChild(childreference)
移除当前节点的子节点，返回被移除的节点。这个被移除的节点可以被插入document树中别的地方

A child

var childnode=document.getElementById("child")

var removednode=document.getElementById("father").removeChild(childnode)

</script>

3、cloneNode(deepBoolean)

复制并返回当前节点的复制节点，这个复制得到的节点是一个孤立的节点，不在document树中。复制原来节点的属性值，包括ID属性，所以在把这个新节点加到document之前，一定要修改ID属性，以便使它保持唯一。当然如果ID的唯一性不重要可以不做处理。

这个方法支持一个布尔参数，当deepBoolean设置true时，复制当前节点的所有子节点，包括该节点内的文本。

11111

p=document.getElementById("mypara")

pclone = p.cloneNode(true);

p.parentNode.appendChild(pclone);

span

var oldel=document.getElementById("innerspan");

var newel=document.createElement("p");

var text=document.createTextNode(“ppppp”);

newel.appendChild(text);

document.getElementById("adiv").replaceChild(newel, oldel);

</script>
5、insertBefore(newElement, targetElement)
给当前节点插入一个新节点，如果targetElement被设置为null，那新节点被当作最后一个子节点插入，否则那新节点应该被插入targetElement之前的最近位置。

熊掌我所欲也!

var lovespan=document.getElementById("lovespan")

var newspan=document.createElement("span")

var newspanref=document.body.insertBefore(newspan, lovespan)

newspanref.innerHTML="鱼与";

</script>

function wow() {

alert("我好象没有点鼠标啊");

}

</script>

hhh

var div = document.getElementById("test");

div.click();

</script>

DOM Element的属性:（下面是常用的。IE5.0以上,mozllia都支持的）

1、childeNodes 返回所有子节点对象,

例如

一个和尚有水喝。

var msg=””

var mylist=document.getElementById("mylist")

for (i=0; i<mylist.childnodes.length; i++){<="" font="">

var tr=mylist.childNodes[i];

for(j=0;j<tr.childnodes[j].length; j++)="" {<="" span="">

var td=tr.childNodes[j];

msg+=td.innerText;

}

alert(msg);

</script>

2、innerHTML
这是一个事实上的标准，不属于w3c DOM，但是几乎所有支持DOM的浏览器，都支持这个属性。通过这个属性我们很容易修改一个元素的HTML。

新人类，什么？！

window.onload=function(){

document.getElementsByTagName("p")[0].innerHTML="新新人类，什么？！"

}

</script>

3、style
返回一个元素的style对象的引用，通过它我们可以获得并修改每个单独的样式。

例如下面的脚本可以修改一个元素的背景色

document.getElementById("test").style.backgroundColor="yellow"

4、firstChild    返回第一个子节点
5、lastChild     返回最后一个子节点
6、parentNode   返回父节点的对象。
7、nextSibling   返回下一个兄弟节点的对象
8、previousSibling 返回前一个兄弟节点的对象
9、nodeName 返回节点的HTML标记名称，使用英文的大写字母，如P, FONT

例如

ddd

if (document.getElementById("test").nodeName=="DIV")

alert("This is a DIV");

</script>

第一个例子：
使用DOM1.0 的javascript动态地创建一个HTML table。

function start() {

//获得body的引用

var mybody=document.getElementsByTagName("body").item(0);

//创建一个元素

mytable = document.createElement("TABLE");

//创建一个元素

mytablebody = document.createElement("TBODY");

// 创建行列

for(j=0;j<3;j++) {

//创建一个元素

mycurrent_row=document.createElement("TR");

for(i=0;i<3;i++) {

//创建一个元素

mycurrent_cell=document.createElement("TD");

//创建一个文本元素

currenttext=document.createTextNode("cell is row "+j+", column "+i);

//把新的文本元素添加到单元TD上

mycurrent_cell.appendChild(currenttext);

// appends the cell TD into the row TR

//把单元TD添加到行TR上
mycurrent_row.appendChild(mycurrent_cell);

}

//把行TR添加到TBODY上

mytablebody.appendChild(mycurrent_row);

}

// 把 TBODY 添加到 TABLE

mytable.appendChild(mytablebody);

// 把 TABLE 添加到 BODY

mybody.appendChild(mytable);

// 把mytable的border 属性设置为2

mytable.setAttribute("border","2");

}

</script>

接着，使用一个循环创建TR元素，它们应该是TBODY元素的子元素。

对于每一个TR，我们使用一个循环创建TD元素，它们是TR的子元素。

对于每一个TD，我们创建一个文本节点元素

现在，我们创建好了这些TABLE, TBODY, TR, TD还有文本元素，但是它们之间的层级

关系并没有建立起来。然后我们以上相反的顺序把每一个对象添加到它的父节点上。

mycurrent_cell.appendChild(currenttext);

mycurrent_row.appendChild(mycurrent_cell);

mytablebody.appendChild(mycurrent_row);

mytable.appendChild(mytablebody);

现在DOM层次如下:

BODY

TABLE

TBODY

TR-------------------TR------------------TR

| | |

TD-----TD-----TD TD-----TD-----TD TD-----TD-----TD

首先，我们创建一个table元素
接着，创建一个TBODY元素，它应该是TABLE元素的子元素，
但是现在现在它们之间没有联系。

6、click()
执行元素的一次点击，可以用于通过脚本来触发onClick函数

4、replaceChild(newChild, oldChild)
把当前节点的一个子节点换成另一个节点
例如：

分享到：

使用javascript+dom+xml实现分页 | XLoadTree 基于AJAX + XML动态加载的JS树组 ...

2006-12-27 11:32
浏览 2000
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论