学过HTML/CSS样式,都知道,网页由标签将信息组织起来,而标签的id属性值是唯一的,就像是每人有一个身份证号一样,只要通过身份证号就可以找到相对应的人。那么在网页中,我们通过id先找到标签,然后进行操作。
**语法:**
~~~
document.getElementById(“id”)
~~~
**看看下面代码:**
**[![](http://img.mukewang.com/52e4c5950001054207900423.jpg)](http://img.mukewang.com/52e4c5950001054207900423.jpg)**
**结果:null****或\[****object HTMLParagraphElement\]**
**[![](http://img.mukewang.com/52e4c6080001734c03800275.jpg)](http://img.mukewang.com/52e4c6080001734c03800275.jpg)**
**注:获取的元素是一个对象,如想对元素进行操作,我们要通过它的属性或方法。**
### 任务
在右边编辑器中,补充第10行代码,通过document.getElementById获取id为con的p标签。
第11行为输出获取的元素,看看结果是什么。
```
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document.getElementById</title>
</head>
<body>
<p id="con">JavaScript</p>
<script type="text/javascript">
var mychar= document.getElementById("con");
document.write("结果:"+mychar); //输出获取的P标签。
</script>
</body>
</html>
```
- 1-7JavaScript-什么是变量
- 1-9JavaScript-什么是函数
- 2-2JavaScript-警告(alert 消息对话框)
- 2-3JavaScript-确认(confirm 消息对话框)
- 24JavaScript-提问(prompt 消息对话框)
- 2-5JavaScript-打开新窗口(window.open)
- 2-6JavaScript-关闭窗口(window.close)
- 2-7编程练习
- 3-1认识DOM
- 3-2通过ID获取元素
- 3-3innerHTML 属性
- 3-4改变 HTML 样式
- 3-5显示和隐藏(display属性)
- 3-6控制类名(className 属性)
- 4-1编程挑战