使用DOM方法在文档中检索或添加信息的方法以及example代码

来源：互联网发布：linux usr local 编辑：程序博客网时间：2024/06/07 18:09

本文来自学习JavaScript DOM编程艺术一书时的笔记和总结等。

1、需要对文档中现有信息进行检索时，以下DOM方法最有用：

getElementById
getElementByTagName
getAttribute

2、需要把信息添加到文档中去时，以下DOM方法最有用：

createElement
createTextNode
appendChild
insertBefore
setAttribute

3、JS使用的注意事项

JavaScript脚本只应该用来充实文档的内容，要避免使用DOM技术来创建核心内容
利用上述技术可以为文档生成一份目录，把文档里的h1和h2元素提取出来放入一份清单，再将其插入到文档的开头。甚至可以继续提供些增强功能，为用户提供可以快速到达各有关标题的内部链接

4、一个应用上述DOM技术的js使用样例

（1）HTML标记文件explanation.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8" />    <title>Explaining the Document Object Model</title>    <link rel="stylesheet" media="screen" href="styles/typography.css" />    <script type="text/javascript" src="scripts/addLoadEvent.js"></script>    <script type="text/javascript" src="scripts/displayAbbreviations.js"></script>    <script type="text/javascript" src="scripts/displayCitations.js"></script>    <script type="text/javascript" src="scripts/displayAccesskeys.js"></script></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="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>        <ul id="navigation">        <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="0">Contact</a></li>    </ul></body></html>

（2）提供浏览器打开页面时自动加载函数功能的addLoadEvent.js

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

（3）把文档里的缩略语显示为一个缩略语列表的displayAbbreviations.js

function displayAbbreviations() {    //把文档里的缩略语显示为一个缩略语列表    //DOM元素功能函数的兼容性判断    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++) {        var current_abbr = abbreviations[i];        //ie6不支持abbr元素，在统计abbr元素的子节点时总是会返回一个0，这里进行了兼容处理，避免ie6去执行并不支持的DOM方法        if (current_abbr.childNodes.length < 1) continue;        var definition = current_abbr.getAttribute("title");        var key = current_abbr.lastChild.nodeValue;        defs[key] = definition;    }    //创建定义列表    var dlist = document.createElement("dl");    //遍历数组defs    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);    }    //当存在浏览器兼容性问题而没有正常生成dlist定义列表数据时，直接退出函数，避免发生兼容问题    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);

（4）为把文档里引用的每段文献节选生成一个文献来源链接的displayCitations.js

function displayCitations() {    //函数功能为把文档里引用的每段文献节选生成一个文献来源链接    //DOM元素方法针对低版本浏览器的兼容性检查    if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;    //取得所有引用    var quotes = document.getElementsByTagName("blockquote");    //遍历引用    for (var i=0; i<quotes.length; i++) {        //如果没有cite属性则继续循环        if (!quotes[i].getAttribute("cite")) continue;        //保存cite属性        var url = quotes[i].getAttribute("cite");        //取得引用中的所有元素节点        var quoteChildren = quotes[i].getElementsByTagName('*');        //如果没有元素节点，则继续循环        if (quoteChildren.length < 1) continue;        //取得引用中的最后一个元素节点        //这里不能使用元素的lastChild方法，因为在html标记文件blockquote元素中的最后一个子元素后的回车符可能被部分浏览器识别为一个元素，而导致错误        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");        superscript.appendChild(link);        //把标记添加到引用中的最后一个元素节点        elem.appendChild(superscript);    }}addLoadEvent(displayCitations);

（5）把文档所支持的快捷键显示为一份快捷键清单的displayAccesskeys.js

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];        //如果没有accesskey属性则继续循环        if (!current_link.getAttribute("accesskey")) continue;        //取得access的值        var key = current_link.getAttribute("accesskey");        //取得链接文本        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);}addLoadEvent(displayAccesskeys);

（6）本样例中使用的CSS文件typography.css

body {    font-family: "Helvetica","Arial",sans-serif;    font-size: 10pt;}abbr {    text-decoration: none;    border: 0;    font-style: normal;}

阅读全文

0 0