javascript dom編程藝術學習筆記之充實的文檔內容

時間  2019-11-13
標籤 javascript dom 編程 藝術 學習 筆記 充實 文檔 內容 欄目 JavaScript 简体版
原文   原文鏈接

[toc]javascript

1.不該該作什麼

不要使用dom技術把一些重要的東西加到網頁上，你可能正在濫用dom 咱們要始終牢記兩個原則css

  • 漸進加強 從核心內容開始，逐漸用css和javascript加強內容
  • 平穩退化 缺少某些javascript和dom支持，任然能夠訪問你的核心內容

2.把「不可見」變爲「可見」

咱們能夠用css把本來縱向排列的元素顯示在一行，設置display屬性爲inlinehtml

不一樣的瀏覽器呈現例外的屬性千姿百態，有些瀏覽器會把title屬性顯示爲彈出式的提示框，另外一些瀏覽器會把它顯示在狀態欄裏。java

有些瀏覽器把alt設置爲彈出式的提示框，alt屬性的本來用途：在圖片沒法顯示時，用一段文字來描述圖片node

本章內容：瀏覽器

  • 獲得隱藏在屬性的信息
  • 建立標記封裝這些信息
  • 把這些標記插在文檔中

3. 內容

<abbr>標籤是縮略語 <acronym>標籤是首字母縮寫詞 dom念成一個單詞就是首字母縮寫詞，念成三個字母就是縮略語app

3.1.選用HTML,XHTML仍是HTML5

對於標記語言選擇HTML仍是XHTML是你的自由，可是使用的標記必須和你選用的 DOCTYPE聲明保持一致dom

建議使用XHTML，語言有求嚴格函數

HTML5文檔類型聲明簡單，才15個字符oop

3.2 css

略

3.3 javascript

縮略語標籤title屬性是隱藏的，咱們能夠用dom改變瀏覽器的默認行爲

4. 顯示「縮略語列表」

把<abbr>標籤的title屬性集中顯示在一個界面，用一個定義列表元素顯示標籤包含的文本和title屬性 定義列表以下

<dl>javascript
	<dt>W3C</dt>
	<dd>描述</dd>
	<dt>DOM</dt>
	<dd>描述</dd>
	<dt>API</dt>
	<dd>描述</dd>
	<dt>HTML</dt>
	<dd>描述</dd>

能夠用DOM建立這個元素

  • 遍歷這個元素全部abbr元素
  • 保存每隔abbr元素的title屬性
  • 保存每一個abbr的文本
  • 建立一個定義列表元素dl
  • 遍歷剛剛保存的title屬性和abbr文本
  • 建立一個定義標題元素dt
  • 把abbr文本插入dt
  • 建立一個定義描述於元素dd
  • 把title屬性插入dd
  • 把dt追加到dl
  • 把dd追加到dl
  • 把dl追加到body元素
4.1 編寫displayAbbreviations函數
functin displayAbbreviations(){
	var abbreviations = document.getElementByTagName("abbr");
	if (abbreviations.length < 1) return false;
	var defs = new Array();
	for (var i = 0; i < abbreviattions.length; i++){
		var current_abbr = abbreviations[i];
		var definition = curent_abbr.getAttribute("title");
		bar key = current_abbr.lastChilde.nodeValue;
		def[key] = definition;
		}
	}

把循環體寫成一條語句，比較難讀

for (var i = 0; i < abbreviattions.length; i++){
	defs[abbreviations[i].lastChilde.nodeValue] = abbreviations[i].getAttribute("title");
	}
4.2 建立標記
<dl>
		<dt>Title 1</dt>
		<dd>Description 1</dd>
		<dt>Title 2</dt>
		<dd>>Description 2</dd>

建立定義列表

