创建10个 img 元素，并且作为 div 元素的子元素（节点）添加，按理讲，我们可以通过 getElementsByTagName() 获取这10个 img 元素并将其保存在一个变量中，然后输出该变量的类型，应该为 HTMLCollection 对象 ；但是这里为了证明
通过 document.p_w_picpaths 访问的就是这10个 img 元素集合，第15行会输出 object HTMLCollection；第16行输出10；第17行以 C 数组表示法访问 HTMLCollection 对象 中，单个 img 元素的类型：HTMLImageElement ：
《使用 Javascript 操纵 HTML 元素，设置样式，改变页面布局的小例子》
代码如下：
上面代码第9~21行的函数用于执行选择，创建，修改元素，并赋予元素的各种属性值，以及修改页面布局等操作：
首先第10行通过 id 选择元素，由于代码执行到此处时，页面中不存在 id 为 debuglog 的元素，因此 log 变量为 null，导致执行第11~16行的 if 语句块的内容：创建 div 元素，将其 id 属性的值设置为 debuglog （既可以通过 HTML 元素语法的 id 属性设置，也可以像这里一样通过 javascrip 变量对象来设置 id 属性），然后在 div 元素内部添加 h2 元素及其文本节点，最后将“组装”好的 div 元素作为 body 元素的子元素添加（改变了页面布局和结构）；
第17~20行再次通过 Javascript 动态组装元素并添加至页面 DOM 树中：
第17行创建 pre 元素，第18行以调用该函数传递的字符串参数为内容来创建文本节点（document.createTextNode() 接收传递进来的字符串作为参数）；
第19行将上述文本节点添加至 pre 元素内部；第20行将 pre 元素添加至 div 元素内部。代码执行至此，通过 Javascript ，整个页面文档体的结构已经变成如下所示（不考虑 script 标签）：
假设在上面代码中给出的P元素是整个文档中的第三个，首先获得文档中的所有P元素（通过getElementsByTagName()方法），然后我们可以使用类似C数组下标的形式来索引每个P元素；下标一样从0开始，因此第三个P元素的下标为[2]，也就是上面那一段英语；通过textContent属性即可获取其文本内容（所有不含HTML元素的文本）。使用字符串连接运算符（+）结合等号（=）实现在原有文本结尾处添加新内容，第一次添加的内容为一个以单引号包含的字符串，其中的第一个字符使用了以转义字符“\u”为前缀的 unicode 字符，后接16位值（即两个16进制数，共2字节）此处是反斜杠（\）的16位内码表示（使用“\\”有相同的效果），浏览器在解析时会自动解码还原成 unicode 明文（下面会给出截图）；
另外，在单引号包含的字符串中如果要使用单引号作为缩写或所有格，则需要借助反斜杠来构成转义字符，否则，Javascript 解释引擎（浏览器的）会将第二个单引号看成字符串的结尾，从而造成语法错误；
中间还有一个16位内码表示的unicode 字符，其unicode 明文为“π”，在字符串的结尾，使用“明文”转义字符来表示一个反斜杠。
接下来我们将unicode字符π 赋给一个变量，然后继续在第三个P元素的文本后添加
该变量的长度（即 unicode字符的长度，其输出以“16位”为单位，对于字符串也是相同单位，如果要换算成字节数，则需要将 length 属性的输出结果先乘以16，再除以8，就得到字节数），例如字符π就占2字节（输出为1）
6。定时触发事件函数 setTimeout() 的使用注意事项
在 Javascript 中可以使用 setTimeout()，指定间隔某段时间后，执行特定函数（触发事件），但是 setTimeout() 计算实际间隔时间的方式可能与我们预期的不同，具体由浏览器的 Javascript 解析引擎决定如何“解释”setTimeout() 。先看一个小例子：
var start = new Date;
setTimeout(function(){
var end = new Date;
console.log(&＃39;Time elapsed:&＃39;, end - start, &＃39;ms&＃39;);
}, 500);上面代码首先获取一次当前系统时间，然后通过 setTimeout() 注册一个回调函数，这个函数预定在 500 毫秒（0.5秒）后触发执行：它将第二次获取当前系统时间，然后在调试控制台输出第二次与第一次系统时间的差值。
在 FireFox 插件 FireBug 的控制台中执行上面这段代码，输出的值在 500~510 毫秒之间（多数是500毫秒左右），我们忽略语法，词法，语义解析和执行过程带来的20毫秒（0.02秒）细微延迟，基本上可以认为这个结果是准确的。
接着我们在上面代码的末尾加上一个空循环（循环体为空），然后再次测试两次获取到的时间间隔：
var start = new Date;
setTimeout(function(){
var end = new Date;
console.log(&＃39;Time elapsed:&＃39;, end - start, &＃39;ms&＃39;);
}, 500);
while (new Date - start < 1000) {};在 FireBug 中运行上面代码，这次的输出结果为 100x 毫秒，x 从0~9不等，这表明，当 setTimeout() 后面还有语句时，注册的回调函数会被放置到“待触发的事件队列”中，然后（浏览器）继续解释执行后面的语句，在本例中，它会执行 while 循环的退出条件判断（第三次获取系统当前时间，并将返回值减去第一次获取的系统时间，并判断运算结果是否小于 1000）。待执行完所有语句后，才会触发由 setTimeout() 设置的队列中第一个回调函数。因此我们从输出的 100x 可以得出结论，执行循环并判断大概用了 50x 毫秒（100x - 500 = 50x）。
在通过 setTimeout() 注册一些时间敏感的函数时，最好能够放在代码末尾，否则实际回调的时间可能和你预期的有所延迟。
为了进一步证实 setTimeout() 的延后触发行为，我们将上面代码增量为如下：
var start = new Date;
setTimeout(function(){
var end = new Date;
console.log(&＃39;Time elapsed:&＃39;, end - start, &＃39;ms&＃39;);
}, 500);
while (new Date - start < 1000) {};
var JSON_object = {
name: "shayi1983",
long: "173cm",
borth: "chongqing",
showPresonal_ID: function(){
console.log("Hi, " + "my name is " + JSON_object.name + ",I long is " + JSON_object.long + " I come from " + JSON_object.borth);
}
}
JSON_object.showPresonal_ID();在 while 循环后，创建并初始化了一个名为 JSON_object 的 Javascript 对象变量，该对象的前三个属性和值使用 JSON（Javascript 对象表示法）格式，并且定义了一个该对象的方法，用于在调试控制台输出前三个属性值；最后调用这个方法来模拟输出自我介绍信息。整段代码在 FireBug 中的运行结果如下：
在 firebug 右侧的窗口输出调试代码时，可以通过 ctrl + z 还原到前几次的代码历史记录，这在无意间清除掉测试代码时非常有用。
《一些元素示例》
关于a元素的 target属性
a元素的target属性取值，用于设置点击该超链接时，打开新页面的位置。如果没有指定target属性，新页面会覆盖当前打开的页面（当前页面的URL变成超链接的URL）；当设置 target="_blank" 时，会在一个新的浏览器标签页打开新页面。
下面是一个例子：
京公网安备 11010802041100号