版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/huiting_liu/article/details/53575535
javascript 操作HTML DOM元素:简单地说：就是对HTML中的DOM元素的节点操作。
DOM元素有以下三种常见的节点：
1. 元素节点；如：<html>、<body>、<p>、<div>等
2. 文本节点，即向用户展示的内容；如：<p>.... </p> 和<li>....</li>中展示的文本内容
3. 属性节点：元素的属性， 如<a href="http://www.baidu.com">百度</a> 中的链接 属性。对DOM元素进行操作，首先得找到该元素对象。一般利用ID获取元素对象。
一、通过ID获取元素
语法：document.getElementById("id");
注：这种方法获取的是整个对象，而不能得到对象的具体内容是什么
<p id="con">JavaScript</p>
<script type="text/javascript">
var mychar= document.getElementById("con"); //获取元素存储在对象mychar中
document.write("结果:"+mychar); //输出获取的P标签。
</script>结果运行图：
这里结果中第二行显示的内容就是说“p”是一个段落元素。
二、获取ID元素的具体内容
语法：对象.innerHTML
<p id="con">JavaScript</p>
<script type="text/javascript">
var mychar= document.getElementById("con"); //获取元素存储在对象mychar中
document.write("结果:"+mychar+"<br>"); //输出获取的P标签。
document.write("具体内容为:"+mychar.innerHTML); //输出获取p的内容
</script>结果运行图：
还可以用该用法来改变元素内容：对象.innerHTML="修改后的内容";
三、改变DOM元素样式
获得元素对象后，就可以对元素进行改变样式的操作了。
语法：对象.style.property=value
基本属性表（property）：
| 属性 | 说明 |
|---|---|
| backgroundColor | 元素的背景颜色 |
| color | 文本颜色 |
| diaplay | 显示（value值为block）与隐藏(value值为none) |
| fongFamily | 字体样式 |
| fongSize | 字体大小 |
| height | 元素高度 |
| weight | 元素宽度 |
样例代码：
<h2 id="con">I love JavaScript</H2>
<p> JavaScript基础知识</p>
<script type="text/javascript">
var mychar= document.getElementById("con");//对象mychar为h2
mychar.style.color="red";//h2字体颜色为红色
mychar.style.backgroundColor="green";//h2背景颜色为绿色
mychar.style.width="300px";//h2的宽度为300像素
</script>结果运行图：
