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

Document 对象的常用方法

来源:Http://myeducs.cn 联系QQ:点击这里给我发消息 作者: 用户投稿 来源: 网络 发布时间: 12/10/19
下载{$ArticleTitle}原创论文样式
当前节点的所有子节点,包括该节点内的文本。

<p id=”mypara”>11111</p>

p=document.getElementById("mypara")

pclone = p.cloneNode(true);

p.parentNode.appendChild(pclone);

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

 

<div id="adiv"><span id="innerspan">span</span></div>

<script type="text/javascript">

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

<body>

<span id="lovespan">熊掌我所欲也!</span>

</body>

<script type="text/javascript">

var lovespan=document.getElementById("lovespan")

var newspan=document.createElement("span")

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

newspanref.innerHTML="鱼与";

</script>

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

 

<script>

function wow() {

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

}

</script>

<div id="test" onclick=''wow()''>hhh</div>

<script type="text/javascript">

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

div.click();

</script>

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

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

例如

<table id="mylist">

<tr><td>一个和尚有水喝。</td></tr>

<tr><td>两个和尚挑水喝。</td></tr>

<tr><td>三个和尚没水喝。</td></tr>

</table>

<script>

var msg=””

var mylist=document.getElementById("mylist")

for (i=0; i<mylist.childNodes.length; i++){

   var tr=mylist.childNodes[i];

   for(j=0;j<tr.childNodes[j].length; j++) {

      var td=tr.childNodes[j];

      msg+=td.innerText;

   }

}

alert(msg);

</script>

 

 

 

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

<p><b>新人类,什么?!</b></p>

<script type="text/javascript">

window.onload=function(){

document.getElementsByTagName("p")[0].innerHTML="<b>新新人类,什么?!</b>"

}

</script>

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

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

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

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

例如

<div id=''test''>ddd</div>

<script>

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

   alert("This is a DIV");

</script>

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

<title>Sample code </title>

<script>

    function start() {

        //获得body的引用

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

        //创建一个<table></table>元素

        mytable = document.createElement("TABLE");

        //创建一个<TBODY></TBODY>元素

        mytablebody = document.createElement("TBODY");

        // 创建行列

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

//创建一个<TR></TR>元素

            mycurrent_row=document.createElement("TR");

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

    //创建一个<TD></TD>元素

                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);

        // mytableborder 属性设置为2

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

    }

</script>

</head>

<body onload="start()">

</body>

</html>

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

&

网学推荐

免费论文

原创论文

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