現(xiàn)代 javscript 編程 資料第5/6頁
更新時間：2007年04月09日 00:00:00 作者：
Unobtrusive DOM腳本編程
基于一個優(yōu)良的可測試的核心創(chuàng)建你的代碼和兼容的分發(fā)，是Unobtrusive DOM腳本編程的基本概念。編寫unobtrusive代碼意味著與你的HTML內容的徹底分離：數(shù)據來自服務器，而JavaScript代碼用來使其動態(tài)化。達到這一徹底分離的最重要的副作用就是你的代碼在不同的瀏覽器之間可以完美的升/降級。利用這一點，你可以提供高級的內容給支持它的瀏覽器，而在不支持的瀏覽器上從容隱藏之。
編寫現(xiàn)代的、Unobtrusive代碼包括兩個方面：文檔對象模型(DOM)和JavaScript事件。本書中我對這兩個方面都將作深入的解釋。
文檔對象模型
DOM是表示XML文檔的流行的方法。它未必是最快的、最輕便的、或者最易使用的，卻是是最普及的，絕大多數(shù)web開發(fā)語言（如Java，Perl，PHP，Ruby，Python，及Javascript)都實現(xiàn)了對它的支持。DOM旨在為開發(fā)者提供一種直觀的方式來導航于XML的層次結構中。
因為有效的HTML只是XML的一個子集，保有一個方式來有效地解析和瀏覽DOM文檔對于簡化JavaScript開發(fā)來說是必不可少的。從根本上講，出現(xiàn)在JavaScript中的大多數(shù)的交互是發(fā)生在JavaScript與頁面所包含的不同HTML元素之間的；DOM是使這此過程簡單化的卓越工具。程序1-4展示了使用DOM在頁內導航和查找不同的元素然后操作它們的一些例子。
程序1-4. 使用文檔對象模型定位并操縱不同的DOM元素
<html>
<head>
<title>Introduction to the DOM</title>
<script>
//直到文檔完全載入，我們才能操作DOM
window.onload = function() {
//找到文檔中所有的<li>元素
var li = document.getElementsByTagName("li");
//然后給它們全部加上邊框
for ( var j = 0; j< li.length; j++ ) {
li[j].style.border = "1px solid #000";
}
//定位ID為'everywhere'的元素
var every = document.getElementById( "everywhere" );
//并將它從文檔中移除
every.parentNode.removeChild( every );
};
</script>
</head>
<body>
<h1>Introduction to the DOM</h1>
<p class="test">There are a number of reasons why the DOM is awesome,
here are some:</p>
<ul>
<li id="everywhere">It can be found everywhere.</li>
<li class="test">It's easy to use.</li>
<li class="test">It can help you to find what you want,
really quickly.</li>
</ul>
</body>
</html>
DOM是開發(fā)Unobtrusive JavaScript代碼的第一步。借助簡單快速導航HTML文檔的能力，所有隨之而來的JavaScript/HTML交互將變得如此簡單。
事件
事件將一個應用程序之內所有的用戶交互結合在一起。在一個設計良好的JavaScript應用程序里，你將擁有數(shù)據源和它的視覺的表示(在HTML DOM內部)。為了同步這兩個方面，你必須監(jiān)視用戶的交互動作并試圖相應地更新用戶界面。使用DOM和JavaScript事件的結合是使得現(xiàn)代web應用程序賴以工作的基本組合。
所有的現(xiàn)代瀏覽器都提供一系列的只要特定交互動作發(fā)生即被觸發(fā)的事件，如用戶移動鼠標，敲擊鍵盤，或離開頁面等等。使用這些事件，你可以注冊代碼到特定事件，一旦該事件發(fā)生，你的代碼就會被執(zhí)行。程序1-5展示了這種交互的一個實例，該網頁中的<li>元素在用戶鼠標經過的時候會改變背景色。
程序1-5. 使用DOM和事件來提供一些視覺效果
<html>
<head>
<title>Introduction to the DOM</title>
<script>
//直到文檔完全載入，我們才能操作DOM
window.onload = function(){
//查找所有的<li>元素，附以事件處理程序
var li = document.getElementsByTagName("li");
for ( var i = 0; i < li.length; i++ ) {
//將鼠標移入事件處理程序附在<li>元素上，
//該程序改變<li>背景顏色為藍色
li[i].onmouseover = function() {
this.style.backgroundColor = 'blue';
};
//將鼠標移出事件處理程序附在<li>元素上，
//該程序將<li>的背景顏色改回白色
li[i].onmouseout = function() {
this.style.backgroundColor = 'white';
};
}
};
</script>
</head>
<body>
<h1>Introduction to the DOM</h1>
<p class="test">There are a number of reasons why the DOM is awesome,
here are some:</p>
<ul>
<li id="everywhere">It can be found everywhere.</li>
<li class="test">It's easy to use.</li>
<li class="test">It can help you to find what you want,
really quickly.</li>
</ul>
</body>
</html>
JavaScript事件是復雜多樣的。本書中的大多數(shù)代碼或應用程序都以某種方式利用了事件。第六章和附屬Ｂ完全專注于事件及其交互。
JavaScript與CSS
動態(tài)HTML建立在DOM和事件交互的基礎上。在核心層面上，動態(tài)HTML表示發(fā)生在JavaScript和附著在DOM元素上的CSS信息的交互。
層疊式樣式表(CSS)作為布局的標準服務于簡單的不唐突的網頁，在最小化了用戶端兼容性問題的同時，提供給開發(fā)者以強大的可控制性。從根本上講，動態(tài)HTML就是探索JavaScript和CSS彼此交互作用時能夠達到什么以及怎樣最好地利用該聯(lián)合達成令人印象深刻的效果。
更高級的交互示例如拖放元素和動畫效果見第七章。在那里我將圍繞它們展開深入論述。
相關文章
本篇文章主要主要介紹了基于webpack2.x的vue2.x的多頁面站點 ，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-08-08
Ajax異步文件上傳與NodeJS express服務端處理
本文主要介紹了Ajax異步文件上傳與NodeJS express服務端處理的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
JS實現(xiàn)移動端可折疊導航菜單（現(xiàn)代都市風）
這篇文章主要介紹了JS如何實現(xiàn)移動端可折疊導航菜單，文中示例代碼非常詳細，幫助大家更好的理解和學習，感興趣的朋友可以了解下2020-07-07
這篇文章主要介紹了html的DOM中Event對象onabort事件用法,實例分析了onabort事件的適用范圍與對應的javascript使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了不容錯過的兩款Bootstrap Icon圖標選擇組件，支持自定義的圖標，拿出來分享下，絕對的干貨，感興趣的小伙伴們可以參考一下2016-01-01
詳解將微信小程序接口Promise化并使用async函數(shù)
這篇文章主要介紹了詳解將微信小程序接口Promise化并使用async函數(shù)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
RGB顏色值轉HTML十六進制(HEX)代碼的JS函數(shù)
轉到固定長度的十六進制字符串，不夠則補0 javascript找出一個背景色的數(shù)值，只好自己解析2009-04-04
這篇文章主要介紹了JavaScript axios安裝與封裝案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-08-08
最近在做一個通用的配置模塊。配置模塊中必然要對系統(tǒng)的菜單、功能模塊、權限資源等進行配置，為了更好的用戶體驗，圖標是必不可少的！2011-07-07
這篇文章主要weidajiaxiangxi介紹了很酷的星級評分系統(tǒng)原生JS實現(xiàn)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08