JS DOM 第八章-充实的文档内容_javascript dom 第八章-CSDN博客

本文链接：https://blog.csdn.net/conan25216/article/details/43564395

8.1 不应该做什么

如果你察觉到自己正在使用DOM技术把一些重要的内容添加到网页上，应该立刻停止并检讨思路，因为很有可能你正在滥用DOM。

两个原则：1、渐进增强；2、平稳退化。

8.2 内容

<!DOCTYPE html>
<html lang = "en">
	<head>
		<meta charset = "utf-8"/>
		<link rel ="stylesheet" media = "screen" href = "styles/8.css"/>
		<title>Explaining The Document Object Model</title>
	</head>
	<body>
		<h1>What Is The Document Object Model?</h1>
		<p>
		The <abbr title = "World Wide Web Consortion">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>
	//	<script src = "scripts/addLoadEvent.js"></script>
	//	<script src = "scripts/displayAbbreviations.js"></script>
	</body>
</html>

效果如图

优化一下，这样HTML文件有点太复杂，我们想把abbr标签的内容，拎出来，用一个页面集中显示。比如利用DOM在body中添加如下代码

    <dl>
	<dt>W3C</dt>
	<dd>World Wide Web Consortium</dd>
	<dt>DOM</dt>
	<dd>Document Object Model</dd>
	<dt>API</dt>
	<dd>Application Programming Interface</dd>
	<dd>HTML</dd>
	<dd>HyperText Markup Language</dd>
	<dt>XML</dt>
	<dd>Extensible Markup Language</dd>
    </dl>

displayAbbreviations.js

function displayAbbreviations(){
	if(!document.getElementsByTagName||!document.createElement
	||!document.createTextNode) return false;
 	var abbreviations = document.getElementsByTagName("abbr");  //获取abbr标签；
	if(abbreviations.length < 1) return false;
	var defs = new Array();  //创建数组，用以存储key 和 definition；
	for(var i = 0 ;i<abbreviations.length;i++){      
		var current_abbr = abbreviations[i];  
		var definition = current_abbr.getAttribute("title"); //取definition
		var key = current_abbr.lastChild.nodeValue; //取key 
		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);
	}
	var header = document.createElement("h2");    
	var header_text = document.createTextNode("Abbreviations");  //创建小标题
	header.appendChild(header_text);
	document.body.appendChild(header);  //标题添加到body标签；
	document.body.appendChild(dlist);   //dlist添加到body标签；
}
addLoadEvent(displayAbbreviations);

最终效果