`

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

    javasxript_document对象详解.txt

    这是一点关于javasxript中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 Window窗口对象属性和使用方法

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

    javascript浏览器对象编程

    document对象常用属性和方法 window对象的常用属性和方法 history对象的常用属性和方法 location对象的常用属性和方法

    javascript常用对象梳理

    JS中的常用对象[转载]web 技术 2010-06-05 15:00:30 阅读3 评论0 字号：大中小 订阅 [removed] Window For JavaScript 熟练window对象的open、close、alert、confirm、prompt、setTimeout、clearTimeout、...

    keephunny#document#spring常用对象dtoVo1

    简单来说，当我们需要一个对象10个字段的内容，但这个对象总共有20个字段，我们不需要把整个PO对象全部字段传输到客户端，而是可以用DTO重新封装，传递到客户端。

    dom4j常用方法

    解析文件生成Document对象 iii.文档对象.getRootElement() 获取跟元素节点 iv.元素节点.elements() 获取到指定节点下面的所有子节点 v.元素节点.attributeValue(“属性名” ) 获取指定节点指定属性的值 vi.父节点....

    JavaScript中Date对象的常用方法示例

    getFullYear() 使用 getFullYear() 获取年份。 源代码: [removed] &lt;!DOCTYPE html&gt; &lt;...&lt;p id=demo&gt;Click the button to display the full year of todays date. ...var x = document.getElementById(dem

    javascript 常用方法及技巧

    事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode event.shiftKey event.altKey event....

    javaScript常用事件

    document对象常用的方法： 1.document.getElementById():通过id获得唯一的一个HTML元素，没有id时，通过name查找 2.document.getElementByName()：获取相同名称的一组元素。主要用于表单中的复选框 Date对象常用...

    js中document.getElementByid、document.all和document.layers区分介绍

    但比较常用的是用对象id来引用一个特定的对象，比如document.all[“element”]这样。 document.layers是Netscape 4.x专有的属性，是一个代表所有由储如&lt;div&gt;&lt;layer&gt;等定位了的元素的数组。通常也是用或&lt;...

    XML DOM技术的设计

    掌握DOM解析器，包括创建DOM解析器的...用于修改Document的常用方法 ；用DOM建立XML文件等内容。 根据以下提供的Customer.xml，使用DOM编写Java文件Customer1.java访问XML的特定节点，将XML文档中的所有数据读取出来。

    javascript完全学习手册2 源码

    4．1．2 使用Document对象 4．2 Form对象及其元素 4．2．1 Form对象概述 4．2．2 表单元素 4．2．3 表单元素属性和事件 4．2．4 表单验证 4．3 Anchor与Link对象 4．3．1 Anchor对象 4．3．2 Link对象 4．4 Image...

    JavaScript实习报告.pdf

    掌握 JavaScript 的常用内置对象的作用、属性、方法的运用； 3．掌握 JavaScript 的程序流程控制语句的运用； 4. 掌握 Firebug 的基本用法。 二、实验内容 1. 要求用户在文本框中年份，点击判断按钮，用 alert 函数...

    javascript对象的相关操作小结

    window对象是整个BOM的核心其有document（文档对象）、location（地址对象） 和history（历史对象组成） 调用对象属性的语法： 1.对象.属性名=“属性值”; 2.对象[“属性名称字符串”]=”属性值”; 调用对象方法的...

    dop:Dynamic of package，里面封装了一些个人常用的方法，全兼容的dom操作事件，监听对象变化自动更新的方法

    Dynamic of package，里面封装了一些个人常用的方法，全兼容的dom操作事件，监听对象变化自动更新的方法 Dop.prototype.touch() 兼容全端的交互事件，案例文件touch.html 兼容：兼容ie9+和移动端大部分版本，由于...

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