for (key in defs){
	var definition = def[key];
	var dtitle = document.creatElement("dt");
	var dtitle_text = document.creatTextNode(key);
	dtitle.appendChild(dtitle_text);
	var ddesc = document.creatElement("dd");
	var ddesc_text = document.creatTextNode(definition);
	ddesc.appendchild(ddesc_text);
	dlidt.appendChild(dtitle);
	dlidt.appendChild(ddesc);
}
  1. 插入定義列表
    • 建立h2元素節點
    • 建立內容爲Abbreviations的文本節點
    • 把文本節點插入h2元素節點 引用body標籤有兩種作法 第一種：使用DOM Core document.getElementByTagName("body")[0] 第二種：使用HTML-DOM 插入縮略語表標題：document.body.appendChild(header); 插入縮略語表自己: document.body.appendChild(dlist);
    1. 檢查兼容性 這個函數用到了getElementByTagName，creatELement，creatTextNode
function displayAbbreviations() {
  if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
// get all the abbreviations
  var abbreviations = document.getElementsByTagName("abbr");
  if (abbreviations.length < 1) return false;
  var defs = new Array();
// loop through the abbreviations
  for (var i=0; i<abbreviations.length; i++) {
    var current_abbr = abbreviations[i];
    //if (current_abbr.childNodes.length < 1) continue;
    var definition = current_abbr.getAttribute("title");
    var key = current_abbr.lastChild.nodeValue;
    defs[key] = definition;
  }
// create the definition list
  var dlist = document.createElement("dl");
// loop through the definitions
  for (key in defs) {
    var definition = defs[key];
// create the definition title
    var dtitle = document.createElement("dt");
    var dtitle_text = document.createTextNode(key);
    dtitle.appendChild(dtitle_text);
// create the definition description
    var ddesc = document.createElement("dd");
    var ddesc_text = document.createTextNode(definition);
    ddesc.appendChild(ddesc_text);
// add them to the definition list
    dlist.appendChild(dtitle);
    dlist.appendChild(ddesc);
  }
  //if (dlist.childNodes.length < 1) return false;
// create a headline
  var header = document.createElement("h2");
  var header_text = document.createTextNode("Abbreviations");
  header.appendChild(header_text);
// add the headline to the body
  document.body.appendChild(header);
// add the definition list to the body
  document.body.appendChild(dlist);
}
addLoadEvent(displayAbbreviations);

addLoadEvent函數

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}
4.3. 瀏覽器地雷

若是把displayAbbreviation腳本在IE6，或者更早的window版本打開，則javascript出錯 在網景公司與微軟的瀏覽器大戰中，微軟決定不在本身的瀏覽器實現abbr元素，這就是地雷 解決方法：保證該函數能在IE中平穩退化

function displayAbbreviations() {
  if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
// get all the abbreviations
  var abbreviations = document.getElementsByTagName("abbr");
  if (abbreviations.length < 1) return false;
  var defs = new Array();
// loop through the abbreviations
  for (var i=0; i<abbreviations.length; i++) {
    var current_abbr = abbreviations[i];
    **if (current_abbr.childNodes.length < 1) continue;**
    var definition = current_abbr.getAttribute("title");
    var key = current_abbr.lastChild.nodeValue;
    defs[key] = definition;
  }
// create the definition list
  var dlist = document.createElement("dl");
// loop through the definitions
  for (key in defs) {
    var definition = defs[key];
// create the definition title
    var dtitle = document.createElement("dt");
    var dtitle_text = document.createTextNode(key);
    dtitle.appendChild(dtitle_text);
// create the definition description
    var ddesc = document.createElement("dd");
    var ddesc_text = document.createTextNode(definition);
    ddesc.appendChild(ddesc_text);
// add them to the definition list
    dlist.appendChild(dtitle);
    dlist.appendChild(ddesc);
  }
  **if (dlist.childNodes.length < 1) return false;**
// create a headline
  var header = document.createElement("h2");
  var header_text = document.createTextNode("Abbreviations");
  header.appendChild(header_text);
// add the headline to the body
  document.body.appendChild(header);
// add the definition list to the body
  document.body.appendChild(dlist);
}
addLoadEvent(displayAbbreviations);

