1、getElementById(id) 通过元素的ID访问元素,这是DOM一个基础的访问页面元素的方法,我们要经常用到它.
例如下面的例子,我们可以同DIV的ID迅速的访问到它,而不必通过DOM层层遍历,
Just for testing;
<script> <BR>var div=document.getElementById(‘divid'); <BR>alert(div.nodeName); <BR></script>
注意使用这个函数时如果元素的ID不是唯一的,那么会获得第一个符合条件的元素。
在IE6中如果input、checkbox,radio. 等元素name匹配指定的ID,也会被访问到
例如下面的例子中,获得的元素是input:
2、getElementsByName(name) 返回名字是name的元素数组,在IE6中元素ID匹配这个名字的话,这个元素也将包括在内,而且getElementsByName()仅用于象input,radio,checkbox等元素对象。
象下面例子中georges数组的长度应该是0。
3、getElementsByTagName(tagname) getElementByTagName可以用于DOCUMENT也可以用元素。getElementsByTagName返回具有指定tagname的子元素列表(数组)。你可以遍历这个数组获得每一个单独的子元素。当处理很大的DOM结构,使用这种方法可以很容易的所有缩小范围。
<script> <BR>function start() { <BR>// 获得所有tagName是body的元素(当然每个页面只有一个) <BR>myDocumentElements=document.getElementsByTagName("body"); <BR>myBody=myDocumentElements.item(0); <BR>// 获得body子元素种的所有P元素 <BR>myBodyElements=myBody.getElementsByTagName("p"); <BR>// 获得第二个P元素 <BR>myP=myBodyElements.item(1); <BR>//显示这个元素的文本 <BR>alert(myP.firstChild.nodeValue); <BR>} <BR></script>
hi
hello
DOM Element 常用方法 1、appendChild(node)
向当前节点对象的追加节点。经常用于给页面动态的添加内容。
例如下面给div添加一个文本节点:
上面的例子中给DIV添加文本,也可以用newdiv.innerHTML=”A new div”实现,
不过innerHTML不属于DOM
2、removeChild(childreference)
移除当前节点的子节点,返回被移除的节点。这个被移除的节点可以被插入document树中别的地方
3、cloneNode(deepBoolean)
复制并返回当前节点的复制节点,这个复制得到的节点是一个孤立的节点,不在document树中。复制原来节点的属性值,包括ID属性,所以在把这个新节点加到document之前,一定要修改ID属性,以便使它保持唯一。当然如果ID的唯一性不重要可以不做处理。
这个方法支持一个布尔参数,当deepBoolean设置true时,复制 当前节点的所有子节点,包括该节点内的文本。
11111
p=document.getElementById("mypara")
pclone = p.cloneNode(true);
p.parentNode.appendChild(pclone);
4、replaceChild(newChild, oldChild)
把当前节点的一个子节点换成另一个节点
例如:
5、insertBefore(newElement, targetElement)
给当前节点插入一个新节点,如果targetElement被设置为null,那新节点被当作最后一个子节点插入,否则那新节点应该被插入targetElement之前的最近位置。
熊掌我所欲也!
6、click()
执行元素的一次点击,可以用于通过脚本来触发onClick函数
<script> <BR>function wow() { <BR>alert("我好象没有点鼠标啊"); <BR>} <BR></script>
hhh
DOM Element的属性:(下面是常用的。IE5.0以上,mozllia都支持的)
1、childeNodes 返回所有子节点对象,
例如
一个和尚有水喝。 |
两个和尚挑水喝。 |
三个和尚没水喝。 |
<script> <BR>var msg=”” <BR>var mylist=document.getElementById("mylist") <BR>for (i=0; i<mylist.childNodes.length; i++){ <BR>var tr=mylist.childNodes[i]; <BR>for(j=0;j<tr.childNodes[j].length; j++) { <BR>var td=tr.childNodes[j]; <BR>msg+=td.innerText; <BR>} <BR>} <BR>alert(msg); <BR></script>
2、innerHTML
这是一个事实上的标准,不属于w3c DOM,但是几乎所有支持DOM的浏览器,都支持这个属性。通过这个属性我们很容易修改一个元素的HTML。
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
<script> <BR>if (document.getElementById("test").nodeName=="DIV") <BR>alert("This is a DIV"); <BR></script>
第一个例子:
使用DOM1.0 的javascript动态地创建一个HTML table。
Sample code
<script> <BR>function start() { <BR>//获得body的引用 <BR>var mybody=document.getElementsByTagName("body").item(0); <BR>//创建一个<table>元素 <BR>mytable = document.createElement("TABLE"); <BR>//创建一个<TBODY>元素 <BR>mytablebody = document.createElement("TBODY"); <BR>// 创建行列 <BR>for(j=0;j<3;j++) { <BR>//创建一个<TR>元素 <BR>mycurrent_row=document.createElement("TR"); <BR>for(i=0;i<3;i++) { <BR>//创建一个<TD>元素 <BR>mycurrent_cell=document.createElement("TD"); <BR>//创建一个文本元素 <BR>currenttext=document.createTextNode("cell is row "+j+", column "+i); <BR>//把新的文本元素添加到单元TD上 <BR>mycurrent_cell.appendChild(currenttext); <BR>// appends the cell TD into the row TR <BR>//把单元TD添加到行TR上 <BR>mycurrent_row.appendChild(mycurrent_cell); <BR>} <BR>//把行TR添加到TBODY上 <BR>mytablebody.appendChild(mycurrent_row); <BR>} <BR>// 把 TBODY 添加到 TABLE <BR>mytable.appendChild(mytablebody); <BR>// 把 TABLE 添加到 BODY <BR>mybody.appendChild(mytable); <BR>// 把mytable的border 属性设置为2 <BR>mytable.setAttribute("border","2"); <BR>} <BR></script>