DOM Element 常用方法

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

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

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

不过innerHTML不属于DOM

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

A child

3cloneNode(deepBoolean)

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

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

11111

p=document.getElementById("mypara")

pclone = p.cloneNode(true);

p.parentNode.appendChild(pclone);

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

span

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

熊掌我所欲也!

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

hhh

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

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

例如

一个和尚有水喝。
两个和尚挑水喝。
三个和尚没水喝。

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

新人类,什么?!

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

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

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

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

例如

ddd

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

Sample code

首先,我们创建一个table元素
接着,创建一个TBODY元素,它应该是TABLE元素的子元素,
但是现在现在它们之间没有联系。接着,使用一个循环创建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 Element 常用方法)