`

Document 对象的常用方法

JavaScriptJ#脚本HTML浏览器 
阅读更多
通过元素的ID访问元素，这是DOM一个基础的访问页面元素的方法，我们要经常用到它.

<!--NEWSZW_HZH_BEGIN-->1、getElementById(id)
通过元素的ID访问元素，这是Document 一个基础的访问页面元素的方法，我们要经常用到它.
例如下面的例子，我们可以同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

分享到：
| window.showModalDialog以及window.open用 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    DOM中document文档对象常用方法

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

    什么是document对象？什么是window对象？.pdf

    document对象提供了一系列的属性和方法来操作文档中的内容。 例如，document.location可以获取或设置当前窗口文档的URL。location属性属于window对象，但window和document在DOM结构中是紧密关联的。document.write...

    javascript常用对象及方法

    Document对象代表当前HTML文档，提供了许多有用的方法和属性，帮助我们更好地控制文档的内容和结构。 1. Document.write()：输出某些内容到当前文档。 2. Document.title：获取或设置当前文档的标题。 3. ...

    javascript document对象详细介绍

    ### JavaScript Document对象详解 #### 一、概述 在Web开发中，`document`对象是浏览器提供的核心对象之一，它代表了当前加载的HTML文档，并且提供了访问和操作文档中的元素和内容的方法。通过`document`对象，...

    document 文挡对象详解

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

    javasxript_document对象详解.txt

    ### JavaScript Document 对象详解 #### 一、Document 对象简介 ...以上就是关于JavaScript中`Document`对象的一些基本属性和方法的详细介绍，通过这些知识，可以有效地操作网页元素，实现动态效果。

    JavaScriptdocument对象方法属性大全

    ### JavaScript Document对象方法属性详解 在前端开发领域，掌握JavaScript中的`Document`对象是至关重要的。`Document`对象是浏览器窗口中的文档的根节点，它提供了丰富的API来操作和访问HTML文档的内容。以下是对...

    脚本中Document对象内容集合介绍

    下面我们将详细介绍`Document`对象的一些关键属性、方法和事件。 ### 1. 属性 - `document.title`: 用于设置或获取当前页面的标题，对应HTML中的`&lt;title&gt;`标签。 - `document.bgColor`, `document.fgColor`, `...

    Javascript的document对象

    JavaScript中的`document`对象是浏览器提供的一个全局对象，它代表了当前HTML文档，并提供了与文档交互的各种方法和属性。在JavaScript编程中，我们经常使用`document`对象来操作页面元素、获取用户输入、处理事件等...

    ActiveObject 对象 Msxml2.DOMDocument 详解

    Msxml2.DOMDocument对象的常用方法和属性如下： 1. **load()**：此方法用于加载XML文档。例如，`doc.load("example.xml")`会加载名为"example.xml"的XML文件到DOMDocument对象。 2. **parseError**：这个属性返回...

    String对象常用的属性的方法

    ### String对象常用的属性与方法 在JavaScript中，`String`对象是用于表示和操作文本的强大工具。它提供了许多内置的方法来帮助我们处理字符串数据。本文将详细介绍`String`对象的一些常用属性和方法，并通过示例...

    document属性和方法.txt

    #### 一、Document对象概述 `Document`对象是浏览器中一个非常重要的对象，它表示整个HTML文档。通过`Document`对象，开发者可以访问页面中的所有元素，实现对网页内容的动态操作。下面将详细介绍`Document`的一些...

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

    1 document.anchors 返回对文档中所有 Anchor 对象的引用。还有document.links/document.forms/document.images等 2 document.URL 返回当前文档的url 3 document.title 返回当前文档的标题 4 document.body ...

    JavaScript的document方法汇总

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

    第16讲 DOM编程-Document对象(三).ppt

    以下是对Document对象的常用属性和方法的详细说明。 ### Document对象的常用属性： 1. **`document.URL`**：返回当前页面的完整URL。 2. **`document.domain`**：用于获取或设置当前文档的域名，通常用于跨子域通信...

    document方法大全

    本文将深入探讨`document`对象的各种方法，帮助开发者全面理解并熟练运用这些方法来创建交互式和动态的Web页面。 一、获取元素方法 1. `getElementById(id)`：通过ID获取元素，是最常用的方法之一。 2. `...

    JavaScript Window窗口对象属性和使用方法

    一、Window对象概述 Window对象可以用来打开浏览器，调整浏览器的位置、大小等等...下表列出了一些Window对象常用属性： 属性 说明 document 对话框中显示当前文档 frames 表示当前对话框中所有frame对象的

Magicbox
Global site tag (gtag.js) - Google Analytics