JavaScript学习笔记--09

来源：互联网发布：封面ps软件编辑：程序博客网时间：2024/06/06 05:26

充实文档的内容

运用前面学习的技巧到实践中，运用那些DOM方法和属性去创建一些有用的HTML内容并把它们添加到网页里。

编写一个explanation.html文件：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>Explaining the Document Object Model</title></head><body><h1>What is the Document Object Model?</h1><p>    The <abbr title="World Wide Web Consortium">W3C</abbr> defines    the <abbr title="Document Object Model">DOM</abbr> as:</p><blockquote cite="http://www.w3.org/DOM/"><p>A platform- and language-neutral interface that will allow programsand scripts to dynamically access and updata thecontent,structure and style of documents.</p></blockquote><p>    It is an <abbr title="Application Programming Interface">API</abbr>    that can be used to navigate <abbr title="HyperText Markuo Language">    HTML</abbr> and <abbr title="eXtensible Markup Language">XML</abbr>    documents.</p></body></html>

显示效果如下：

CSS

还可以用自己的样式表来取代浏览器的默认样式。

新建样式typography.css文件：

body{    font-family: "Helvetica", "Arial", san-serif;    font-size: 10pt;}abbr{    text-decoration: none;    border:0;    font-style: normal;}

网页效果图：

JavaScript代码

缩略词语（<abbr>标签）的tilte属性在浏览器里一般是不可见的。有些浏览器会在鼠标指针悬停在缩略词语上方时，把它的title属性显示为一个弹出式提示框。就像浏览器所使用的默认样式一样，浏览器对缩略语的默认呈现行为也是各有各的做法。

类似于用自己的CSS样式去取代浏览器所使用的默认样式，也可以用DOM脚本去改变浏览器的默认行为。

显示“缩略词语表”

<dl>    <dt>W3C</dt>    <dd>World Wide Web Consortium</dd>    <dt>DOM</dt>    <dd>Document Object Model</dd>    <dt>API</dt>    <dd>Application Programming Interface</dd>    <dt>HTML</dt>    <dd>HyperText Markup Language</dd>    <dt>XML</dt>    <dd>eXtensible Markup Language</dd></dl>

下面将使用一些DOM方法和属性来创建这个定义表，具体步骤如下：

（1）遍历这份文档中的所有abbr元素；

（2）把每个abbr元素的title 属性提取出来；

（3）把每个abbbr元素的值提取出来；

（4）创建一个“定义表”元素（即dl元素）；

（5）遍历刚才提取出来的title属性值和abbr元素的值；

（6）遍历一个“定义标题”元素（即dt元素）；

（7）把abbr元素的值插入这个dt元素；

（8）创建一个“定义描述”元素（即dd元素）；

（9）把title属性插入这个dd元素；

（10）把dt元素追加到第四步创建的dl元素上；

（11）把dd元素追加到第四步创建的dl元素上；

（12）把dd元素追加到explanation.html文档的body元素上。

将编写一个函数来完成以上步骤，并把这个函数命名为displayAbbreviations()。然后将其保存到displayAbbreviations.js文件中并存放发到子目录scripts里去。

编写displayAbbreviations()函数

用getElementsByTagName()方法将所有的abbr元素找出来：

var abbreviations=document.getElementsByTagName("abbr");

判断文档里是否有缩略语：

if(abbreviations.length<1) return false;

定义一个数组来存取<abbr>标签的文本以及每个tilte属性的值：

var defs=new Array();

遍历abbreviations数组：

for(var i=0;i<abbreviations.length;i++)

使用getAttribute()方法把titile属性值提取出来并把其保存到变量definition里：

var definition=abbreviations[i].getAttribute("title");

用nodeVaule属性提出<abbr>标签里的缩略语（即文本节点的值）：

var key=abbreviations[i].lastChild.nodeValue;

把definition和key这两个变量的值保存到defs数组里：把其中之一用作数组元素的下标（关键字），另一个用作数组元素的值：

defs[key]=definition;

for循环的完整代码：

