第八章 熟练dom的几个常用方法

显示“缩略词语”

---

• <abbr> 标签指示简称或缩写，比如

<abbr title="World Wide Web Consortium">W3C</abbr>

• <acronym> 标签定义首字母缩写。HTML5中已经不支持该标签。建议用<abbr>标签代替。
• ”定义表“（<dl>）由一系列“定义标题”<dt>和相应的“定义描述”<dd>构成。
• for/in循环

它的独特之处是可以把某个数组的下标键字临时赋值给一个变量：for(variable in arry)

 

<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 navigate HTML and XML documents.
</p>

从上面的html文件提取<abbr>,用js显示一个缩略词语表，结构如下图：

js文件如下：

/*编写displayAbbr函数*/
function displayAbbr(){

if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;

var abbr = document.getElementsByTagName("abbr")
if (abbr.length<1) return false; //检查是否有<abbr>

var defs = new Array();
for (var i=0; i<abbr.length; i++){
    var abbrTitle = abbr[i].getAttribute("title");
    var key = abbr[i].lastChild.nodeValue;//提取<abbr>标签里的缩略词语
    
    //abbrTitle和key这两个变量的值保存到defs数组里，其一用作数组下标键字，另一个用作数组元素的值：
    defs[key] = abbrTitle; 
}

/*创建HTML内容*/
var dlist = document.createElement("dl");

//用一个for/in循环去遍历defs数组：
for (key in defs){
    var abbrTitle = 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(abbrTitle);
    ddesc.appendChild(ddesc_text);
    //以上创建了两个分别包含着文本节点的元素节点

    dlist.appendChild(dtitle);
    dlist.appendChild(ddesc);
}

var header = document.createElement("h2");
var header_text = document.createTextNode("Abbreviations");
header.appendChild(header_text);

document.body.appendChild(header);
document.body.appendChild(dlist);

}
window.onload = displayAbbr;

最后效果图示：

 

显示“文献来源连接”

---

 

• continue

continue和break有点类似，区别在于continue只是终止本次循环，接着还执行后面的循环，break则完全终止循环。
可以理解为continue是跳过当次循环中剩下的语句，执行下一次循环。

• <blockquote>：定义块引用，<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。 <q>元素标记短的引用。
• 该标签含属性cite，可选。用途是给出一个url地址告诉我们引用的来源。主流浏览器均忽视 cite 属性的存在，用户是无法看到的。利用js+dom，我们可以让它显示在网页上。

/*显示文献来源*/
/*编写displayCite函数*/
function displayCite(){
    if (!document.getElementsByTagName || !document.createTextNode || !document.createElement) 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]; //取得blockquote元素里的最后一个元素点

        var link = document.createElement("a");
        var link_text = document.createTextNode("source");
        link.appendChild(link_text);
        link.setAttribute("href",url);

        //用sup元素节点包装link,呈现上标效果
        var sup = document.createElement("sup");
        sup.appendChild(link);

        elem.appendChild(sup);
    }
}
window.onload = displayAbbr;