《JavaScript Dom 编程艺术》读书笔记-第8章

充实文档的内容，包括几个方面：

一个为文档创建“缩略图列表”的函数；

一个为文档创建“文献来源链接”的函数；

一个为文档创建“快捷键清单”的函数。

<abbr>在HTML5 中以取代<acronym>。

标记选择：

HTML，允许省略部分结束标签（</p>，</li>）。标签和属性可以大写和小写。

XHTML，有严格要求，督促我们写出更严谨清晰的文档。仅允许标签名和属性名用小写字母。所有标签必须闭合。

HTML5，<!DOCTYPE html> 改标记支持HTML，XHTML。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <link rel="stylesheet" media="screen" href="typography.css" />
  <title>Document</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="https://www.baidu.com">
 <p>
 A platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents.
 </p>
  </blockquote>
  <p>
  It is an <abbr title="Application programs interface"> API </abbr> that can be used to navigate <abbr title ="HyperText Markup Language"> HTML </abbr> and <abbr title="eXtensible markup language"> XML </abbr> documents.
  </p>
 </body>
</html>

在浏览器中的显示：

<abbr>标签的title属性在浏览器中是隐藏的。但在鼠标指针悬浮在缩略语上是，title属性会根据不同的浏览器显示不同。让JS集中页面的缩略图，显示缩略图列表脚本

定义列表是表现缩略图及其解释的理想结构。

定义列表<dl>由一系列“定义标题”<dt>和相应的“定义描述”<dd>构成。

window.onload=displayAbbreviation;
function displayAbbreviation(){
    if (!document.getElementsByTagName) return false;
    if (!document.createElement) return false;
    if (!document.createTextNode) return false;

    var abbreviation=document.getElementsByTagName("abbr"); //知道所有缩略词
    var tabletitle=document.createElement("dl");//建表
    var defs=new Array();//存入数组
    for (i=0;i<abbreviation.length ;i++ )
    {
        if (abbreviation[1].childNodes.length<1)
        {
            continue;
        }
        var key=abbreviation[i].firstChild.nodeValue;
        var value=abbreviation[i].getAttribute("title");
        defs[key]=value;
        var abbrvia=document.createElement("dt");
        var txt=document.createTextNode(key);
        abbrvia.appendChild(txt);
        tabletitle.appendChild(abbrvia);
        var descrip=document.createElement("dd");
        txt=document.createTextNode(value);
        descrip.appendChild(txt);
        tabletitle.appendChild(descrip);
    }    
    if (defs)
    {
        var bodyelement=document.getElementsByTagName("body")[0];
        var de=document.createElement("h2");
        txt=document.createTextNode("abbreviation");
        de.append(txt);
        bodyelement.appendChild(de);
        bodyelement.appendChild(tabletitle);
    }    
}

显示“文献来源链接表”

function displayCitations(){
    if (!document.getElementsByTagName)
    {
        return false;
    }
    if (!document.createElement)
    {
        return false;
    }
    if (!document.createTextNode)
    {
        return false;
    }
    var cite=document.getElementsByTagName("blockquote");
    for (var i=0;i<cite.length ;i++ )
    {
        if (!cite[i].getAttribute("cite"))
        {
            continue;
        }
        var webcite=cite[i].getAttribute("cite");
        var source=document.createElement("a");
        var txt=document.createTextNode("cite");
        source.setAttribute("href",webcite);
        source.appendChild(txt);
        var supscript=document.createElement("sup");
        supscript.appendChild(source);
        var citeChildren=cite[i].getElementsByTagName("*");
        citeChildren[citeChildren.length-1].appendChild(supscript);
    }
}

显示“快捷键清单”

function displayAccessKeys(){
    if (!document.getElementsByTagName) return false;
    if (!document.createElement) return false;
    if (!document.createTextNode) return false;
    var link=document.getElementsByTagName("a");
    var acckey=new Array();
    for (var i=0;i<link.length ;i++ )
    {
        if(!link[i].getAttribute("accesskey") || !link[i].getAttribute("href"))
            continue;
        var key=link[i].getAttribute("accesskey");
        var value=link[i].getAttribute("href");
        acckey[key]=value;
    }
    var list=document.createElement("ul");
    for (key in acckey)
    {
        var alist=document.createElement("li");
        var txt=key+" : "+value;
        var txtnode=document.createTextNode(txt);
        alist.appendChild(txtnode);
        list.append(alist);

    }
    var head=document.createElement("h3");
    txt=document.createTextNode("AccessKey");
    head.appendChild(txt);
    document.body.appendChild(head);
    document.body.appendChild(list);

}

小结：

1. 本章提供了几个有意思的脚本，还可以为文档生成目录：把文档里的h1和h2元素提取出来放入一份清单，再将其插入到文档的开头。甚至可以把这份清单里的列表项加强为一些可以让用户快速到达各有关标题的内部链接。

2. 最有用的DOM方法：

getElementsByTagName

getElementById

getAttribute

createElement

createTextNode

appendChild

insertBefore

setAttribute

posted on 2018-11-20 20:02 Yaocylulu 阅读(271) 评论(0) 编辑收藏举报

刷新页面返回顶部

Yaocylulu

导航

公告

《JavaScript Dom 编程艺术》读书笔记-第8章