`
ldzyz007
  • 浏览: 715215 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

document常用方法

阅读更多
1、getElementById(id)



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



例如下面的例子,我们可以同DIV的ID迅速的访问到它,而不必通过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中如果input、checkbox,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>
2、getElementsByName(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>
3、getElementsByTagName(tagname)
getElementByTagName可以用于DOCUMENT也可以用元素。getElementsByTagName返回具有指定tagname的子元素列表(数组)。你可以遍历这个数组获得每一个单独的子元素。当处理很大的DOM结构,使用这种方法可以很容易的所有缩小范围。
<html>
<head>
<title></title>
<script>
    function start() {
        // 获得所有tagName是body的元素(当然每个页面只有一个)         
       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 常用方法
1、appendChild(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

2、removeChild(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>

3、cloneNode(deepBoolean)

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

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

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

p=document.getElementById("mypara")

pclone = p.cloneNode(true);

p.parentNode.appendChild(pclone);

4、replaceChild(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>
5、insertBefore(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>

6、click()
执行元素的一次点击,可以用于通过脚本来触发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都支持的)

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

例如

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







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

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

<script type="text/javascript">

window.onload=function(){

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

}

</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

例如

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

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

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

    }

</script>

</head>

<body onload="start()">

</body>

</html>

首先,我们创建一个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层次如下:

                    BODY

                      |

                   TABLE

                      |

                   TBODY

                      |

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

       |               |              |

TD-----TD-----TD TD-----TD-----TD TD-----TD-----TD
作者:Leepy

邮箱:sunleepy(AT)gmail.com

出处:http://liping13599168.cnblogs.com/
    
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。
分享到:
评论

相关推荐

    DOM中document文档对象常用方法

    DOM中document文档对象常用方法.为网页版。打开后,右击查看元素或源码,ok建议使用火狐,谷歌浏览器,ie

    JavaScript的document方法汇总

    本文将详细介绍`document`对象的一些常用方法及其应用场景。 #### 一、文档基本信息获取 1. **`document.title`**:用于获取或设置HTML文档的标题,该标题对应于HTML文档中的`&lt;title&gt;`标签。 - 示例:`console....

    document方法大全

    1. `getElementById(id)`:通过ID获取元素,是最常用的方法之一。 2. `getElementsByClassName(className)`:根据类名获取元素集合,返回的是NodeList对象。 3. `getElementsByTagName(tagName)`:根据标签名获取...

    document属性和方法.txt

    下面将详细介绍`Document`的一些常用属性和方法。 #### 二、Document的基本属性 ##### 1. `document.title` 用于获取或设置HTML文档的标题,即`&lt;title&gt;`标签内的文本。 - **语法**: ```javascript document....

    Document 对象的常用方法

    本文将深入探讨Document对象的常用方法,这些方法在DOM(文档对象模型)操作中至关重要。 首先,我们来看`getElementById(id)`方法。此方法根据指定的ID值来查找页面中的元素。例如,如果你有一个ID为'divid'的`...

    javascript常用对象及方法

    javascript常用对象及方法 javascript中有许多常用的对象和方法,了解这些对象和方法可以帮助我们更好地使用javascript。下面我们将详细介绍这些对象和方法。 一、窗口对象Window Window对象是javascript中的顶级...

    各浏览器对document.getElementById等方法的实现差异解析

    本文主要讨论的是`document.getElementById`这个常用方法在不同浏览器之间的实现区别,以及如何处理这些差异。 `document.getElementById`是一个JavaScript内置方法,用于根据指定的ID从文档中获取元素。在大部分...

    js常用方法大全,比较详细

    本篇文章将详细探讨JS的常用方法,旨在为开发者提供一个全面的参考。 一、变量声明与类型转换 在JavaScript中,我们可以使用`var`, `let`, 和 `const` 关键字来声明变量。`var` 是老式的声明方式,具有变量提升...

    js基础之DOM中document对象的常用属性方法详解

    —–引入 每个载入浏览器的 HTML 文档都会成为 Document 对象。 Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。 属性 1 document.anchors 返回对文档中所有 ...方法 1 document.close() 

    javascript常用方法

    ### JavaScript 常用方法 #### 1. `document.write("")` `document.write` 是一个用于在文档中写入文本、HTML 或者其他元素的方法。它通常在文档加载过程中被调用,一旦文档加载完成,调用 `document.write` 会重新...

    js常用方法(js常用鼠标事件和其对应的方法)

    以下是一些JS常用的鼠标事件及其对应的方法: 1. `click`:当用户点击元素时触发。常用于按钮、链接等交互元素。 2. `dblclick`:双击元素时触发,通常用于执行更复杂的操作,如编辑文本或放大图片。 3. `mousedown...

    jquery中ajax常用的方法,jQuery ajax框架常用方法总结.docx

    jQuery 中 AJAX 常用的方法总结 jQuery 是一个功能强大且流行的 JavaScript 库,它提供了许多有用的方法来处理 AJAX 请求。AJAX(Asynchronous JavaScript and XML)是一种创建交互式网页的技术,它允许网页从...

    JavaScript 中 doucment 的常用方法

    在深入探讨JavaScript中`document`对象的常用方法之前,我们先明确一点:`doucment`应为拼写错误,正确的关键词是`document`。`document`对象是浏览器提供的核心对象之一,它代表了当前网页文档,并提供了访问和操作...

    jQuery自带的一些常用方法总结

    常用工具方法 (1)$.trim $.trim方法用于移除字符串头部和尾部多余的空格。 代码如下: $.trim(‘ Hello ‘) // Hello (2)$.contains $.contains方法返回一个布尔值,表示某个DOM元素(第二个参数)是否为另一...

    JS常用方法

    ### JS常用方法知识点详解 #### 一、String.prototype.Replace 方法 **定义与功能:** `String.prototype.Replace` 是一个自定义扩展方法,用于全局替换字符串中的某个子串。该方法接受两个参数:`oldValue` 和 `...

    JavaScript中document用法小结

    下面是对 document 对象的一些常用属性和方法的总结。 属性 1. `document.title`: 设置文档标题,等价于 HTML 的 `&lt;title&gt;` 标签。 2. `document.bgColor`: 设置页面背景色。 3. `document.fgColor`: 设置前景色...

    javascript常用方法实例

    在这个“javascript常用方法实例”中,我们将会探讨一些JavaScript的核心概念和常用方法,以及它们在实际应用场景中的实例。 1. **DOM操作**:Document Object Model(DOM)是HTML和XML文档的结构化表示,...

    document 文挡对象详解

    2. **Document对象的常用方法** - `document.createElement()`:创建一个新的HTML元素。 - `document.createTextNode()`:创建一个包含文本的新文本节点。 - `document.appendChild()`:将新节点添加到指定节点的...

    javascript document对象详细介绍

    ### JavaScript Document对象详解 ...以上就是关于`document`对象的详细介绍及其相关属性、方法和事件的使用示例。通过熟练掌握这些内容,开发者可以更加灵活地操作Web页面,实现丰富的交互效果。

Global site tag (gtag.js) - Google Analytics