当前位置: 网学 > 编程文档 > XHTML > 正文

Document 对象的常用方法

来源:Http://myeducs.cn 联系QQ:点击这里给我发消息 作者: 用户投稿 来源: 网络 发布时间: 12/10/19
下载{$ArticleTitle}原创论文样式

1getElementById(id)

 

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

 

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

 

<body> 
<div id=’divid’><p>h</p> 
Just for testing; 
</div> 
<div id=’divid’> 
Just for testing; 
</div> 
<script> 
 var div=document.getElementById(‘divid’); 
 alert(div.nodeName);
</script> 
</body> 
注意使用这个函数时如果元素的ID不是唯一的,那么会获得第一个符合条件的元素。 
IE6中如果inputcheckbox,radio. 等元素name匹配指定的ID,也会被访问到 
例如下面的例子中,获得的元素是input 
<body> 
 <input name=''divid'' type="text"/> 
 <div id=''divid''>
    Just for testing; 
 </div> 
<script> 
   var div=document.getElementById(''divid''); 
   alert(div.nodeName); 
</script> 
</body>

2getElementsByName(name) 
返回名字是name的元素数组,在IE6中元素ID匹配这个名字的话,这个元素也将包括在内,而且getElementsByName()仅用于象input,radio,checkbox等元素对象。 
象下面例子中georges数组的长度应该是0 
<body> 
<div name="george">f</div> 
<div name="george">f</div> 
<script type="text/javascript"> 
var georges=document.getElementsByName("george"); 
alert(georges.length); 
</script> 
</body> 

3getElementsByTagName(tagname) 
getElementByTagName可以用于DOCUMENT也可以用元素。getElementsByTagName返回具有指定tagname的子元素列表(数组)。你可以遍历这个数组获得每一个单独的子元素。当处理很大的DOM结构,使用这种方法可以很容易的所有缩小范围。 
<html> 
<head> 
<title></title> 
<script> 
    function start() { 
        // 获得所有tagNamebody的元素(当然每个页面只有一个)          
       myDocumentElements=document.getElementsByTagName("body"); 
       myBody=myDocumentElements.item(0); 
        // 获得body子元素种的所有P元素 
        myBodyElements=myBody.getElementsByTagName("p");
        // 获得第二个P元素
        myP=myBodyElements.item(1); 
       //显示这个元素的文本 
        alert(myP.firstChild.nodeValue); 
   
</script> 
</head> 
<body onload="start()"> 
<p>hi</p> 
<p>hello</p> 
</body> 
</html>  

 

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

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

<div id="test"></div>

<script type="text/javascript">

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

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

<div id="father"><div id="child">A child</div></div>

<script type="text/javascript">

var childnode=document.getElementById("child")

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

</script>

3cloneNode(deepBoolean)

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

这个方法支持一个布尔参数,当deepBoolean设置true时,复制

网学推荐

免费论文

原创论文

浏览:
设为首页 | 加入收藏 | 论文首页 | 论文专题 | 设计下载 | 网学软件 | 论文模板 | 论文资源 | 程序设计 | 关于网学 | 站内搜索 | 网学留言 | 友情链接 | 资料中心
版权所有 QQ:3710167 邮箱:3710167@qq.com 网学网 [Myeducs.cn] 您电脑的分辨率是 像素
Copyright 2008-2015 myeducs.Cn www.myeducs.Cn All Rights Reserved
湘ICP备09003080号