HTML元素属性测试的示例分析

    
                
                
        
        
         

            this is normal textNode

            this is normal textNode include in code element
        
    
    

创建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('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元素：

保持登录状态

感谢各位的阅读！关于“HTML元素属性测试的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！