                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript入门篇

这样写为什么文字下面第一行输出的不是“javascript”?

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML</title>
</head>
<body>
<h2 id="con">javascript</H2>
<p> JavaScript是一种基于对象、事件驱动的简单脚本语言，嵌入在HTML文档中，由浏览器负责解释和执行，在网页上产生动态的显示效果并实现与用户交互功能。</p>
<script type="text/javascript">
  var mychar= document.getElementById("con")         ;
  document.write(mychar+"<br>");
  document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
  mychar.innerHTML="Hello Word!";
  document.write("修改后的标题:"+mychar.innerHTML+"<br>"); //输出修改后h2标签内容
  document.write(mychar.innerHTML)
</script>
</body>
</html>
输出结果是：
JavaScript是一种基于对象、事件驱动的简单脚本语言，嵌入在HTML文档中，由浏览器负责解释和执行，在网页上产生动态的显示效果并实现与用户交互功能。
[object HTMLHeadingElement]
原标题:javascript
修改后的标题:Hello Word!
Hello Word!

给mychar加上.innerHTML显示的是javascript

输出结果：

JavaScript是一种基于对象、事件驱动的简单脚本语言，嵌入在HTML文档中，由浏览器负责解释和执行，在网页上产生动态的显示效果并实现与用户交互功能。

javascript
原标题:javascript
修改后的标题:Hello Word!
Hello Word!

yelllowsky

2017-02-17

源自：JavaScript入门篇 3-3

关注问题我要回答

565

操作

收起

3 回答

机智的云游君回答被采纳 +3 积分
2017-02-17

如上，您的代码输出结果为hello，world为第一行。

原先的“javascript”字符串标题，在这段代码处发生改变。

<code>mychar.innerHTML="Hello Word!";</code>

innerHTML方法改变原先html标签內的值，导致javascript字符串改变为了Hello world字符串。

1 回复有任何疑惑可以回复我~

收起回答

yelllowsky 提问者

我不理解的是为什么会出现 [object HTMLHeadingElement] 这个输出结果，如果代码是按照从上到下执行的， var mychar= document.getElementById("con") ; document.write(mychar+"<br>"); 不是应该是 javascript 吗？是不是说如果用document.getElementById调用了属性，mychar这个变量的内容就不是con 的文本而是属性内容了？显示的内容 [object HTMLHeadingElement] 就是调用的con的属性值？

2017-02-18 回复有任何疑惑可以回复我~

机智的云游君回复 yelllowsky 提问者

var mychar= document.getElementById("con") ;只是得到这个DOM，而document.write则是要直接输出dom，（并没有告诉他要输出什么属性，所以会输出这个dom本身是什么东西）你所期望的javascript是这个dom里innerHTML的属性（也就是文本）。这么说吧，document.write(mychar+"<br>");把mychar改成mychar.innerHTML，这样就会输出javascript这个文本了。

2017-02-18 回复有任何疑惑可以回复我~

yelllowsky 提问者回复机智的云游君

明白了，非常感谢！

2017-02-19 回复有任何疑惑可以回复我~

慕粉4002440
2017-02-17

输出结果：

Hello Word!

javascript
原标题:javascript
修改后的标题:Hello Word!

0 回复有任何疑惑可以回复我~

收起回答

谁知北
2017-02-17

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML</title>
</head>
<body>
<h2 id="con">javascript</H2>
<p> JavaScript是一种基于对象、事件驱动的简单脚本语言，嵌入在HTML文档中，由浏览器负责解释和执行，在网页上产生动态的显示效果并实现与用户交互功能。</p>
<script type="text/javascript">
  var mychar= document.getElementById("con")          ;
  document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
  mychar.innerHTML="Hello world"
  document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
</script>
</body>
</html>

0 回复有任何疑惑可以回复我~

收起回答