js获取节点元素对象方法简单介绍代码下载

要想使用js操作DOM元素，比如设置div的长度或者宽度，那就要首先获取这个元素，下面介绍一下在js中常用的获取DOM元素节点对象的几种方法，希望能够给需要的朋友带来帮助。

一.使用document.getElementById()函数:

通过此函数可以获取具有指定id属性值的元素，代码实例如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51qianduan.com/" />
<title>51前端</title>
<script type="text/javascript"> 
window.onload=function(){
  var thediv=document.getElementById("thediv");
  thediv.style.width="100px";
  thediv.style.height="80px";
  thediv.style.backgroundColor="green";
}
</script>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

以上代码可以设置div的尺寸和背景颜色。

二.使用document.getElementsByTagName()函数:

此函数可以获取指定标签的对象集合，代码如下:

[ 其他 ] 运行代码下载代码

<script>
var lis=document.getElementsByTagName("li");
</script>

以上代码可以获取，document中所有li元素对象集合。

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51qianduan.com/" />
<title>51前端</title>
<script type="text/javascript"> 
window.onload=function(){
  var theul=document.getElementById("theul");
  var lis=theul.getElementsByTagName("li");
  for(var i=0;i<lis.length;i++){
    lis[i].style.color="red";
  }
}
</script>
</head>
<body>
<ul id="theul">
  <li>51前端一</li>
  <li>51前端二</li>
  <li>51前端三</li>
</ul>
</body>
</html>

以上代码可以将li中的文字颜色设置为红色。

特别说明:

1.此函数获取的是一个对象集合。

2.此函数的调用对象并不总是document，也可以是其他dom对象。

三.使用document.getElementsByName()函数:

此函数可以获取具有指定name属性值的对象集合，代码如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51qianduan.com/" />
<title>51前端</title>
<script type="text/javascript"> 
window.onload=function(){
  var theText=document.getElementsByName("antzone");
  theText[0].value="51前端";
}
</script>
</head>
<body>
  
<input type="text" name="antzone" />
</body>
</html>

代码描述：js获取节点元素对象。js获取节点元素对象方法简单介绍代码下载

下载全部收藏

130 173

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册