显示缩略列表 JS DOM

简介:

以下body部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
< html  lang = "en" >
< head >
< meta  charset = "utf-8" >
< title >Explaining the Ddocument Ob Model</ title >
 
< link  href = "style08.css"  type = "text/css"  rel = "stylesheet"  />
</ head >
< body >
< h1 > What is the Document object Model?</ h1 >
< p >
The < abbr  title = "Worle Wide Web Consortium" >W3C</ abbr > defines the < abbr  title = "Object Model" >DOM</ abbr > as:
</ p >
< blockquote  cite = "http://www.w3.org/DOM/" >
< P >
A platform- and language-neutral interface that will allow programs 
and scripts to dynamically access and update the content,structure and styles of documents.
</ p >
</ blockquote >
< p >
It is an < abbr  title = "Application Programming Interface" >API</ abbr >
that can be used to navigate < abbr  title = "eXtensible Markup Language" >XML</ abbr >
documents.
</ p >
< script  src = "test.js" ></ script
</ body >
</ html >

以下是js部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
function  addLoadEvent(func){     //不管在页面加载完毕执行多少个函数,都应付自如
var  oldonload = window.onload;
if ( typeof  window.onload !=  'function' ){
window.onload = func;
} else {
window.onload =  function (){
oldonload();
func();
}
}
}
 
function  displayAbbreviations(){
//检查兼容性
if (!document.getElementsByTagName||!document.createElement||!document.createTextNode)  return  false ;
 
var  abbreviations = document.getElementsByTagName( "abbr" );      //取得所有缩略词
if (abbreviations.length < 1)  return  false ;
var  defs =  new  Array();
for ( var  i=0; i < abbreviations.length; i++){                   //遍历这些缩略词
var  current_abbr = abbreviations[i];
var  definition = current_abbr.getAttribute( "title" );
var  key = current_abbr.lastChild.nodeValue;
defs[key] = definition;
}
var  dlist = document.createElement( "dl" );                    //创建定义列表  
for ( key  in  defs){                                           //遍历定义
var  definition = defs[key]; 
var  dtitle = document.createElement( "dt" );                   //创建定义标题
var  dtitle_text = document.createTextNode(key);
dtitle.appendChild(dtitle_text);
var  ddesc = document.createElement( "dd" );                     //创建定义描述
var  ddesc_text = document.createTextNode(definition);
ddesc.appendChild(ddesc_text);                                //把它们添加到定义列表
dlist.appendChild(dtitle);
dlist.appendChild(ddesc);
}
 
var  header = document.createElement( "h2" );                    //创建标题
var  header_text = document.createTextNode( "Abbreviations" );
header.appendChild(header_text);
document.body.appendChild(header);                            //把标题添加到页面主体
document.body.appendChild(dlist);                             //把定义列表添加到主体
 
}
 
 
addLoadEvent(displayAbbreviations);

页面预览效果:

wKiom1dGzeexHkaEAAB04bQ87MA881.jpg-wh_50

本文转自  小旭依然  51CTO博客,原文链接:http://blog.51cto.com/xuyran/1783576

相关文章
|
14天前
|
JavaScript
DOM 节点列表长度(Node List Length)
`length`属性用于获取DOM节点列表的长度,即节点数量。通过遍历这个属性,可以访问和处理所有节点。例如,示例代码加载&quot;books.xml&quot;,获取所有&quot;title&quot;节点,并依次输出它们的第一个子节点的值。
|
18天前
|
JavaScript
DOM 节点列表长度(Node List Length)
`length`属性用于获取DOM节点列表的元素数量。在示例中,代码加载&quot;books.xml&quot;,然后通过`getElementsByTagName(&quot;title&quot;)`获取所有标题节点。使用`for`循环遍历这些节点,输出每个标题的文本内容。
|
13小时前
|
XML JavaScript 数据格式
DOM 节点列表长度(Node List Length)
`length`属性表示DOM节点列表的长度。在示例中,通过加载&quot;books.xml&quot;到`xmlDoc`,并使用`getElementsByTagName(&quot;title&quot;)`获取所有标题节点,然后利用`for`循环遍历整个节点列表,每次迭代通过`childNodes[0].nodeValue`访问每个节点的第一个子节点的值并输出。此方法可用于处理XML或HTML文档中的节点列表。 **Markdown格式:** `length`属性表示DOM节点列表的长度。
|
16天前
|
JavaScript
DOM 节点列表长度(Node List Length)
`length`属性用于获取DOM节点列表的元素数量。通过遍历这个属性,如`for (i=0; i&lt;x.length; i++)`,可以访问和处理每个节点。在示例中,加载&quot;books.xml&quot;,然后获取所有&quot;&lt;title&gt;&quot;标签,并输出它们的子节点值。
|
19天前
|
缓存 JavaScript API
js【详解】DOM
js【详解】DOM
10 0
|
22天前
|
JavaScript
DOM 节点列表长度(Node List Length)
`length`属性用于获取DOM节点列表的元素数量。在示例中,代码加载&quot;books.xml&quot;,然后通过`getElementsByTagName(&quot;title&quot;)`获取所有标题节点。使用`for`循环遍历这些节点,输出每个标题的文本内容。
|
22天前
|
移动开发 JavaScript 前端开发
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
13 0
|
23天前
|
JavaScript 前端开发
JavaScript 遍历DOM
JavaScript 遍历DOM
13 0
|
24天前
|
JavaScript
DOM 属性列表(命名节点图 Named Node Map)
**DOM的NamedNodeMap概括:**它表示元素的属性节点列表,如`&lt;book&gt;`的`attributes`。这个映射自动更新,添加或删除属性时响应变化。代码示例加载&quot;books.xml&quot;,获取首个`&lt;book&gt;`的属性,`x.getNamedItem(&quot;category&quot;).nodeValue`显示类别,`x.length`显示属性数。输出示例:类别为&quot;cooking&quot;,属性计数为1。
|
24天前
|
JavaScript
DOM 节点列表长度(Node List Length)
`length`属性用于获取DOM节点列表的元素数量。在示例中,代码加载&quot;books.xml&quot;,然后通过`getElementsByTagName(&quot;title&quot;)`获取所有标题节点。使用`for`循环遍历这些节点,输出每个标题的文本内容。