DOM学习之充实文档内容

Posted xueyunno1

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM学习之充实文档内容相关的知识，希望对你有一定的参考价值。

html代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>充实文档内容</title>
    <link rel="stylesheet" href="css/typography.css">
</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="www.w3c.org/DOM/">
        <p>
            Aplatform- and language-neutral interface that will allow programs and scripts to dynamically 
            access and update the content,structure and style of documnents.
        </p>
    </blockquote>
    <p>
        It is an <abbr title="Application programming 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>
    <script type="text/javascript" src="js/displayAbbreviations.js"></script>
</body>

</html>

JavaScript代码

//页面加载完时执行函数
function addloadevent(func) { //参数放入你界面加载完要执行的函数
    var oldonload = window.onload;
    if (typeof window.onload != ‘function‘) {
        window.onload = func;
    } else {
        oldonload();
        func();
    }
}
function displayAbbreviations() {
    // 检查元素是否兼容
    if (!document.createElement || !document.getElementsByTagName || !document.createTextNode) return false;
    //获取文档所有abbr标签
    var abbreviations = document.getElementsByTagName("abbr");

    //判断如果文档没有abbr标签，函数执行结束。
    if(abbreviations.length < 1) return false;
    //创建一个数组用来存储abbr的title属性值
    var defs = new  Array();
    //便利abbr标签
    for(var i = 0 ; i<abbreviations.length;i++){
        //获取abbr中的属性值存入definition变量中
        var definition =  abbreviations[i].getAttribute("title");
        //获取abbr中的缩略语句
        var key = abbreviations[i].lastChild.nodeValue;
        //将2个变量存入数组中，key用作数组元素的小标(键)来存储，definition用作数组元素的值来存储
        defs[key] = definition;
    }
    //创建标记节点
    var dlist = document.createElement("dl");
    //循环取出数组中的键 和值
    for (key in defs) {
        var definition = defs[key];
        //创建一个dt标签
        var dtitle = document.createElement("dt");
        //用变量key的值创建一个文本节点
        var dtitle_text = document.createTextNode(key);
        dtitle.appendChild(dtitle_text);
        //同样操作 ↑ 创建dd标签
        var ddesc = document.createElement("dd");
        var ddesc_text = document.createTextNode(definition);
        ddesc.appendChild(ddesc_text);
        //创建好的标签插入dl中
        dlist.appendChild(dtitle);
        dlist.appendChild(ddesc);
    }
    //创建一个H2标题
    var header = document.createElement("h2");
    var header_text = document.createTextNode("Abbreviations");
    header.appendChild(header_text);
    //创建好的列表和标题插入body中
    document.body.appendChild(header);
    document.body.appendChild(dlist);

}
addloadevent(displayAbbreviations);

 

以上是关于DOM学习之充实文档内容的主要内容，如果未能解决你的问题，请参考以下文章

前端学习之DOM操作

《DOM Scripting》学习笔记-——第八章 充实文档的内容

jQuery_DOM学习之------创建节点及节点属性

轻松学习JavaScript十八：DOM编程学习之DOM简单介绍

JQuery学习之遍历

Day09 JavaWeb学习之Xml 02