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 相关文章推荐
jQuery AjaxQueue改进步骤
Oct 06 Javascript
jQuery获取注册信息并提示实现代码
Apr 21 Javascript
javascript scrollTop正解使用方法
Nov 14 Javascript
解决Jquery鼠标经过不停滑动的问题
Mar 03 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 Javascript
js实现iframe跨页面调用函数的方法
Dec 13 Javascript
jQuery中insertAfter()方法用法实例
Jan 08 Javascript
Bootstrap网格系统详解
Apr 26 Javascript
JS全局变量和局部变量最新解析
Jun 24 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
Sep 20 Javascript
vue实现a标签点击高亮方法
Mar 17 Javascript
ES6基础之展开语法(Spread syntax)
Feb 21 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
神族 Protoss 剧情介绍
2020/03/14 星际争霸
PHP树的代码,可以嵌套任意层
2006/10/09 PHP
php录入页面中动态从数据库中提取数据的实现
2006/10/09 PHP
PHP学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
PHP实现手机号码中间四位用星号(*)隐藏的自定义函数分享
2014/09/27 PHP
php中异常处理方法小结
2015/01/09 PHP
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
PHP中读取文件的几个方法总结(推荐)
2016/06/03 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
Javascript String.replace的妙用
2009/09/08 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
2013/12/24 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
JavaScript利用Date实现简单的倒计时实例
2017/01/12 Javascript
php register_shutdown_function函数详解
2017/07/23 Javascript
vue权限路由实现的方法示例总结
2018/07/29 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
vue中typescript装饰器的使用方法超实用教程
2019/06/17 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
Python实现随机创建电话号码的方法示例
2018/12/07 Python
python 函数内部修改外部变量的方法
2018/12/18 Python
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
2020/05/06 HTML / CSS
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
阿玛瑞酒店中文官方网站:Amari.com
2018/02/13 全球购物
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
什么是servlet链?
2014/07/13 面试题
私营公司诉讼代理委托书范本
2014/09/13 职场文书
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers