<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document.getElementById</title>
</head>
<body>
<p id="con"><span>这是p内部的一个子标签</span>JavaScript</p>
<script type="text/javascript">
var mychar=document.getElementById("con")//获取元素存储在变量mychar中。
var myword=mychar.innerHTML;//获取元素的内容存储在myword中,span会被当作字符串显示,但p不会。
var myletter=mychar.innerText;//p、span都被当作标签不显示。
document.write("结果:"+mychar+"<br/>"); //输出获取的P标签。
mychar.style.color="red";
mychar.style.backgroundColor="#CCC";
document.write("结果:"+myword+"<br/>");//输出获取的P标签内容，因使用的是document.write所以p、span都被当作标签不显示。
myword.style.color="blue";
myword.style.backgroundColor="#CCC";
document.write("结果:"+"  "+myletter+"<br/>");//为了区分加了空格
</script>
</body>
</html>
//当不存在第二段
myword.style.color="blue";
myword.style.backgroundColor="#CCC";
时，第三个document.write会显示，然而存在时，第三个document.write便没有输出内容。why?
至于为什么加了myword.style.color="blue"; myword.style.backgroundColor="#CCC";之后没有显示后面的内容，是因为HTML文档的加载顺序是依次，加载完p标签以后开始读取js，读到myword.style.color="blue"; 这儿就报错了，所有后面的就不执行了。 具体可以F12看一下console报错，我用的是谷歌浏览器。 报错信息是 Uncaught TypeError: Cannot set property 'color' of undefined。
(anonymous function) @ 9.html:25 并且会具体指出是哪个html文件的哪一行的错误，我在重新用sublime编辑器编辑的时候，就是在25行写的myword.style.color="blue"; 。
以上，拙见。也是自己的一个积累，一起努力。
style只能对元素对象操作
mychar是你的p元素，而myword是你p元素的内容，内容是没有style属性的。myword.style.color="blue"; 你这儿应该是想给p元素更改style吧，。改成mychar。