Javascript DOM 编程艺术 Chap8 缩略语列表

最新推荐文章于 2024-08-15 08:55:57 发布

Bingersoda

最新推荐文章于 2024-08-15 08:55:57 发布

阅读量77

点赞数

分类专栏： when i come across it 文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/Bingersoda/article/details/121160307

版权

when i come across it 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

把缩略语放进js展现出来

html 内容

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Explaning the document object model</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>What is the Dcument 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/">
      A platform...
    </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 src="displayAbbreviations.js" charset="utf-8"></script>
  </body>
</html>

js内容

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

  //遍历文档中的abbr元素
  var abbreviations = document.getElementsByTagName("abbr");

  //如果文档里没有abbr元素
  if (abbreviations.length < 1) return false;

  //如果有，保存abbr元素
  var defs = new Array();
  for (var i = 0; i < abbreviations.length; i++) {
    var current_abbr = abbreviations[i];
    //取得title属性的值，并赋予给definition
    var definition = current_abbr.getAttribute("title");
    //获得abbr文本节点的值，赋予给key
    var key = current_abbr.lastChild.nodeValue;
    //将key作为defs的下标，可以在一个数组里同时储存key和definition
    defs[key] = definition;
  }

  //创建dl元素
  var dlist = document.createElement("dl");

//对于defs关联数组的每个键，把它的值赋给变量key
  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");
    //创建新变量将definition的值赋给它
    var ddesc_text = document.createTextNode(definition);
    //将文本节点添加到元素节点上
    ddesc.appendChild(ddesc_text);
    //将dd添加到dlist上
    dlist.appendChild(dtitle);
    //将dt添加到dlist上
    dlist.appendChild(ddesc);
  }

  //创建h2，元素节点
  var header = document.createElement("h2");
  //创建h2内容，文本节点
  var header_text = document.createTextNode("Abbreviations");
  //将文本节点添加到元素节点上
  header.appendChild(header_text);
  //将标题和列表添加到网页body上
  document.body.appendChild(header);
  document.body.appendChild(dlist);
}

window.onload = displayAbbreviations();

Bingersoda

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript DOM 编程艺术 Chap8 缩略语列表

把缩略语放进js展现出来html 内容<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Explaning the document object model</title> <link rel="stylesheet" href="style.css"> </head
复制链接

扫一扫