HTML元素属性测试总结(续篇)

HTML元素属性测试总结(续篇)

code 元素的含义（语义）为“代码内容”，FireFox 在渲染该元素时，会将 code 标签内容显示为“等宽字体”（每个字符的宽度相等），这就造成了元素的语义和呈现形式混杂在一起；正确的做法是：浏览器应该无视 code 元素由于历史原因遗留下来的默认呈现效果（等宽字体）。

语义元素仅仅说明文档内容的结构与含义，例如 code 表示文档中的代码；video 表示文档中的视频；用 CSS 控制这些元素呈现给用户的形式（将 code 元素的内容用等宽字体呈现给用户），这就做到了内容与呈现分离，例如对于下面这个文档：

    
                
                
        
        
         

            this is normal textNode

            this is normal textNode include in code element
        
    
    

渲染效果如下：

另外，虽然 chrome 默认也会改变 code 标签内部的字体样式，但是其效果不明显，无法区分等宽与非等宽字体，如下：

小结：上述三种浏览器都没有将语义元素与其呈现效果分离这一概念实施的很好，开发者可以通过 CSS 改变 code 元素的“默认”样式。

《getElementById()，getElementsByTagName()，getElementsByClassName()的比较》

第一个函数是通过元素的 id 属性选择元素，其 id 属性是独一无二的，不能将2个元素设置相同的 id ，因此第一个函数返回的结果只有一个元素；

第二个函数通过元素的“标签名”选择元素，正如一个 HTML 文档中，可能包含多个 div 元素，a 元素等等，这能够选择所有标签名称相同的元素（从其名称中的 Elements 即可看出，相反，通过 id 选择的函数，其名称中的 Element 后面没有 s），因此它返回的结果是多个拥有相同标签名的元素集合，在实际的开发编程中，通常使用一个 javascript 变量来保存这些元素，然后通过 C 数组风格的语法来访问单独的元素；

第三个函数通过元素的“类名”选择元素，元素的标签名是 HTML 规范定义的，而且构建 DOM 树时依赖于标签名；相反，类名作为元素可选属性的一部分，需要用户定义，且构建 DOM 树时一般不依赖于类名。

类名能够将 HTML 文档中，各种标签相同的和标签不同的元素划分成同一类，然后通过第三个函数就能引用这些元素，因此它返回的同样是元素集合，需要通过数组进行访问，而且经常在一个 for 循环中遍历每个元素，设置每个元素的其余属性；

类名也经常用作为 CSS 的类选择符，为相同类名的元素应用同一种样式；

最后，书写代码时需要注意 Element 单词的形式，少了 s 或多了 s ，浏览器和开发工具都会报错的。

在 Chrome 与 FireFox 的实现中，getElementsByTagName() 返回的是一种叫做“HTMLCollection”（HTML 集合）的类数组，它不是真正的 javascript 语言核心定义的数组，因此两者在“读写性能”上有所差异。

如果在文档中需要通过 getElementsByTagName() 选择大量相同的元素对其进行读写操作，可以先将其转换为 javascript 数组后再进行读写，其速度会有明显的提升。使用 Array.prototype.slice.call() 就可以转换为 javascript 数组。

为了说明两者的性能差距，考虑如下代码：

以上代码第11~15行的 for 循环首先创建 span 元素，然后将其作为 id 为 SpanElementTest 的 div 元素的子元素添加，并且设置 span 元素内部的“文本节点”，如此过程重复2000次，最终结果就是该 HTML 文档页面中包含了2000个span元素，其内部的文本节点从 span0~span1999。

第17行通过 getElementsByTagName() 选择这2000个span元素，用变

量 nodelist 来保存这个 HTMLCollection 对象，浏览器运行第18行的代码应该输

出布尔值 true，表明 nodelist 确实是一个 HTMLCollection 对象；第20行读

取 nodelist 的长度，将输出 2000；第 22 行通过 

Array.prototype.slice.call() 将 nodelist 转换为 javascript 内置的

数组类型并用变量 convertnodelistToArray 保存，第 23 行输出 true ，证明

了 convertnodelistToArray 是 Array 对象（javascript 数组）。

第25~31行测量在一个嵌套的 for 循环中，内层循环逐个取得 nodelist 对象中的每个 span 元素，每次都检查是否超过对象长度（nodelist.length），外层循环将这个过程重复 2000 次，计算总花费时间并输出至浏览器开发者工具的控制台窗口；

第 33~39行将同样过程重复 2000 次，但是内层的 for 循环仅读取一次 nodelist 对象的长度，然后保存在另一个变量中，省略每次都去读取 nodelist.length 的操作，然后同样在控制台输出这个过程总花费时间；

第41~47行对 convertnodelistToArray 执行相同的操作并且输出总花费时间，由于它是数组，因此读写速度会快很多，即便每次都访问该对象的长度来判断也一样很快；

第49~54行执行相同操作，并且省去每次访问 convertnodelistToArray 的长度的步骤，后面用浏览器测试代码时我们会看到，因为它已经是数组了，因此这省去的操作并没有获得明显的性能优化，下面是 Chrome 与 FireFox 的测试截图：

通过上面的测试，前端攻城狮们应该可以在实际开发中按需选择getElementsByTagName() 或者先通过 Array.prototype.slice.call() 调优性能了。

上面提到过 getElementsByTagName() 返回的是 HTMLCollection 对象 ，其它类似的（开发中经常用到的）还有 ：

document.p_w_picpaths ，用于表示文档中所有的 img 元素；

document.applets，用于表示文档中所有的 Java Applet 二进制应用程序；

document.links，用于表示文档中所有的设置了 href 属性和值的元素；

document.forms，用于表示文档中所有的表单元素；

上面这些都是  HTMLCollection 对象 ，以 document.p_w_picpaths 为例子：

创建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 元素内部添加 h1 元素及其文本节点，最后将“组装”好的 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('Time elapsed:', end - start, 'ms');
}, 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('Time elapsed:', end - start, 'ms');
}, 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('Time elapsed:', end - start, 'ms');
}, 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" 时，会在一个新的浏览器标签页打开新页面。

下面是一个例子：

       Twitter

如何正确表达“被删除的文本内容”？

在 HTML4.01 里，可以使用元素 strike 实现在文本中间画一条横线，表达被删除的内容；在HTML5 中，该元素因为语义不明被废弃，推荐使用语义元素 del ，或者CSS 样式的 text-decoration:line-through 实现相同的效果，将页面结构与样式分离：

保持登录状态

然后在一个外部CSS文件中设置如下：

		#deleteTextContent {
			text-decoration: line-through;
		}

最后在上面的复选框控件（checkbox）所在HTML文件中引用这个CSS文件即可。

或者直接使用del元素：

保持登录状态

《 id 属性结合 # 字符作为 URL 片段标识符在 HTML 页面中导航》