第一條語句：若是當前元素沒有子節點，就馬上開始下一循環 第二條語句：若是對應縮略語dl元素沒有子節點，馬上退出displayAbbreviations函數

5. 顯示「文獻來源連接表」

blockquote元素包含一個cite屬性，可選屬性，能夠給他一個url地址。把文獻資料和相關網頁連接起來的作好方法。 在實踐中，瀏覽器會忽視這個屬性，用戶沒法看到，咱們能夠利用javascript和dom把收集，顯示在網頁上

  • 遍歷全部blockquote元素
  • 從blockquote中提取cite屬性值
  • 建立一個標識文本是source的連接
  • 把這個連接的值賦值給cite屬性值
  • 把這個連接插入文獻節選的末尾

編寫displayCitations函數

function displayCitations() {
  if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
// get all the blockquotes
  var quotes = document.getElementsByTagName("blockquote");
// loop through all the blockquotes
  for (var i=0; i<quotes.length; i++) {
// if there is no cite attribute, continue the loop
    if (!quotes[i].hasAttribute("cite")) continue;
// store the cite attribute
    var url = quotes[i].getAttribute("cite");
// get all the element nodes in the blockquote
    var quoteChildren = quotes[i].getElementsByTagName('*');
// if there are no element nodes, continue the loop
    if (quoteChildren.length < 1) continue;
// get the last element node in the blockquote
    var elem = quoteChildren[quoteChildren.length - 1];
// create the markup
    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);
// add the markup to the last element node in the blockquote
    elem.appendChild(superscript);
  }
}
addLoadEvent(displayCitations);

6.顯示快捷鍵清單

編寫一個函數把文檔中全部用到的快捷鍵顯示在頁面裏 accesskey屬性能夠把一個元素與鍵盤上特定按鍵關聯在一塊兒 一些基本快捷鍵約定成俗的設置方法

  • accesskey = 1對應「返回本網站主頁」的連接
  • accesskey = 2 對應「後退到前一頁面」
  • accesskey = 4 對應「打開本網站搜索頁面」
  • accesskey = 9 對應「本網站聯繫方法」
  • accesskey = 0 對應「查看本網站的快捷鍵清單」

利用DOM動態建立快捷鍵清單

  • 把文檔全部連接提取到一個節點集合中
  • 遍歷全部節點集合連接
  • 若是某個連接帶有accesskey屬性，把他的值保存下來
  • 把連接顯示在瀏覽器窗口的屏顯標識文字也保存起來
  • 建立清單
  • 爲擁有快捷鍵的連接建立列表項（li元素）
  • 把列表項添加到「快捷鍵清單」
  • 把快捷鍵清單添加到文檔
function displayAccesskeys() {
  if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
// get all the links in the document
  var links = document.getElementsByTagName("a");
// create an array to store the accesskeys
  var akeys = new Array();
// loop through the links
  for (var i=0; i<links.length; i++) {
    var current_link = links[i];
// if there is no accesskey attribute, continue the loop
    if (current_link.getAttribute("accesskey") == null) continue;
// get the value of the accesskey
    var key = current_link.getAttribute("accesskey");
// get the value of the link text
    var text = current_link.lastChild.nodeValue;
// add them to the array
    akeys[key] = text;
  }
// create the list
  var list = document.createElement("ul");
// loop through the accesskeys
  for (key in akeys) {
    var text = akeys[key];
//  create the string to put in the list item
    var str = key + " : "+text;
// create the list item
    var item = document.createElement("li");
    var item_text = document.createTextNode(str);
    item.appendChild(item_text);
// add the list item to the list
    list.appendChild(item);
  }
// create a headline
  var header = document.createElement("h3");
  var header_text = document.createTextNode("Accesskeys");
  header.appendChild(header_text);
// add the headline to the body
  document.body.appendChild(header);
// add the list to the body
  document.body.appendChild(list);
}
addLoadEvent(displayAccesskeys);

7.檢索和添加信息

略

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程