Document 对象的常用方法


Posted in Javascript onJuly 31, 2009

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

Javascript 相关文章推荐
JavaScript DOM 学习第三章 内容表格
Feb 19 Javascript
Jquery乱码的一次解决过程 图解教程
Feb 20 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
Apr 29 Javascript
原生javascript实现简单的datagrid数据表格
Jan 02 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
Mar 11 Javascript
jquery Form轻松实现文件上传
May 24 jQuery
Vue循环组件加validate多表单验证的实例
Sep 18 Javascript
移动端吸顶fixbar的解决方案详解
Jul 17 Javascript
微信小程序实现拖拽功能
Sep 26 Javascript
微信小程序中使用 async/await的方法实例分析
May 06 Javascript
原生js实现点击按钮复制内容到剪切板
Nov 19 Javascript
javascript getElementsByName()的用法说明
Jul 31 #Javascript
extjs 列表框(multiselect)的动态添加列表项的方法
Jul 31 #Javascript
JavaScript 学习小结(适合新手参考)
Jul 30 #Javascript
JavaScript 创建对象和构造类实现代码
Jul 30 #Javascript
Javascript 学习笔记 错误处理
Jul 30 #Javascript
JS 学习笔记 防止发生命名冲突
Jul 30 #Javascript
javascript 处理HTML元素必须避免使用的一种方法
Jul 30 #Javascript
You might like
一个PHP的QRcode类与大家分享
2011/11/13 PHP
探讨php中header的用法详解
2013/06/07 PHP
PHP操作Memcache实例介绍
2013/06/14 PHP
PHP使用JSON和将json还原成数组
2015/02/12 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
浅谈laravel5.5 belongsToMany自身的正确用法
2019/10/17 PHP
科讯商业版中用到的ajax空间与分页函数
2007/09/02 Javascript
asp批量修改记录的代码
2008/06/25 Javascript
用户注册常用javascript代码
2009/08/29 Javascript
原创javascript小游戏实现代码
2010/08/19 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
jQuery中:only-child选择器用法实例
2015/01/03 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
2016/07/18 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
深入理解vue-loader如何使用
2017/06/06 Javascript
详解vuejs之v-for列表渲染
2017/06/22 Javascript
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
JavaScript 中使用 Generator的方法
2017/12/29 Javascript
实例讲解v-if和v-show的区别
2019/01/31 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
2019/04/02 Javascript
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
node.js制作一个简单的登录拦截器
2020/02/10 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
NUK奶瓶美国官网:NUK美国
2016/09/26 全球购物
美国一家著名的儿童鞋制造商:Stride Rite
2017/01/02 全球购物
加拿大约会网站:EliteSingles.ca
2018/01/12 全球购物
校园演讲稿汇总
2014/05/21 职场文书
安阳殷墟导游词
2015/02/10 职场文书
故意伤害罪辩护词
2015/05/21 职场文书
红色经典观后感
2015/06/18 职场文书