《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

《JavaScript Dom 编程艺术》读书笔记-第8章的更多相关文章

JavaScript DOM编程艺术读书笔记(三)
第七章动态创建标记在web浏览器中往文档添加标记,先回顾下过去使用的技术: <body> <script type="text/javascript"> ...
JavaScript DOM编程艺术读书笔记(二)
第五章最佳实践平稳退化(graceful degradation):如果正确使用了JavaScript脚本,可以让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利地浏览你网站.虽然某 ...
JavaScript DOM编程艺术读书笔记(一)
第一章,第二章 DOM:是一套对文档的内容进行抽象和概念化的方法. W3C中的定义:一个与系统平台和编程语言无关的接口,程序和脚本可以通过这个接口动态的访问和修改文档的内容,结构和样式. DHTML( ...
JavaScript DOM编程艺术 - 读书笔记1-3章
1.JavaScript语法准备工作一个普通的文本编辑器,一个Web浏览器. JavaScript代码必须通过Html文档才能执行,第一种方式是将JavaScript代码放到文档<head& ...
JavaScript DOM编程艺术读书笔记
2. JavaScript语法 2.1 注释 HTML允许使用"<!--"注释跨越多个行,但JavaScript要求这种注释的每行都必须在开头加上"< ...
JavaScript DOM编程艺术读书笔记(四)
第十章实现动画效果 var repeat = "moveElement('"+elementID+"',"+final_x+","+fin ...
JavaScript DOM编程艺术-学习笔记（第二章）
1.好习惯从末尾加分号:开始 2.js区分大小写 3.程序界万能的命名法则:①不以,数字开头的数字.字母.下划线.美元符号 ②提倡以下划线命名法来命名变量,以驼峰命名法来命名函数.但是到了公司往往会身 ...
《javascript dom编程艺术》笔记（一）——优雅降级、向后兼容、多个函数绑定onload函数
刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 ...
JavaScript DOM编程艺术学习笔记（一）
嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...
JavaScript DOM编程艺术-学习笔记
发现基础不是很好,补习一下.37买了2本书(dom编程和高级程序设计). 以前读书总是自己勾勾画画,有点没意思.现在写下来,说不定会成为传世经典.哈哈...........随便扯扯淡. 第一天(201 ...

随机推荐

debug调试命令
记录Js 文本框验证与 IE兼容性
最近的日常就是将测试小姐姐提交的bug进行修改,想来这种事情还是比较好开展的,毕竟此项目已上线一年多,现在只是一些前端的问题需要改正.实际上手的时候并不是这样,原项目是在谷歌上运行,后来由于要新增一个 ...
vue移动端金融UI组件库滴滴MandMobile面向金融场景设计附功能思维导图
vue移动端金融UI组件库滴滴MandMobile面向金融场景设计附功能思维导图 Mand Mobile是面向金融场景设计的移动端组件库,基于Vue.js实现.目前已实际应用于滴滴四大金融业务板块的1 ...
List 循环删除指定元素的方法
使用Iterator进行循环,在删除指定元素.如果使用for 或 foreach 在删除指定下标是,list.size 会相应的缩短且下标前移,导致相邻满足条件的元素未删除 Iterator<S ...
MySQL查询命令_SELECT 子查询
首先创建一个table mysql> create table Total (id int AUTO_INCREMENT PRIMARY KEY,name char(20),stu_num in ...
【题解】Luogu P2472 [SCOI2007]蜥蜴
原题传送门题目要求无法逃离的最少有多少直接做肯定不好做,我们帮题目变一个说法:最多能逃离多少这个询问一看就是最大流考虑如何建图: 1.将S和每一个有蜥蜴的点连一条流量为1的边(每个蜥蜴只能用1 ...
Python3 tkinter基础 OptionMenu 点击按钮，出现单选的下拉列表
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
Python3 tkinter基础 Menubutton 点击按钮出现下拉菜单
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
lambda Helper
/// <summary> /// 操作表达式共通类,条件并且,或者操作等 /// </summary> public static class PredicateBuilde ...
近期Freecodecamp问题总结
最近没什么事,刷了freecodecamp的算法题,发现了自己基础的薄弱 1 where are thou 写一个 function,它遍历一个对象数组(第一个参数)并返回一个包含相匹配的属性-值对( ...

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

《JavaScript Dom 编程艺术》读书笔记-第8章的更多相关文章

随机推荐

热门专题