传智博客
快捷导航
蚂蚁部落
查看: 2490|回复: 3

document.getElementById()用法详解

[复制链接]
发表于 2013-3-30 18:47:51 | 显示全部楼层 |阅读模式
本帖最后由 antzone 于 2017-6-23 10:04 编辑

document.getElementById()用法详解:
更多内容可以参阅document.getElementById()一章节。
此方法是javascript中最为常用的方法之一,它用以获取具有指定id属性值的元素对象。
语法格式:
[JavaScript] 纯文本查看 复制代码运行代码
document.getElementById (sID)

sID参数是必选项,元素的id属性值。
此方法返回值是一个对象。
特别说明:按照标准,同一个文档id属性值是唯一的,如果存在多个相同的id属性值,也只会获取第一个元素对象。
代码实例如下:
[HTML] 纯文本查看 复制代码运行代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>getElementById()用法详解-蚂蚁部落</title>
<style type="text/css">
ul{
  list-style:none;
}
</style>
<script type="text/javascript">
window.onload=function(){
  var oli=document.getElementById("second");
  oli.style.color="red";
}
</script>
</head>
<body>
<div>
  <ul>
   <li>蚂蚁部落一</li>
   <li id="second">蚂蚁部落二</li>
   <li>蚂蚁部落三</li>
   <li>蚂蚁部落四</li>
  </ul>
</div>
</body>
</html>

document.getElementById("second")获取id属性值为second的对象,然后通过style.color将其字体颜色设置红色。
id属性值可以直接作为对象使用:
其实id属性值可以直接作为对象来使用,修改上面代码实例如下:
[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
ul{
  list-style:none;
}
</style>
<script type="text/javascript">
window.onload=function(){
  second.style.color = "red";
}
</script>
</head>
<body>
<div>
  <ul>
   <li>蚂蚁部落一</li>
   <li id="second">蚂蚁部落二</li>
   <li>蚂蚁部落三</li>
   <li>蚂蚁部落四</li>
  </ul>
</div>
</body>
</html>

上面的直接将id属性值作为一个对象来使用,同样可以达到相同的目的。
发表于 2017-1-2 10:22:46 | 显示全部楼层
一年前我曾经问document.getElementById()方法是做什么用的
现在都有点不敢相信,当年水平差到什么程度,现在也很差,比以前是强了很多
发表于 2017-1-11 18:54:25 | 显示全部楼层
id属性值还真是能够当做对象使用
发表于 2017-8-23 00:40:51 | 显示全部楼层
小知识点介绍的很不错

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-11-19 20:11 , Processed in 0.088211 second(s), 24 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

快速回复返回顶部 返回列表