JavaScript_DOM编程艺术第二版学习笔记-第8章

最新推荐文章于 2020-12-16 22:34:54 发布

香雪儿sofia

最新推荐文章于 2020-12-16 22:34:54 发布

阅读量1k

点赞数

分类专栏： JavaScript+DOM编程文章标签： javascript 技术编程 dom

本文链接：https://blog.csdn.net/sofia92/article/details/50349630

版权

JavaScript+DOM编程专栏收录该内容

8 篇文章 1 订阅

订阅专栏

上一章节学会利用DOM方法和属性来动态创建标记，这一章节，我们将继续在实践中利用这些技术。

8.1 不应该做什么

理论上，我们可以用JS把一些重要的内容添加到网页上。事实上这是一个坏主意，因为这样一来JS就没有任何空间去平稳退化。那些缺乏必要的JS支持的访问者就会永远也看不到你的重要内容。
如果察觉到自己正在使用DOM技术把一些重要的内容添加到网页上，则应该立即停下来去检讨，很可能你会发现自己正在滥用DOM！
第五章，我们强调了两项原则要牢记在心：

渐进增强。渐进增强原则基于这样一种思想：你应该总是从最核心的部分，也就是从内容开始，应该根据内容使用标记实现良好的结构，然后再逐步加强这些内容。这些增强工作既可以是通过CSS改进呈现效果，也可以通过DOM添加各种行为。
平稳退化。渐进增强的实现必然支持平稳退化。如果按照渐进增强的原则去充实内容，你为内容添加的样式和行为就自然支持平稳退化，那些缺乏必要的CSS和DOM支持的访问者仍可以访问到你的核心内容。如果你有JS去添加这些重要内容，它就没法支持平稳退化，不支持JS，就看不到内容。

8.2 把“不可见”变成“可见”

通过设置元素的display属性，可以实现元素的显示与否，以及怎样排列。如果display=inline则会使元素横向排列。display=block元素纵向排列。display=none则会隐藏元素，使其不可见，这个元素仍是DOM节点树的组成部分，只是浏览器不显示它们而已。
除了标签之间的内容以外，标签内容的属性中也包含语义信息。在显示属性这个问题上，你只能听任浏览器摆布。其实只需要一点点DOM编程，我们就能把这种控制权重新掌握在自己的手里。本章我们着眼于使用DOM技术为网页添加一些实用的小部件。

得到隐藏在属性里的信息
创建标记封装这些信息
把这些标记插入到文档

8.3 选用HTML、XHTML还是HTML5

对于标记而言，选用HTML、XHTML是你的自由，重要的是不管选用哪种文档类型，使用的标记必须与选用的DOCTYPE声明保持一致。HTML5的文档声明已经变得非常简单：<!DOCTYPE html>，它同样也支持HTML和XHTML标记。
对于这段文字：The W3C defines the DOM .
我们添加标记应该是：<p>The <abbr tittle="World Wide Web Consortium"> W3C defines the <abbr tittle="Document Object Model">DOM</p>
上面内容中的缩略语，已经用<abbr>标签标识出来了。
如果在Web浏览器里加载，就可以看到有些浏览器会把缩略语显示为带有下划线或下划点的文本，另一些浏览器则会把缩略语显示为斜体。

8.3.1 CSS

缩略语在默认浏览器的样式中，会有下划线出现，我们可以自己编写CSS样式，实现去除下划线的效果：abbr{text-decoration:none;border:0;}

8.3.2 JS

缩略语（abbr标签）的title属性在浏览器里是隐藏的。有些浏览器会在你把鼠标指针悬停在缩略语上时，将它的title属性显示为一个弹出式的提示消息。就像浏览器所使用的默认样式一样。浏览器对缩略语的默认呈现行为也是各有各的做法。
就像我们可以用自己的CSS样式表去取代浏览器所使用的默认样式那样，你也可以用DOM去改变浏览器的默认行为。

8.4 显示“缩略语列表”

这里写图片描述
HTML

<html>
<head>
    <meta charset = "utf-8">
    <title>Explaning the DOM</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 programs and scripts to dynamically access and update the content.Structure and style of documents.
        </p>
    </blockquote>
    <p>
        It is an <abbr title="aa pp ii">API</abbr> that can be used to navigate <abbr title="hh tt mm ll">HTML</abbr> and <abbr title="XX MM LL">XML</abbr>documents.
    </p>
    <script src="./../javascripts/addLoadEvent.js"></script>
    <script src="./../javascripts/displayAbbreviations.js"></script>
</body>
</html>

JS
displayAbbreviations.js

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++) {
        // 下面的if判断是告诉IE浏览器，统计abbr元素时不再继续执行这个循环中的后续代码
        if (abbreviations[i].childNodes.length < 1) continue;
        var definition = abbreviations[i].getAttribute("title");
        var key = abbreviations[i].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); 
    }
    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);
    // 把定义列表添加到页面主体
    document.body.appendChild(dlist);
}
addLoadEvent(displayAbbreviations);

addLoadEvent.js（多个场合可使用）

function addLoadEvent(func){
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    }else{
        window.onload = function(){
            oldonload();
            func();
        }
    }
}

香雪儿sofia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript_DOM编程艺术第二版学习笔记-第8章

上一章节学会利用DOM方法和属性来动态创建标记，这一章节，我们将继续在实践中利用这些技术。8.1 不应该做什么理论上，我们可以用JS把一些重要的内容添加到网页上。事实上这是一个坏主意，因为这样一来JS就没有任何空间去平稳退化。那些缺乏必要的JS支持的访问者就会永远也看不到你的重要内容。如果察觉到自己正在使用DOM技术把一些重要的内容添加到网页上，则应该立即停下来去检讨，很可能你会发现自己正在滥
复制链接

扫一扫

专栏目录