《JavaScript DOM 编程艺术》读书笔记

最新推荐文章于 2022-10-05 17:14:21 发布

风醉流觞

最新推荐文章于 2022-10-05 17:14:21 发布

阅读量470

点赞数

分类专栏： JavaScript 文章标签： javascript 读书笔记

本文链接：https://blog.csdn.net/flywaterfree/article/details/51735641

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

《JavaScript DOM 编程艺术》读书笔记——其七

1、充实文档内容：编写几个脚本

需要少量的DOM方法与属性，即可创建一些有用的脚本。
若想通过DOM脚本去充实网页内容，要有制作一份结构良好的标记文档作为前提条件。
在需要对文档里的现有信息进行检索时，以下DOM方法有用：
    getElementById
    getElementByTagName
    getAttribute
在需要把信息添加到文档中时，以下DOM方法有用：
    createElement
    createTextNode
    appendChild
    insertBefore
    setAttribute
以上DOM方法组合即可编写出一些功能强大的脚本。
注：要记住，JavaScript脚本只应用来充实文档的内容，应避免使用DOM技术来创建核心内容。

2、举例：
html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <link rel="stylesheet" href="../css/JavaScript_DOM_编程艺术_test01.css" media="screen" />
    </head>
    <body>  
        <ul>
            <li><a href="index.html" accesskey="1">Home</a></li>
            <li><a href="search.html" accesskey="4">Search</a></li>
            <li><a href="contact.html" accesskey="9">Contact</a></li>
        </ul>
        <br /><br />
        <!--<abbr>标签含义为：缩略语（对单词或短语的简写形式的统称）-->
        <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 programs
                and scripts to dynamically access and update the
                content, structure and style of documents.
            </p>
        </blockquote>
        <p>
            It is an <abbr title="Application Programming Interface">API</abbr>
            that can be used to nevigate <abbr title="HyperText Markup Language">HTML</abbr>
            and <abbr title="extensible Markup Language">XML</abbr> documents.
        </p>    
        <script type="text/javascript" src="../js/几个自写的常用函数脚本.js"></script>
        <script type="text/javascript" src="../js/JavaScript_DOM_编程艺术_test01_displayAbbreviations.js"></script>
        <script type="text/javascript" src="../js/JavaScript_DOM_编程艺术_test01_displayCitations.js"></script>
        <script type="text/javascript" src="../js/JavaScript_DOM_编程艺术_test01_displayAccesskeys.js"></script>
    </body>
</html>

css:

body
{
    font-family: helvetica,arial,sans-serif;
    font-size: 10pt;
}
abbr
{
    text-decoration: none;
    border: 0;
    font-style: normal;
}
li
{
    float: left;
    padding: 1em;
    list-style: none;
}

js:

自写的常用函数脚本.js:

function addLoadEvent(func)//此函数参数为打算在页面加载完毕时执行的函数的名字
{
    var oldonload = window.onload;//网页加载完毕时会触发onload事件
    if(typeof window.onload != 'function')//如果这个处理函数还未绑定任何函数
    {
        window.onload = func;//把新函数添加给它
    }
    else//如果这个处理函数已经绑定了一些函数
    {
        window.onload = function()//把新函数追加到现有指令的末尾
        {
            oldonload();
            func();
        }
    }
}

displayAbbreviations.js:

//显示缩略语列表
addLoadEvent(displayAbbreviations);
function displayAbbreviations()
{
    if(!document.getElementsByTagName || !document.createElement || !document.createTextNode)  return false;
    var abbreviations = document.getElementsByTagName("abbr");//获取文档中的所有abbr元素的节点集合
    if(abbreviations.length < 1)  return false;//判断文档中是否包含有缩略语
    var defs = new Array();//创建一个数组，以便将abbr标签包含的文本及其title属性的值的数据保存起来
    for(var i = 0 ; i <abbreviations.length ; i++)
    {
        if(abbreviations[i].childNodes.length < 1)  continue;//此行代码会使IE浏览器不再继续执行这个循环中的后续代码
        var definition = abbreviations[i].getAttribute("title");//得到title属性的值，即当前缩略语的解释文字
        var key = abbreviations[i].lastChild.nodeValue;//获得abbr元素里文本节点的nodeType属性值，即其标签包含的缩略语文本
        defs[key] = definition;
    }
    var dlist = document.createElement("dl");//创建定义列表
    for(key in defs)//对于defs关联数组里的每个键，将其值赋给变量key
    {
        var definition = defs[key];//利用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);
    }
    if(dlist.childNodes.length < 1)  return false;
    var header = document.createElement("h2");//新建一个描述性标题
    var header_text = document.createTextNode("Abbreviations");
    header.appendChild(header_text);
    document.body.appendChild(header);//引入body标签，添加到页面主题
    document.body.appendChild(dlist);
}

displayCitations.js:

//显示文献来源链接表
addLoadEvent(displayCitations);
function displayCitations()
{
    if(!document.getElementsByTagName || !document.createElement || !document.createTextNode)  return false;
    var quotes = document.getElementsByTagName("blockquote");//获取所有引用
    for(var i = 0 ; i <quotes.length ; i++)
    {
        if(!quotes[i].getAttribute("cite"))  continue;//没有cite属性，则继续循环
        var url = quotes[i].getAttribute("cite");
        var quoteChildren = quotes[i].getElementsByTagName('*');//找到包含在当前blockquote元素里的所有元素节点
        if(quoteChildren.length < 1)  continue;//没有元素节点，则继续循环
        var elem = quoteChildren[quoteChildren.length - 1];//取得引用中最后一个元素节点
        var link = document.createElement("a");
        var link_text = document.createTextNode("source");
        link.appendChild(link_text);
        link.setAttribute("href",url);
        var superscript = document.createElement("sup");//使用sup元素包装，使其在浏览器中呈现出上标的效果
        superscript.appendChild(link);
        elem.appendChild(superscript);
    }
}

displayAccesskeys.js:

//显示快捷键清单
addLoadEvent(displayAccesskeys);
function displayAccesskeys()
{
    if(!document.getElementsByTagName || !document.createElement || !document.createTextNode)  return false;
    var links = document.getElementsByTagName("a");//获取文档中所有链接
    var akeys = new Array();//创建一个数组，保存访问键
    for(var i = 0 ; i < links.length ; i++)
    {
        var current_link = links[i];
        if(!current_link.getAttribute("accesskey"))  continue;//没有accesskey属性，则继续循环
        var key = current_link.getAttribute("accesskey");//获取access值
        var text = current_link.lastChild.nodeValue;
        akeys[key] = text;//获取链接文本，并添加到数组
    }
    var list = document.createElement("ul");//创建列表
    for(key in akeys)//遍历访问键
    {
        var text = akeys[key];
        //创建放到列表项的字符串
        var str = key + ":" + text;
        //创建列表项
        var item = document.createElement("li");
        var item_text = document.createTextNode(str);
        item.appendChild(item_text);
        list.appendChild(item);
    }
    //创建标题
    var header = document.createElement("h3");
    var header_text = document.createTextNode("Accesskeys");
    header.appendChild(header_text);
    document.body.appendChild(header);
    document.body.appendChild(list);
}

3、效果图

这里写图片描述

风醉流觞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《JavaScript DOM 编程艺术》读书笔记

《JavaScript DOM 编程艺术》读书笔记——其七1、充实文档内容：编写几个脚本需要少量的DOM方法与属性，即可创建一些有用的脚本。若想通过DOM脚本去充实网页内容，要有制作一份结构良好的标记文档作为前提条件。在需要对文档里的现有信息进行检索时，以下DOM方法有用： getElementById getElementByTagName getAttribute在
复制链接

扫一扫

专栏目录