for (var i=0;i<abbreviations.length;i++){        var current_abbr=abbreviations[i];//让函数更容易理解和阅读        var definition=abbreviations[i].getAttribute("title");        var key=abbreviations[i].lastChild.nodeValue;        defs[key]=definition;    }

创建HTML内容

可以用createElement()方法去创建这个定义表，并把新创建的dl元素复制给变量dlist：

var dlist=document.createElement("dl");

for/in循环

for/in循环的独特之处是，它可以把某个数组的下标（键字）临时地赋值给一个变量：for (variable in array)

在for/in循环进入第一次循环时，变量variable将被赋值给array的第一个元素的下标值；在进入第二次循环时，变量variable将被赋值给array的第二个元素的下标值；以此类推，直到遍历完数组array里的所有元素为止。

for (key in defs){//for-in语句是一种精准的迭代语句，可以用来枚举对象的属性        var definition=defs[key];        //create the definition title        var dtitle=document.createElement("dt");        var dtitle_text=document.createTextNode(key);        dtitle.appendChild(dtitle_text);        //create the definition description        var ddesc=document.createElement("dd");        var ddesc_text=document.createTextNode(definition);        ddesc.appendChild(ddesc_text);        //add them to the definition list        dlist.appendChild(dtitle);        dlist.appendChild(ddesc);    }

完整的displayAbbreviations()函数如下：

function displayAbbreviations(){    if(!document.getElementsByTagName||!document.createElement||!document.createTextNode) return false;//进行必要检查    //get all the abbreviations    var abbreviations=document.getElementsByTagName("abbr");    if(abbreviations.length<1) return false;    var defs =new Array();    //loop through the abbreviations    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;    }    //create the definition list    var dlist=document.createElement("dl");    //loop through the definitions    for (key in defs){//for-in语句是一种精准的迭代语句，可以用来枚举对象的属性        var definition=defs[key];        //create the definition title        var dtitle=document.createElement("dt");        var dtitle_text=document.createTextNode(key);        dtitle.appendChild(dtitle_text);        //create the definition description        var ddesc=document.createElement("dd");        var ddesc_text=document.createTextNode(definition);        ddesc.appendChild(ddesc_text);        //add them to the definition list        dlist.appendChild(dtitle);        dlist.appendChild(ddesc);    }    //create a headline    var header=document.createElement("h2");    var header_text=document.createTextNode("Abbreviations");    header.appendChild(header_text);    //add the headline to the body    document.body.appendChild(header);    //add the definition list to the body    document.body.appendChild(dlist);}

当然，还要安排这个函数在页面加载时被调用。由于之前我保存了addLoadEvent()函数，所以，类似于前面的只需添加一条语句到displayAbbreviations.js文件里：

addLoadEvent(displayAbbreviations);

完整的explanation.html文件如下：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <link rel="stylesheet" type="text/css" media="screen" href="styles/typography.css" />    <script type="text/javascript" src="scripts/addLoadEvent.js">    </script>    <script type="text/javascript" src="scripts/displayAbbreviations.js">    </script>    <title>Explaining the Document Object Model</title></head><body><h1>What is the Document Object Model?</h1><p>    The <abbr title="World Wide Web Consortium">W3C</abbr> defines    the <abbr title="Document Object Model">DOM</abbr> as:</p><blockquote cite="http://www.w3.org/DOM/"><p>A platform- and language-neutral interface that will allow programsand scripts to dynamically access and updata thecontent,structure and style of documents.</p></blockquote><p>    It is an <abbr title="Application Programming Interface">API</abbr>    that can be used to navigate <abbr title="HyperText Markuo Language">    HTML</abbr> and <abbr title="eXtensible Markup Language">XML</abbr>    documents.</p></body></html>

遗憾地是，我按照这个写下来，没有出现理想中的样子。暂时还不明原因！留待后面思考。

显示“文献来源链接表”

仔细看explanation.html文档中的HTML内容，blockquote元素包含着一个属性cite。这个属性是可选的，它的基本用途是给出一个用来告诉人们blockquote元素的内容是来自何方的url地址。

可以按照下面的步骤收集和显示blockquote元素的cite属性所包含的信息：

1.遍历整个文档里所有blockquote元素；

1.从blockquote元素提取出cite属性的值；

3.创建一个表示文本是“source”的链接；

4.把这个链接赋值为blockquote元素的cite属性值；

把这个链接插入到文献节选的末尾。

根据上述步骤编写一个名为“displayCitations”的JavaScript函数，并把它们放到dispalyCitations.js里。

dispalyCitations.js完整代码如下：

function displayCitations(){    if(!document.getElementsByTagName||!document.createElement        ||!document.createTextNode) return false;    //get all the blockquotes    var quotes=document.getElementsByTagName("blockquote");    //loop through all the blockquotes    for(var i=0;i<quotes.length;i++){    //if there is no cite attribute,continue the loop    if(!quotes[i].getAttribute("cite")) continue;    //store the cite attribute    var url=quotes[i].getAttribute("cite");    //get all the element nodes in the blockquote    var quotesChildren=quotes[i].getElementsByTagName('*');//通配符*可以把所有的元素——不管具体HTML元素是什么都返回给我们  //if there are no element node,continue the loop    if(quotesChildren.length<1) continue;   //get the last element node in the blockquote    var elem=quoteChildren[quoteChildren.length-1];        //create the markup        var link=document.createElement("a");        var link_text=document.createTextNode("source");        link.appendChild(link_text);        link.setAttribute("href",url);        var superscript=document.createTextNode("sup");        superscript.appendChild(link);        //add the markup to the last element node in the blockquote        elem.appendChild(superscript);    }}

当然，还要安排这个函数在页面加载时被调用。由于之前我保存了addLoadEvent()函数，所以，类似于前面的只需添加一条语句到dispalyCitations.js文件里。

addLoadEvent(displayCitations);

显示“快速访问键清单”

.1.HTML内容

accesskey属性可以把一个元素（例如：一个链接）与键盘上的某个特定按键关联在一起。

下面是accesskey属性是一个例子：

<a href="index.html" accesskey="1" >Home</a>

一般来说，accesskey=“1”对应着一个“返回本网站主页”的链接；accesskey=“2”对应着一个“后退到前一页面”的链接；accesskey=“4”对应着一个“打开本网站的搜索表单/页面”的链接；accesskey=“9”对应着一个“本网站联系办法”的链接；accesskey=“0”对应着一个“查看本网站的快速访问键清单”的链接。

<ul id="navigation">    <li><a href="index.html" accesskey="1">Home</a></li>    <li><a href="search.html" accesskey="4">Search</a></li>    <li><a href="contact" accesskey="9">Contact</a></li></ul>

把上面这段代码添加到explanation.html文档的<body>标签的开头。

2.JavaScript代码
利用DOM技术，完全可以动态地创建一份快速访问键清单。下面是具体的步骤：

（1）把文档里的所有的链接全部提取出到一个节点集合里；

（2）遍历整个节点集合里的所有链接；

（3）如果整个链接带有accesskey属性，就把它的值保存起来；

（4）把这个链接在浏览器窗口里的屏显标识文字也保存起来；

（5）创建一个清单（ul元素），这个清单就是“快速访问键清单”；

（6）为拥有快速访问键的各个链接分别创建一个列表项（li元素）；

（7）把列表项添加到“快速访问键清单”里；

（8）把“快速访问键清单”添加到文档里。

function displayAccesskeys(){    if(!document.getElementsByTagName||!document.createElement        ||!document.createTextNode) return false;    //get all the links in the document    var links=document.getElementsByTagName("a");    //create an array to store the access keys    var akeys =new Array();    //loop through the links    for (var i=0;i<links.length;i++){        var current_link=links[i];//让函数更容易理解和阅读        //if there is no accesskey attribute,continue the loop        if(!current_link.getAttribute("accesskey")) continue;        //get the value of the accesskey        var key=current_link.getAttribute("accesskey");        //get the value of the link text        var text=current_link.lastChild.nodeValue;        //add them to the array        akeys[key]=text;    }    //create the  list    var list=document.createElement("ul");    //loop through the access keys    for (key in defs){//for-in语句是一种精准的迭代语句，可以用来枚举对象的属性        var text=akeys[key];        //create the string to put in the list item        var str=key+":"+text;        //create the list item        var item=document.createElement("li");        var item_text=document.createTextNode(str);        item.appendChild(item_text);        //add the list item to the list        list.appendChild(item);    }    //create a headline    var header=document.createElement("h3");    var header_text=document.createTextNode("Accesskeys");    header.appendChild(header_text);    //add the headline to the body    document.body.appendChild(header);    //add the list to the body    document.body.appendChild(dlist);}addLoadEvent(displayAccesskeys);

总结：

在需要对文档里的现有信息进行检索时，以下DOM方法最有用：

createElementById()
getElementsByTagName()
getAttribute()

在需要把信息添加到文档里去时，以下DOM方法最有用：

createElementById()
createTextNode()
appendChild()
insertBefore()
setAttribute()

以上DOM方法的组合可以让我们编写出功能非常强大的DOM脚本。

注意：JavaScript脚本只应该用来充实文档的内容，要避免使用DOM技术来直接插入核心内容。

0 0