一个 "hello world" 的页面输出
1.首先，建立一个标准的html文本文件，并在<body>中输入如下代码：
1 <header> 2 <h1>我的测试页面！</h1> 3 <h1>我的测试页面！</h1> 4 <h1>我的测试页面！</h1> 5 </header>
2.在html文件的</body>标签结束之前引入我们将要书写javascript代码的js文件，这里我将之命名为：main.js，引入方式为：
1
2.1建立main.js文本文件，使用文本编辑器打开，书写入如下javascript代码：
/** * * @authors Edward.Lee (2452563196@qq.com) * @date 2015-05-11 11:19:53 * @version main1.0 */var myHeading = document.querySelector('h1');myHeading.innerHTML = 'Hello world!'; 2.2 document.querySelector() 方法的阐述：
2.2.1 概述
此方法返回当前文档中第一个匹配的特定选择器的元素（使用深度优先，前序遍历规则遍历所有文档节点）；例如，本例中的3个<h1>标签中的内容，使用此方法遍历替换的时候只是替换了第一个<h1>中的内容。
2.2.2 语法
element = document.querySelector(selectors);
其中
element是一个 对象（DOM 元素）。selectors是一个字符串，包含一个或是多个 ，多个则以逗号分隔。
注：selectors 可以是选择器的名称、className、idName，但是这些匹配须是符合css语法的；如果没有找到匹配元素，则返回 null，否则找到多个匹配元素，则返回第一个匹配到的元素。
3.在我的html文件中我还引入了一个css样式文件：main.css；代码如下：（只是为了我的页面显示居中效果）
@charset "UTF-8";/** * * @authors Edward.Lee (you@example.org) * @date 2015-05-11 11:38:09 * @version main1.0.css */html, body, div, dt, dd, dl, form, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, ul, ol, li, h1, h2, h3, h4, h5, h6{ display: block; margin: 0; padding: 0; list-style: none; text-decoration: none;}body{ font: 12px/28px Arial, Tahoma, "Microsoft YaHei", "微软雅黑", Verdana, Simsun, "宋体", sans-serif; color: #000; min-width: 1000px; word-break: break-word; background: #f8f7f3;}header{ width: 100%; line-height:2.8; }header h1{ font-size: 32px; text-align: center;} 3.1 main.css的引入位置在html文件的<head>标签的结束前，引入方式如下：
4 如下是页面的输出效果：
