整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          HTML、CSS、JavaScript及相互關(guān)系

          頁,又叫Web,其實(shí)就是一個后綴名為.html的文本文件。HTML文件采用超級文本標(biāo)記語言(HyperText Markup Language)書寫而成,最終由客戶端瀏覽器解釋并呈現(xiàn)給用戶。

          Web由HTML內(nèi)容、CSS樣式、JavaScript前端行為三要素組成。開發(fā)一個網(wǎng)頁,就好比設(shè)計一出舞臺劇,首先要決定舞臺上有哪些演員(HTML網(wǎng)頁內(nèi)容)、演員的扮相(CSS網(wǎng)頁樣式)、演員的動作及劇情(JavaScript網(wǎng)頁前端行為)。

          1 HTML

          HTML使用標(biāo)記標(biāo)簽來描述網(wǎng)頁,標(biāo)記標(biāo)簽是HTML語言中最基本的單位,是HTML中最重要的組成部分。

          標(biāo)記是HTML文檔中一些有特定意義的符號,這些符號指明網(wǎng)頁內(nèi)容的含義或結(jié)構(gòu)。

          標(biāo)記即標(biāo)簽,不同的標(biāo)記能實(shí)現(xiàn)不同的功能。HTML標(biāo)記按功能可大致分為六大類。分別是語義標(biāo)記、元標(biāo)記、文本標(biāo)記、容器標(biāo)記、嵌入式標(biāo)記,以及表單和表單元素標(biāo)記六大類。

          (1) 語義標(biāo)記。又稱結(jié)構(gòu)標(biāo)記,是指盡量使用有相對應(yīng)結(jié)構(gòu)含義的HTML標(biāo)記。語義標(biāo)記的逐漸增加便于開發(fā)者閱讀并寫出優(yōu)雅美麗的代碼,同時讓瀏覽器的“爬蟲”和機(jī)器更好地解析檢索。在沒有CSS的情況下,語義標(biāo)記讓頁面也能呈現(xiàn)出很好的內(nèi)容、代碼結(jié)構(gòu)。簡而言之,語義標(biāo)記的使用,即是為了網(wǎng)頁“裸奔時也好看”。

          (2) 元標(biāo)記。是指位于HTML文件頭部的一些特殊代碼,是解釋說明的標(biāo)記。其主要功能就是對文檔進(jìn)行說明,描述HTML文檔的整體信息。元標(biāo)記向?yàn)g覽者提供某一頁面的附加信息,告訴我們它是誰。當(dāng)客戶機(jī)找服務(wù)器要東西時,它幫助一些搜索引擎進(jìn)行頁面分析,使導(dǎo)出的某一頁面檢索信息能正確地放入合適的目錄中。

          HTML元標(biāo)記出現(xiàn)于網(wǎng)頁頭標(biāo)簽處,主要包括標(biāo)題標(biāo)記、關(guān)鍵詞標(biāo)記、描述標(biāo)記等,合理運(yùn)用元標(biāo)記會使網(wǎng)頁在搜索引擎中表現(xiàn)更為突出。

          (3) 文本標(biāo)記。這是最重要、最基本的標(biāo)記,一般只能嵌套文本、超鏈接的標(biāo)簽。為了讓網(wǎng)頁中的文本看上去編排有序、整齊美觀、錯落有致,就要設(shè)置文本的標(biāo)題、字號大小、字體顏色、字體類型以及換行、換段等。而為實(shí)現(xiàn)這一目的所使用的特定的HTML語言,就叫作文本標(biāo)記。

          (4) 容器標(biāo)記。又稱作內(nèi)容組織標(biāo)記,可以簡單地理解為它是能嵌套其他所有標(biāo)簽的標(biāo)簽,是用來裝東西的容器。容器與容器之間也可以相互嵌套,表現(xiàn)為父級容器和子級容器。

          如div標(biāo)簽中可以鑲嵌span標(biāo)簽,div可以看作是一個可以裝入其他標(biāo)簽的大容器,span是一個只能裝文本的小容器,大容器當(dāng)然可以放得下小容器。

          (5) 嵌入式標(biāo)記。常用于嵌入圖像、音頻、視頻、flash動畫、插件等多媒體元素,使網(wǎng)頁呈現(xiàn)方式更加多樣化,還可以嵌套某些標(biāo)簽來指定視頻文件的路徑或者網(wǎng)址路徑,決定多媒體元素的屬性和播放方式等。

          (6) 表單和表單元素標(biāo)記。多用于制作網(wǎng)頁和用戶交互的界面、控件,是客戶端與服務(wù)器端進(jìn)行信息交流的途徑。用戶可以使用諸如文本域、列表框、復(fù)選框及單選按鈕之類的表單元素輸入信息,然后單擊某個按鈕提交這些信息。

          2 CSS

          如果說HTML語言規(guī)定了網(wǎng)頁的具體內(nèi)容,那么CSS(cascading style sheets)就是為了給這些內(nèi)容進(jìn)行規(guī)整和裝飾而存在的。CSS最初的誕生,就是因?yàn)镠TML為了滿足頁面設(shè)計者的顯示要求而變得臃腫復(fù)雜,因而需要一種樣式表語言達(dá)到控制頁面呈現(xiàn)內(nèi)容的效果。CSS讓整個頁面可視化程度更強(qiáng),可以說是網(wǎng)頁的門面。如果將網(wǎng)頁比作一個舞臺,HTML是舞臺上的演員,那么CSS就是演員的扮相,更完美地將節(jié)目(即頁面內(nèi)容)呈現(xiàn)在觀眾面前。

          CSS即層疊樣式表。作為一種用來表現(xiàn)HTML或者XML的計算機(jī)語言,CSS可以對網(wǎng)頁元素位置的排版進(jìn)行像素級別的精確控制,可以靜態(tài)地修飾網(wǎng)頁,也可以配合腳本語言(如后文會提到的JavaScript)動態(tài)地格式化網(wǎng)頁元素。

          所謂層疊,是即樣式可以層層疊加。

          每個HTML元素都有一組樣式屬性,它們可以通過CSS來設(shè)定。這些屬性涉及背景(background)、字體(fonts)、顏色(color)、鏈接(link)、邊框(border)、列表樣式(url)等。CSS就是一種先選擇HTML元素,然后設(shè)定選中元素屬性的機(jī)制。

          CSS選擇器和要應(yīng)用的樣式構(gòu)成了一條CSS規(guī)則。

          CSS規(guī)則由兩個主要的部分構(gòu)成:選擇器及一條或多條聲明。選擇器(selector)就是想要改變樣式的HTML元素;每條聲明(declaration)由一個屬性(property)和一個值(value)構(gòu)成。屬性是想要設(shè)置的樣式屬性(style attribute),每個屬性有一個值。屬性和值被冒號(:)分開,CSS聲明總是以分號(;)結(jié)束,聲明組以大括號({ })括起來。

          3 JavaScript

          JavaScript最早是由Netscape Communication(網(wǎng)景)公司開發(fā)出來的一種客戶端腳本語言,將JavaScript代碼直接嵌入在HTML頁面中,能對HTML頁面中的HTML、CSS和JavaScript本身進(jìn)行增加、刪除、修改、查詢等操作,使得客戶端靜態(tài)頁面變成支持用戶交互并響應(yīng)相應(yīng)事件的動態(tài)頁面(DHTML=HTML+CSS+JavaScript)。它的出現(xiàn)彌補(bǔ)了HTML語言的缺陷,使得開發(fā)客戶端Web應(yīng)用程序成為可能。

          HTML Web運(yùn)行在瀏覽器中,這就是說瀏覽器是Web的實(shí)際運(yùn)行環(huán)境。如果將運(yùn)行環(huán)境視為一個京劇表演的舞臺,則在這個舞臺上有網(wǎng)頁內(nèi)容HTML(演員)、網(wǎng)頁樣式CSS(演員的扮相)、網(wǎng)頁行為JavaScript(演員的動作)。JavaScript只能在自己的舞臺上表演,能對舞臺上的既有存在(HTML、CSS、JavaScript)進(jìn)行操作(增、刪、改、查),而不能跨越到舞臺外面表演(功能受限,JavaScript程序不能操作瀏覽器之外的事物)。

          更進(jìn)一步思考與觀察,會發(fā)現(xiàn)兩個有趣的現(xiàn)象:

          ① 當(dāng)網(wǎng)站被服務(wù)器軟件架設(shè)起來時(如同京劇正式開演),由于遵守網(wǎng)絡(luò)安全協(xié)議,JavaScript這個演員的功能受限于表演的舞臺(也就是瀏覽器客戶區(qū))。也就是說,此時JavaScript是存在功能受限的,能對HTML、CSS、JavaScript進(jìn)行增刪改查,而不能對瀏覽器客戶區(qū)之外做任何事情,如不能操作硬盤等本地資源等。為了在互聯(lián)網(wǎng)上搭建網(wǎng)站,讓所有人都能看到的,還需要租用域名、空間。

          ② 當(dāng)直接雙擊運(yùn)行本地Web文件時(如同京劇在做排練),JavaScript的功能相對不受限制。此時JavaScript可以訪問本地資源,如讀取本機(jī)IP、操縱本地文件系統(tǒng)等。但這樣架設(shè)的Web不能被他人通過網(wǎng)絡(luò)訪問,也不能被百度檢索。事實(shí)上,我們可以在本地放置無數(shù)個網(wǎng)頁,只要我們的硬盤容量足夠大。

          JavaScript包含了三個部分的內(nèi)容:JavaScript腳本語言規(guī)范EMCAScript(語言核心)、文檔對象模型DOM(以面向?qū)ο蟮姆绞讲倏v文檔內(nèi)容)、瀏覽器對象模型BOM(以面向?qū)ο蟮姆绞讲倏v瀏覽器窗口元素)。

          3.1 語言核心EMCA Script

          EMCA 是歐洲計算機(jī)制造商協(xié)會(EuropeanComputer Manufacturers Association)的縮寫,EMCAScript就是這個協(xié)會制定的標(biāo)準(zhǔn)化腳本語言。我們知道,JavaScript是一門編程語言,而每一種語言都有它自己的基本語法如數(shù)據(jù)類型等,這些概念必須遵循一定的規(guī)范,瀏覽器開發(fā)者要嚴(yán)格依據(jù)這個規(guī)范來開發(fā)編譯器,JavaScript程序員要嚴(yán)格依據(jù)這個規(guī)范來調(diào)用API。也就是說,EMCAScript是JavaScript的語法規(guī)范,規(guī)定了JavaScript腳本的核心內(nèi)容。打個比方,新華字典(也算是一種語言規(guī)范)規(guī)定了“血”這個字,而無論在“血液”中的讀“xuè”,還是在“血暈”中的讀“xiě”。新華字典規(guī)范了漢字,EMCAScript規(guī)范了JavaScript。

          3.2 文檔對象模型DOM

          文檔對象模型(document object model)是針對HTML和XML文檔的應(yīng)用程序編程接口。DOM 把整個頁面規(guī)劃成由多個節(jié)點(diǎn)構(gòu)成的文檔,我們可以用DOM API將頁面內(nèi)容繪制成一個樹狀圖。在這種模型下,頁面中的每個部分都是可用程序操縱的節(jié)點(diǎn),我們可以通過DOM 來方便地控制頁面的結(jié)構(gòu)和內(nèi)容(增加、刪除、修改、查詢等),如我們就可以用document.getElementById()通過id號來查詢文檔中的元素。DOM 使得用戶頁面可以動態(tài)地變化,用戶可以和Web文檔內(nèi)容進(jìn)行交互。

          3.3 瀏覽器對象模型

          瀏覽器對象模型BOM(browser object model)是針對瀏覽器的應(yīng)用程序編程接口。我們可以通過BOM 對瀏覽器窗口進(jìn)行訪問和操作,例如彈出新的瀏覽器窗口,移動、關(guān)閉和更改瀏覽器窗口,提供詳細(xì)的網(wǎng)絡(luò)瀏覽器信息(navigator object)、詳細(xì)的頁面信息(location object)、詳細(xì)的用戶屏幕分辨率的信息(screen object)等。BOM 方便我們從瀏覽器上獲得信息,更好地和瀏覽器進(jìn)行交互。例如,我們可以用window.alert()彈出消息框,用window.prompt()彈出提示框,使得用戶可以和瀏覽器窗口進(jìn)行交互。

          4 案例分析:選項(xiàng)卡控制

          點(diǎn)擊沒同選項(xiàng)卡,實(shí)現(xiàn)如下切換效果:

          代碼:

          <html>
          <head>
          <title>tab control</title></head>
          <style type="text/css">
          #tab{
          	position:relative;/* 定義選項(xiàng)卡的為相對定位,使其子級元素有定位參考對象 */
          	width:45%;
          	height:400px;
          }
          #tab h4{
          	display:inline;
          	background-color:#ccc;
          	color:black;
          }
          #tab div{
          	border:1px #666 solid;
          	position:absolute; /*tab下的div疊在一起*/
          	top:28px;
          	left:0px;
          	width:100%;
          	height:370px;
          	display:none;
          }
          #tab .block{
          	display:block;
          }
          #tab .up{
              color:#999999;
          	background-color:black;
          }
          </style>
          <script>
          function tabSwitch(tab,ao) {
          	var h = document.getElementById(tab).getElementsByTagName("h4");
          	var d = document.getElementById(tab).getElementsByTagName("div");
          	var n = document.getElementById(tab).getElementsByTagName("div").length;
          	for (var i = 0; i < n; i++) {
          		if (ao - 1 == i) {
          			h[i].className += " up";
          			d[i].className += " block";
          		} else {
          			h[i].className = " ";
          			d[i].className = " ";
          		}
          	}
          }
          </script>
          
          <body>
          <div id="tab">
          <h4 onclick="tabSwitch('tab',1)" class="up">道德經(jīng)</h4>
          <h4 onclick="tabSwitch('tab',2)" >岳陽樓記</h4>
          <h4 onclick="tabSwitch('tab',3)" >中庸</h4>
          <div class="block">
          	<p>上善若水。</p>
          	<p>水善利萬物而不爭,處眾人之所惡,故幾於道。</p>
          	<p>居善地,心善淵,與善仁,言善信,正善治,事善能,動善時。</p>
          	<p>夫唯不爭,故無尤。</p>
          </div>
          <div>
          	<p>不以物喜,不以己悲</p>
          	<p>惟江上之清風(fēng),與山間之明月</p>
          	<p>耳得之而為聲,目遇之而成色</p>
          </div>
          <div>
          	<p>博學(xué),審問,慎思,明辨,篤行。</p>
          	<p>學(xué)之要能,問之要知,思之要得,辨之要明,行之要篤。</p>
          	<p>雖愚必明,雖柔必強(qiáng)。</p>
          </div>
          </div>
          </body>
          </html>

          ref:

          王小峰《大話Web開發(fā):基于知識管理角度》

          -End-

          個視頻我們來寫兩個圓環(huán)。這個圓環(huán)雖然看起來只是普普通通的兩個圓,但是認(rèn)真一看好像又沒那么簡單,因?yàn)樗墙诲e重疊起來的,并且還有一點(diǎn)陰影的效果,看起來比較真實(shí)。這個案例其實(shí)是UTube上面一個比較知名博主的教學(xué)案例,我們不妨來學(xué)習(xí)一下。

          可能很多人也看過,我們今天主要來實(shí)現(xiàn)這兩個圓環(huán)重疊的部分,陰影的部分比較簡單,大家可以自己去思考一下。html里面這兩個div就是這兩個圓環(huán),樣式現(xiàn)在寫了一些基本的樣式,其它樣式重新來寫。

          ·先來把這兩個圓環(huán)的基礎(chǔ)樣式寫出來,兩個圓有了,然后把其中一個變成紅色,再讓它們先簡單的重疊一下,控制一下第二個圓環(huán),調(diào)整一下它的邊框顏色就可以了,把它變成紅色。

          ·再往左邊移動60像素,先簡單重疊起來。現(xiàn)在兩個圓只是簡單的重疊,我們要怎么樣實(shí)現(xiàn)這種交錯重疊?就好像兩個圓環(huán)是穿起來的這種感覺。這里分別給這兩個圓環(huán)加個偽元素,我們是可以通過定位把一個盒子撐起來的。

          ·這里給它設(shè)置一下inset,關(guān)鍵就是inset設(shè)置為多少合適。如果是設(shè)置為0,也就是四個方向都是設(shè)為0,按道理應(yīng)該是和父元素完全重疊的(沒border的話)。

          ·加個邊框看一下,很明顯它并沒有和白色圓環(huán)完全重疊,而是在它里面。這是因?yàn)槲覀兛吹降倪@兩個圓環(huán),看到的只是border邊框的區(qū)域。inset的設(shè)置為0,它只不過是貼在content內(nèi)容區(qū)域里面,所以偽元素我們要把它擴(kuò)大才可以。

          ·這里要調(diào)整一下inset的值,0是剛好貼滿content的區(qū)域,設(shè)置為正值它是收縮的,所以這里設(shè)置為-25px。現(xiàn)在和白色的圓環(huán)就一樣大了,只不過一個正方形一個圓形,等一下把偽元素調(diào)整成圓的就可以了。

          ·然后單獨(dú)來設(shè)置一下上邊框,同樣也是白色的邊框,還有右邊框也單獨(dú)設(shè)置一下。ok,再把另外兩條邊框設(shè)置為透明。現(xiàn)在左邊和下邊就看不到了,再把它設(shè)置成一個圓,這樣它就可以和第一個圓環(huán)完全重疊起來了。

          ·現(xiàn)在偽元素這半個圓環(huán)就和本來的圓環(huán)完全重疊起來,那有什么用?還是和原來的一樣,但是現(xiàn)在就可以單獨(dú)給偽元素這半個圓環(huán)設(shè)置層級了,把層級調(diào)高一點(diǎn),這樣這一段圓環(huán)它就可以蓋在上面,然后再給它旋轉(zhuǎn)一下位置,讓它旋轉(zhuǎn)負(fù)的四十五度,這樣兩個圓環(huán)貫穿重疊起來的效果就完成了。

          其實(shí)就是借助了一個偽元素做了一個障眼法,如果想實(shí)現(xiàn)圓環(huán)交匯的地方有點(diǎn)陰影的效果,也可以多寫兩個偽元素來實(shí)現(xiàn),這個大家可以自己來思考一下。

          這個視頻就到這里,感謝大家的收看。

          內(nèi)容是《Web前端開發(fā)之Javascript視頻》的課件,請配合大師哥《Javascript》視頻課程學(xué)習(xí)。

          HTML5規(guī)范圍繞著如何使用新增標(biāo)記定義了大量Javascript API;其中一些API與DOM重疊,定義了瀏覽器應(yīng)該支持的DOM擴(kuò)展;

          從HTML4開始,在Web開發(fā)領(lǐng)域,有一個非常大的應(yīng)用,就是濫用class屬性,一方面可以通過它為元素添加樣式,另一方面還可以用它表示元素的語義;于是,開發(fā)人員會用大量的Javascript代碼來操作CSS類,比如動態(tài)修改類或者搜索文檔中具有給定類或給定的一組類的元素,等等這些操作;為了讓開發(fā)人員適應(yīng)并增加對class屬性的新的認(rèn)識,HTML5新增了很多API,致力于簡化CSS類的用法;

          getElementsByClassName(names)方法:

          該方法是基于元素class屬性值中的類名來選取成組的文檔元素,可以通過document對象或Element元素調(diào)用這個方法;該方法最早出現(xiàn)在第三方Javascript類庫中,是通過既有的DOM功能實(shí)現(xiàn)的,而現(xiàn)在,原生的實(shí)現(xiàn)具有極大的性能優(yōu)勢;

          該方法接收一個names參數(shù),即一個包含一個或多個類名的字符串,多個類名使用空格隔開,返回帶有指定類的所有元素的HTMLCollection;

          var elts = document.getElementsByClassName("myclass");
          console.log(elts);  // HTMLCollection
          console.log(elts[0]);  // 第一個元素

          傳入多個類名時,類名的先后順序不重要;如:

          // 取得所有類中同時包括username和current的元素,類名的先后順序無所謂
          var allCurrentUsernames = document.getElementsByClassName("username current");
          console.log(allCurrentUsernames);
          var selected = document.getElementById("mydiv").getElementsByClassName("selected");
          console.log(selected);

          它返回的HTMLCollection集合,可以借用Array的方法,如:

          var elts = document.getElementsByClassName("selected");
          var eltDivs = Array.prototype.filter.call(elts, function(ele){
              return ele.nodeName === 'DIV';
          });
          console.log(eltDivs);  // 返回?fù)碛衧elected類名的所有div元素

          使用這個方法可以更方便地為帶有某些類的元素添加事件處理程序,從面不必再局限于使用ID或標(biāo)簽名;

          <style>
          .zr{background-color: rosybrown;}
          @keyframes rotate{
              0%{transform: rotate(0deg);}
              50%{transform: rotate(45deg);}
              100%{transform: rotate(0deg);}
          }
          .animating{
              animation: rotate 2s ease-in-out;
          }
          </style>
          <p class="zr">this is ok</p>
          <!-- 添加若干個class為zr的元素 -->
          <script>
          var elts = document.getElementsByClassName("zr");
          for(var i=0,len=elts.length; i<len; i++){
              elts[i].addEventListener("click",function(e){
                  this.classList.add("animating");
              },false);
              elts[i].addEventListener("animationend",function(e){
                  this.classList.remove("animating");
                  console.log("end");
              });
          }
          </script>

          如此,我們就可以為某些需要執(zhí)行動畫的元素添加一個名為zr的class類即可;當(dāng)然,此處是一個動畫效果,也可以是其他的某些操作;

          getElementsByClassName()方法與querySelector()和querySelectorAll()方法很類似,但用法及返回類型不同;

          var elts = document.getElementsByClassName("myclass outer");
          console.log(elts);  // HTMLCollection
          var elts = document.querySelectorAll(".myclass,.outer");
          console.log(elts);  // NodeList

          getElementsByClassName()參數(shù)只能是類名,且多個類名用空格隔開,多個類名是并的關(guān)系,而且不分順序,即只有所有class都匹配的元素才會被返回,其返回類型是HTMLCollection,是動態(tài)的集合;

          querySelector()參數(shù)是CSS選擇器,并且可以使用復(fù)雜的CSS選擇器,只要是合法的CSS選擇器都可以,但多個選擇器必須使用逗號分隔,它們是或的關(guān)系,其返回類型是NodeList,并且這個NodeList是靜態(tài)的;

          目前,獲取元素集合共有四個方法,要注意它們的不同點(diǎn);

          var elts = document.getElementsByClassName("myclass outer");
          console.log(elts);  // HTMLCollection
          var elts = document.getElementsByTagName("div");
          console.log(elts);  // HTMLCollection
          var elts = document.getElementsByName("myname");
          console.log(elts);  // NodeList
          var elts = document.querySelectorAll(".myclass,.outer,.current");
          console.log(elts);  // NodeList

          另外,需要注意的是,getElementsByClassName()方法返回的是動態(tài)HTMLCollection,所以使用這個方法與使用getElementsByTagName()以及其他返回動態(tài)集合的DOM方法都具有同樣的性能問題;

          元素滾動:

          Element.scrollIntoView(alignToTop | scrollIntoViewOptions)方法:

          DOM對滾動頁面沒有做出規(guī)定;各瀏覽器分別實(shí)現(xiàn)了相應(yīng)的方法,用于以不同方式控制滾動,最終HTML5選擇了scrollIntoView()作為標(biāo)準(zhǔn)方法;

          該方法是作為Element類型的擴(kuò)展存在的,因此可以在所有元素上使用,通過滾動瀏覽器窗口或某個容器元素,使調(diào)用該方法的元素出現(xiàn)在視口中;

          該方法接收一個布爾值參數(shù)alignToTop或Object型(scrollIntoViewOptions)參數(shù),如果為true或者省略,那么窗口會盡可能滾動到自身頂部與元素頂部平齊,如果為false,調(diào)用元素會盡可能全部出現(xiàn)在視口中,不過頂部不一定對齊;

          var mybtn = document.getElementById("mybtn");
          mybtn.onclick = function(){
              var img = document.getElementById("myimg");
              img.scrollIntoView(false);
          }

          Object型參數(shù)scrollIntoViewOptions:一個包含下列屬性的對象:

          • behavior:可選,定義動畫過渡效果,"auto"或 "smooth" 之一,默認(rèn)為 "auto";
          • block:可選,定義垂直方向的對齊,"start", "center", "end", "nearest"之一,默認(rèn)為 "start";
          • inline:可選,定義水平方向的對齊,"start", "center", "end", "nearest"之一,默認(rèn)為 "nearest";
          img.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"});

          但是IE與Edge對scrollIntoViewOptions這個參數(shù)并不友好,比如不支持behavior:”smooth”等;

          var btn = document.getElementById("btn");
          btn.onclick = function(){
              var img = document.querySelector("img");
              // 以下三行是等同的
              img.scrollIntoView();
              img.scrollIntoView(true);
              img.scrollIntoView({behavior:"auto",block:"start"});
              // 以下兩行是等同的,但I(xiàn)E與Edge似乎不識別end
              img.scrollIntoView(false);
              img.scrollIntoView({behavior:"auto",block:"end"});
          }

          另外,CSS3中有個平滑滾動的屬性scroll-behavior,如;

          <style>
                  html,body{scroll-behavior: smooth;}
          </style>

          只要頁面有滾動行為,自動進(jìn)行平常處理;但I(xiàn)E與Edge不支持;

          當(dāng)頁面發(fā)生變化時,一般會用這個方法來吸引用戶的注意力;實(shí)際上,為某個元素設(shè)置焦點(diǎn)也會導(dǎo)致瀏覽器滾動并顯示出獲得焦點(diǎn)的元素;

          var username = document.getElementById("username");
          username.focus();

          Element.scrollIntoViewIfNeeded()方法:

          用來將不在瀏覽器窗口的可見區(qū)域內(nèi)的元素滾動到瀏覽器窗口的可見區(qū)域,如果該元素已經(jīng)在瀏覽器窗口的可見區(qū)域內(nèi),則不會發(fā)生滾動,此方法是標(biāo)準(zhǔn)的Element.scrollIntoView()方法的專有變體,不屬于任何規(guī)范,是一種WebKit專有的方法;

          var btn = document.getElementById("btn");
          btn.onclick = function(){
              var elt = document.getElementById("elt");
              elt.scrollIntoViewIfNeeded(true);
          }

          目前,除了Chrome和Opera支持,其他都不支持;

          應(yīng)用的場景:

          對URL中hash標(biāo)記的進(jìn)化;比如:回到頂部(#);

          <a href="javascript:void(0)" id="topA" style="position:fixed;right:50px;bottom:50px;display:block; width:50px;height:50px;background-color:purple;">回到頂部</a>
          <script>
          // 回到頂部
          var topA = document.getElementById("topA");
          topA.onclick = function(){
              document.body.scrollIntoView({behavior:"smooth",block:"start"});
          }
          </script>

          滾動到指定位置(#xxx);

          如:一個單頁導(dǎo)航的應(yīng)用;

          <style>
          *{margin:0; padding: 0;}
          html,body{
              -ms-overflow-style: none; scrollbar-width: none;
          }
          ::-webkit-scrollbar{ display: none; }
          ul,li{list-style-type: none;}
          header{
              position: fixed; top:0; left: 0;;
              width: 100%; height: 2rem; background-color: rgba(0, 0, 0, .5);
          }
          nav ul li{padding: 0 2rem; line-height: 2rem; float: left;}
          nav ul li a{color:#FFF; text-decoration: none;}
          section{width: 100%; height: 100vh; box-sizing: border-box; padding: 10%; background-size:cover;}
          section#banner{background: url(images/1.jpg) no-repeat center; background-size:cover;}
          section#service{background:url(images/2.jpg) no-repeat center; background-size:cover;}
          section#contact{background: url(images/3.jpg) no-repeat center; background-size:cover;}
          footer{
              width:100%;height: 2rem; background-color: rgba(0, 0, 0, .8); color:rgba(255, 255, 255, .8);
              position: fixed; left: 0; bottom: 0;
          }
          </style>
          <header>
              <nav>
                  <ul>
                      <li><a href="dom1.html">首頁</a></li>
                      <li><a href="#news" data-name="news">新聞</a></li>
                      <li><a href="#service" data-name="service">服務(wù)</a></li>
                      <li><a href="#about" data-name="about">關(guān)于</a></li>
                      <li><a href="#contact" data-name="contact">聯(lián)系</a></li>
                  </ul>
              </nav>
          </header>
          <section id="banner">
              <h2>零點(diǎn)程序員</h2>
              <h3>zeronetwork</h3>
          </section>
          <section id="news"><h2>新聞中心</h2></section>
          <section id="service"><h2>服務(wù)領(lǐng)域</h2></section>
          <section id="about"><h2>關(guān)于我們</h2></section>
          <section id="contact"><h2>聯(lián)系我們</h2></section>
          <footer><p>北京零點(diǎn)網(wǎng)絡(luò)科技有限公司,www.zeronetwork.cn 零點(diǎn)程序員</p></footer>
          <script>
          window.onload = function(){
              scrollPage();
              var navs = document.querySelectorAll("nav a");
              for(var i=0,len=navs.length; i<len; i++){
                  (function(){
                      var item = navs[i];
                      item.addEventListener("click",function(event){
                          event.preventDefault();
                          scrollPage(event.target.dataset.name);
                      },false);
                  })();
              }
          }
          function scrollPage(id){
              console.log(id);
              var section = id ? document.querySelector("#" + id) : document.body;
              section.scrollIntoView({behavior:"smooth",block:"start"});
          }
          </script>

          聊天窗口滾動顯示最新的消息;

          <style>
          *{margin: 0px; padding: 0;}
          html,body{font-size: 14px;}
          ul,li{list-style-type: none;}
          li{margin: 1.5vh 0;}
          #app{
              width: 400px; height: 400px; border: 10px solid purple;
              position: relative; background-color: rosybrown; 
              padding-bottom: 40px;
          }
          #message{ width: 100%; height:100%; padding:15px; padding-bottom: 0; 
              box-sizing: border-box; overflow-y: scroll;
          }
          #message ul{padding-bottom: 15px;}
          #message ul li{display: flex;}
          #message ul li.me{flex-direction: row-reverse;}
          #message ul li a{display: inline-block;}
          #message ul li a img{width: 2vw; height: 2vw; border-radius: 50%;}
          #message ul li p{
              background-color: #FFF; border-radius: 3px; padding:0.5vw; margin:0 3vw 0 1vw;
          }
          #message ul li.me p{background-color:#09ce44;margin: 0 1vw 0 3vw;}
          #inputdiv{
              position: absolute; left: 0; bottom: 0; width: 100%; height: 40px; 
              background-color:rgba(0, 0, 0, 1); padding: 5px; box-sizing: border-box;
              display:flex;
          }
          #txtInput{flex-grow: 3;}
          #btn{flex-grow: 1;}
          </style>
          <div id="app">
              <div id="message">
                  <ul>
                      <li><a href="#"><img src="images/1.jpg" /></a><p>...</p></li>
                      <li class="me"><a href="#"><img src="images/1.jpg" /></a><p>...</p></li>
                      <li class="me"><a href="#"><img src="images/1.jpg" /></a><p>..</p></li>
                      <li><a href="#"><img src="images/1.jpg" /></a><p>...</p></li>
                      <li class="me"><a href="#"><img src="images/1.jpg" /></a><p>...</p></li>
                  </ul>
              </div>
              <div id="inputdiv"><input type="text" id="txtInput" name="txtInput" />
              <input type="button" value="發(fā)送" id="btn" /></div>
          </div>
          <script>
          window.onload = function(){
              var ul = document.querySelector("#message>ul");
              if(navigator.userAgent.indexOf("Trident") != -1){
                  ul.scrollIntoView(false);
              }else{
                  ul.scrollIntoView({behavior:"smooth", block:"end"});
              }
              var btn = document.querySelector("#btn");
              btn.addEventListener("click",function(e){
                  var txtInput = document.querySelector("#txtInput");
                  if(txtInput.value){
                      var html = "<li class=\"me\"><a href=\"#\"><img src=\"images/1.jpg\" /></a>";
                      html += "<p>" + txtInput.value + "</p></li>";
                      document.querySelector("#message ul").insertAdjacentHTML("beforeend", html);
                      txtInput.value = "";
                  }
                  if(navigator.userAgent.indexOf("Trident") != -1){
                      ul.scrollIntoView(false);
                  }else{
                      ul.scrollIntoView({behavior:"smooth", block:"end"});
                  }
              },false);
          }
          </script>

          焦點(diǎn)管理:

          HTML5也添加了輔助管理DOM焦點(diǎn)的功能;

          document.activeElement屬性:

          該屬性始終會引用DOM中當(dāng)前獲得了焦點(diǎn)的元素;

          元素獲得焦點(diǎn)的方式有頁面加載、用戶輸入和在代碼中調(diào)用focus()方法,如:

          console.log(document.activeElement);
          var btn = document.getElementById("myButton");
          btn.focus();
          console.log(document.activeElement === btn);  // true

          默認(rèn)情況下,文檔剛剛加載完成時,document.activeElement中保存的是document.body元素的引用,文檔加載期間,其該屬性的值為null;

          一般情況下,都是在一個表單控件上應(yīng)用焦點(diǎn)管理,比如,在一個input或textarea上選擇文本時,activeElement屬性就會返回該元素;

          在現(xiàn)實(shí)中,該屬性在控件中使用時,一般會與選擇控件中的文本操作配合使用,比如,調(diào)用該控件的selectionStart()和selectionEnd()方法來獲取選擇的文本內(nèi)容;

          <input type="text" id="myinput" value="北京零點(diǎn)網(wǎng)絡(luò)科技有限公司" /><br/>
          <textarea id="mytextarea" rows="5" cols="40">北京零點(diǎn)網(wǎng)絡(luò)科技有限公司推出零點(diǎn)程序員品牌,專門從事IT培訓(xùn),主講是大師哥王唯。</textarea>
          <p>獲得焦點(diǎn)的元素:<b id="outputelement"></b></p>
          <p>選擇的文本:<b id="outputtext"></b></p>
          <script>
          function selectText(e){
              var activeEl = document.activeElement;
              var selection = activeEl.value.substring(
                  activeEl.selectionStart, activeEl.selectionEnd
              );
              var outputelement = document.getElementById("outputelement");
              var outputtext = document.getElementById("outputtext");
              outputelement.innerHTML = activeEl.id;
              outputtext.innerHTML = selection;
          }
          var myinput = document.getElementById("myinput");
          var mytextarea = document.getElementById("mytextarea");
          myinput.addEventListener("mouseup", selectText,false);
          mytextarea.addEventListener("mouseup", selectText,false);
          </script>

          小示例:

          // 獲取焦點(diǎn)的控件自動滾到頁面中間
          window.addEventListener("click",function(e){
              var elt = document.activeElement;
              if(elt.tagName == "INPUT" || elt.tagName == "TEXTAREA")
                  elt.scrollIntoView({behavior:"smooth", inline:"center"});
          },false);

          解決由于窗口縮放、鍵盤彈出后遮擋表單的問題:

          <!-- 按tab切換到input,再縮放窗口大小 -->
          <h1 tabindex="1">Web前端開發(fā)</h1>
          <div style="height: 1000px; background-color: purple;" id="mydiv" tabindex="2">div</div>
          <input type="text" />
          <script>
          window.addEventListener("resize",function(e){
              if(document.activeElement.tagName === 'INPUT' ||
                  document.activeElement.tagName === 'TEXTAREA'){
                  setTimeout(function(){
                      document.activeElement.scrollIntoView({behavior:"smooth"});
                  },100);
              }
          });
          </script>

          activeElement屬性是只讀的,如果想讓某個元素獲取焦點(diǎn),可以調(diào)用該元素的focus()方法,如:

          var myinput = document.getElementById("myinput");
          document.activeElement = myinput;  // 失效
          myinput.focus();
          console.log(document.activeElement);  // input

          document.hasFocus()方法:

          該方法用于表明當(dāng)前文檔或者當(dāng)前文檔內(nèi)的節(jié)點(diǎn)是否獲得取焦點(diǎn),該方法可以用來判斷當(dāng)前文檔中的活動元素是否獲得了焦點(diǎn),如:

          console.log(document.hasFocus());

          當(dāng)查看一個文檔時,當(dāng)前文檔中獲得焦點(diǎn)的元素一定是當(dāng)前文檔的活動元素,但一個文檔中的活動元素不一定獲得了焦點(diǎn),例如,一個在后臺窗口中的活動元素一定沒有獲得焦點(diǎn);

          通過檢測文檔是否獲得了焦點(diǎn),可以知道用戶是不是正在與頁面交互;

          <input id="btn" type="button" value="打開窗口" /><br/>
          <script>
          function openWin(){
              window.open("about:blank","newwin","width=400,height=300");
          }
          var btn = document.getElementById("btn");
          btn.addEventListener("click", openWin, false);
          function checkPageFocus(){
              if(document.hasFocus())
                  console.log("該頁面獲得了焦點(diǎn)");
              else
                  console.log("該頁面失去了焦點(diǎn)");
          }
          setInterval(checkPageFocus, 1000);
          </script>

          查詢文檔獲知哪個元素獲得了焦點(diǎn),以及確定文檔是否獲得了焦點(diǎn),這兩個功能最重要的用途是提高Web應(yīng)用的無障礙性;無障礙Web應(yīng)用的一個主要標(biāo)志就是恰當(dāng)?shù)慕裹c(diǎn)管理,而確切地知道哪個元素獲得了焦點(diǎn)是一個比較重要的操作;

          HTMLDocument的增強(qiáng):

          HTML5擴(kuò)展了HTMLDocument,增加了新的功能;

          document.readyState屬性:

          該屬性描述了document 的加載狀態(tài),當(dāng)該屬性值發(fā)生變化時,會在 document 對象上觸發(fā) readystatechange事件;

          IE4最早為document對象引入了readyState屬性,然后,其他瀏覽器也都陸續(xù)實(shí)現(xiàn)了這個屬性,最終HTML5把這個屬性納入了標(biāo)準(zhǔn)之中。

          該屬性有三個可能的值:

          • loading:正在加載文檔;
          • interactive:可交互的,文檔已被解析,"正在加載"狀態(tài)結(jié)束,但是諸如圖像,樣式表和框架之類的資源仍在加載;
          • complete:文檔和所有資源已完成加載,表示load狀態(tài)的事件即將被觸發(fā);
          console.log(document.readyState);  // loading

          為什么要使用document.readyState屬性?目的就是通過它來實(shí)現(xiàn)一個指示文檔已經(jīng)加載完成的指示器;在這個屬性沒有得到廣泛支持前,要實(shí)現(xiàn)這樣的一個指示器,必須借助onload事件處理程序,表明文檔已經(jīng)加載完畢;

          window.onload = function(){
              console.log("文檔加載完畢")
              console.log(document.readyState);  // complete
          }
          現(xiàn)在可以直接使用document.readyState屬性來判斷,如:
          // 不會被執(zhí)行,因?yàn)榇a運(yùn)行到此處,readySate狀態(tài)為loading
          if(document.readyState == "complete"){
              console.log("文檔已加載完畢");
              console.log(document.readyState);
          }

          但并沒有執(zhí)行,因?yàn)榇a執(zhí)行到此處,readyState的狀態(tài)為loading,而后它又不能自己更新,所以要實(shí)時的取得readyState的狀態(tài);當(dāng)該屬性值發(fā)生變化時,會在 document 對象上觸發(fā) readystatechange事件,所以使用該事件就可以實(shí)時監(jiān)聽它的狀態(tài);

          document.onreadystatechange = function(e) {
              // if(document.readyState == "loading"){
              //     console.log("Loading");
              // }else if(document.readyState == "interactive"){
              //     var span = document.createElement("span");
              //     span.textContent = "資源正在加載";
              //     document.body.appendChild(span);
              //     console.log("Interactive");
              // }else if(document.readyState == "complete"){
              //     var span = document.querySelector("span");
              //     document.body.removeChild(span);
              //     console.log("Complete");
              // }
              // 或者
              switch(document.readyState){
                  case "loading":
                      console.log("Loading");
                      break;
                  case "interactive":
                      // 文檔已經(jīng)結(jié)束了“正在加載”狀態(tài),DOM元素可以被訪問。
                      // 但是像圖像,樣式表和框架等資源依然還在加載。
                      var span = document.createElement("span");
                      span.textContent = "資源正在加載";
                      document.body.appendChild(span);
                      console.log("Interactive");
                      break;
                  case "complete":
                      // 頁面所有內(nèi)容都已被完全加載
                      var img = document.getElementsByTagName("img")[0];
                      console.log("圖片等資源加載完成:" + img.src);
                      break;
              }
          }

          一個簡單小示例,loading頁

          <style>
          *{margin: 0; padding: 0;}
          #loading{
              width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, .6);
              position: absolute; top: 0; left: 0;
          }
          @keyframes rotate{
              0%{transform: rotate(0deg);}
              100%{transform: rotate(360deg);}
          }
          #loading img{
              width: 5vw;
              position: absolute; left: 50%; top:50%;
              margin-left: -5vw; margin-top:-5vh;
              animation: rotate 1s linear infinite;  /* [??nf?n?t] */
          }
          #loading.loading-none{display: none;}
          </style>
          <div id="loading"><img src="images/loading.png" /></div>
          <script>
          document.onreadystatechange = function(e) {
              if(document.readyState == "complete")
                  document.getElementById("loading").className = "loading-none";
              else
                  document.getElementById("loading").className = ""
          }
          </script>

          compatMode兼容模式:

          頁面的渲染有兩種方式,Standards mode標(biāo)準(zhǔn)模式和Quirks mode混雜模式(也稱為怪異模式);

          這兩種模式主要影響CSS內(nèi)容的呈現(xiàn),某些情況下也會影響JavaScript的執(zhí)行;所以,在開發(fā)時,確定瀏覽器處于何種模式很重要;

          起先,是從IE6開始區(qū)分渲染頁面的模式是Standards mode還是Quirks mode;IE為此給document對象添加一個名為compatMode屬性,該屬性即用于識別瀏覽器處于什么模式;如果是標(biāo)準(zhǔn)模式,返回CSS1Compat,反之返回BackCompat;后來,其他瀏覽器也實(shí)現(xiàn)了這個屬性,最終HTML5也把這個屬性納入標(biāo)準(zhǔn);

          console.log(document.compatMode);  // CSS1Compat

          目前,存在以下幾種情況:

          瀏覽器都是根據(jù)是否有DOCTYPE聲明判斷,有則為標(biāo)準(zhǔn)模式,值為CSS1Compact,無則為混雜模式,值為BackCompact;因此,一條好習(xí)慣就是每個html文檔都要有doctype聲明;

          對于有DOCTYPE聲明,但瀏覽器不能正確識別,則使用混雜模式,值為BackCompact;

          如果有xml聲明 <?xml version="1.0" encoding="utf-8"?>也是混雜模式;

          另外,如果文檔的第一行是標(biāo)簽或文本,也為混雜模式;

          對于IE來說,這兩種模式差別很大,但對其他瀏覽器來說,差別很小,因此,這兩種模式的判斷和差別主要是針對IE;

          兩種模式的具體差別:

          在Standards Mode下對于盒模型的解釋所有瀏覽器都是基本一致的,但在Quirks Mode模式下則有很大差別;

          在Standards mode中:

          元素真正的寬度 = margin + border-width + padding + width;

          在Quirks mode中:

          元素真正的寬度 = width,而其內(nèi)容寬度 = width - (margin – padding - border-width);

          在標(biāo)準(zhǔn)模式下,所有尺寸都必須包含單位,否則會被忽略,而在混雜模式下,可以不帶單位,如:style.width = "20",相當(dāng)于"20px";

          當(dāng)一個div元素中包含的內(nèi)容只有圖片時,在標(biāo)準(zhǔn)模式下的所有瀏覽器中,在圖片底部都有4像素的空白;但在混雜模式下,div距圖片底部默認(rèn)沒有空白;

          兩種模式獲取視口的方式是不同的;

          console.log(document.body.clientHeight);
          console.log(document.documentElement.clientHeight);

          就是說,在BackCompact模式下,取得document的某些屬性,如clientWidth、scrollLeft等,使用的是document.body,而標(biāo)準(zhǔn)模式下,使用的是document.documentElement,如:

          var height = document.compatMode == "CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
          console.log(height);

          documentMode文檔模式:

          IE8為document對象添加了documentMode屬性,即文檔模式(document mode),該屬性與compatMode屬性緊密相關(guān),但該屬性不是標(biāo)準(zhǔn)屬性,除了IE,其它瀏覽器都不支持;

          console.log(document.documentMode);  // 11

          頁面的文檔模式?jīng)Q定了可以使用什么功能,如,文檔模式?jīng)Q定了可以使用哪個級別的CSS,可以在Javascript中使用哪些API,以及如何對待文檔類型;

          在IE8中,有三種不同的呈現(xiàn)模式:

          • 為5,則為混雜模式(IE5),IE8或更高版本中的新功能無法使用;
          • 為7,表示IE7仿真模式,IE8或更高版本中的新功能無法使用;
          • 為8,表示IE8標(biāo)準(zhǔn)模式,IE8中的新功能都可以使用,如可以使用Selectors API,更多CSS2級選擇器和某些CSS3功能,還有一些HTML5的功能;不過IE9中的新功能無法使用;

          從IE8往后,都遵循了這一規(guī)律,比如,為9,表示IE9標(biāo)準(zhǔn)模式,支持ES5,CSS3和更多HTML5的功能;

          有了這個屬性,就能準(zhǔn)確的判斷IE的各種版本了,如:

          var isIE = !!(window.ActiveXObject || "ActiveXObject" in window);
          var ieMode = document.documentMode;
          var isIE7 = isIE && ieMode && ieMode == 7;
          var isIE8 = isIE && ieMode && ieMode == 8;
          var isIE9 = isIE && ieMode && ieMode == 9;
          var isIE10 = isIE && ieMode && ieMode == 10;
          console.log(isIE);  // true
          console.log(isIE10);  // 切換到10版本,返回true

          X-UA-Compatible:

          開發(fā)者還可以主動要求客戶端按照什么文檔模式進(jìn)行渲染,也就是強(qiáng)制瀏覽器以某種模式渲染頁面,此時可以使用HTTP頭部信息X-UA-Compatible,或通過等價的<meta>標(biāo)簽來設(shè)置:

          <meta http-equiv="X-UA-Compatible" content="IE=IEVersion">

          IEVersion有可能有以下值:

          • Edge:始終以最新的文檔模式來渲染頁面;忽略文檔類型聲明;
          • EmulateIE9(8、7):如果有文檔聲明,則以IE9(8、7)標(biāo)準(zhǔn)模式渲染頁面,否則將文檔模式設(shè)置為IE5;
          • 9、8、7、5:強(qiáng)制以IE9(8、7、IE5模式)標(biāo)準(zhǔn)模式渲染頁面,忽略文檔類型聲明;

          如:讓文檔模式像在IE7中一樣,可以:

          <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

          如果不考慮文檔類型聲明,而直接使用IE8標(biāo)準(zhǔn)模式,可以:

          <meta http-equiv="X-UA-Compatible" content="IE=8">

          再如,強(qiáng)制以IE5混雜模式渲染:

          <meta http-equiv="X-UA-Compatible" content="IE=5" />

          如果在IE8以下的瀏覽器中設(shè)置,是無效的,因?yàn)樵撛O(shè)置是在IE8才開始有的;

          使用最新的文檔模式:

          <meta http-equiv="X-UA-Compatible" content="IE=edge"/>

          IE瀏覽器將總是使用最新版本的文檔模式;

          另外,也可以同時設(shè)置多個值,中間用逗號隔開;

          <meta http-equiv="X-UA-Compatible" content="IE=IEVersion">

          注意,由右向左進(jìn)行嘗試,即先使用IE8模式,如果失敗,則使用IE模式;

          最流行的設(shè)置:

          <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

          chrome=1表示可以激活Chrome Frame;

          如果安裝了Google Chrome Frame(谷歌瀏覽器內(nèi)嵌框架)則使用谷歌瀏覽器內(nèi)核模式,甚至?xí)褂肅hrome的控制臺,否則使用最新的IE模式;

          head屬性:

          在HTML5規(guī)范中新增了document.head屬性,引用文檔的<head>元素,屬于HTMLHeadElement類型;

          console.log(document.head);
          console.log(document.head === document.querySelector("head"));

          各主流瀏覽器均支持,但為了兼容低版本的,也可以結(jié)合備用方式,如:

          var head = document.head || document.getElementsByTagName("head")[0];

          如果有多個<head>元素,則返回第一個;

          document.head 是個只讀屬性,為該屬性賦值只會靜默失敗,如果在嚴(yán)格模式中,則會拋出TypeError異常;

          字符集屬性:

          HTML5新增了幾個與文檔字符集有關(guān)的屬性,其中,charset屬性表示實(shí)際使用的字符集,也可以用來指定新字符集;可以通過<meta>元素、響應(yīng)頭部或直接設(shè)置charset屬性修改這個值,但實(shí)際上是只讀的,現(xiàn)在已經(jīng)被characterSet替代,該屬性是只讀屬性,返回當(dāng)前文檔的字符編碼,該字符編碼是用于渲染此文檔的字符集,如:

          console.log(document.charset);  // UTF-8

          此時,可以修改文檔的字符集設(shè)置,如:

          // IE與老版的Edge返回gb2312,其它默認(rèn)失敗
          document.charset = "gbk";
          console.log(document.charset);  // UTF-8
          console.log(document.characterSet);
          // 同上,但所有瀏覽器靜默失敗
          document.characterSet = "gbk";
          console.log(document.characterSet);

          另一個屬性是defaultCharset,表示根據(jù)默認(rèn)瀏覽器及操作系統(tǒng)的設(shè)置,當(dāng)前文檔默認(rèn)的字符集應(yīng)該是什么,該屬性不是標(biāo)準(zhǔn)屬性,沒什么用處;

          console.log(document.defaultCharset);  // 只有IE與Safari有值

          data-自定義數(shù)據(jù)屬性:

          HTML5定義了一種標(biāo)準(zhǔn)的、附加額外數(shù)據(jù)的方法,即在HTML5文檔中,任意以”data-”為前綴的小寫的屬性名稱都是合法的,這樣的屬性被稱為數(shù)據(jù)集屬性,目的是為元素提供與渲染無關(guān)的信息,或者提供語義信息;這些屬性可以任意添加、隨便命名,只要以data-開頭即可,如:

          <div id="mydiv" data-appId="1234" data-myname="wangwei"></div>

          HTMLElement.dataset屬性:

          在Javascript中也為Element對象上定義了dataset屬性,該屬性指代一個對象,是元素的data-特性的實(shí)時、雙向的接口;

          dataset屬性的值是DOMStringMap接口的一個實(shí)例,被用于容納和展示元素的自定義屬(特)性,它就是一個名值對的映射,在這個映射中,每個data-name形式的屬性都會有一個對應(yīng)的屬(特)性,只不過屬性名沒有data-前綴,比如,dataset.x保存的就是data-x屬(特)性的值;帶連字符的屬(特)性對應(yīng)于駝峰命名屬性名,如:data-web-test屬(特)性就變成dataset.webTest屬性;如:

          <div id="mydiv" data-appId="001" data-subtitle="zeronetwork" data-web-description="零點(diǎn)程序員"> 
          // Javascript
          var mydiv = document.getElementById("mydiv");
          console.log(mydiv.dataset);  // DOMStringMap
          console.log(mydiv.dataset.subtitle);  // zeronetwork
          console.log(mydiv.dataset.webDescription);  // 零點(diǎn)程序員
          console.log(mydiv.dataset.appid);  // 只能小寫,不能是appId 

          設(shè)置或刪除dataset的一個屬性就等同于設(shè)置或移除對應(yīng)元素的data-屬(特)性,并且在將鍵值轉(zhuǎn)換為一個屬性的名稱時會使用相反的轉(zhuǎn)換;

          // 判斷有沒有該屬性
          if(mydiv.dataset.myname){
              console.log(mydiv.dataset.myname);
          }
          mydiv.dataset.subtitle = "wangwei";  // 修改
          mydiv.dataset.imgurl = "images/1.jpg";  // 添加
          mydiv.dataset.userName = "wangwei";  // 添加,被轉(zhuǎn)換為data-user-name
          delete mydiv.dataset.subtitle;  // 刪除
          遍歷DOMStringMap對象;
          for(var k in mydiv.dataset){
              console.log(k + ":" + mydiv.dataset[k]);
          }

          與getAttribute()和setAttribute()相比:

          在效率上,dataset沒有上述兩個方法高,但是,這個影響可以忽略不計;從操作上來看,雖然使用dataset不能提高代碼的性能,但是對于簡潔代碼,提高代碼的可讀性和可維護(hù)性是很有幫助的,如:

          <div class="user" data-id="123" data-user-name="wangwei" data-sex="男" data-date-of-birth="1998/8/8"></div>
          <div class="user" data-id="124" data-user-name="jingjing" data-sex="女" data-date-of-birth></div>
          <div class="user" data-id="125" data-user-name="juanjuan" data-sex="女" data-date-of-birth="1995/5/5"></div>
          <script>
          var users = document.querySelectorAll(".user");
          // 使用getAttribute()和setAttribute()
          for(var i=0,len=users.length; i<len; i++){
              var user = users[i];
              var id = user.getAttribute("data-id");
              var username = user.getAttribute("data-user-name");
              var sex = user.getAttribute("data-sex");
              if(!user.getAttribute("data-date-of-birth"))
                  // user.setAttribute("data-date-of-birth","2020-1-1");
              var dateofbirth = user.getAttribute("data-date-of-birth");
              console.log("ID:" + id + ",username:" + username + ",sex:" + sex + ",dateofbirth:" + dateofbirth);
          }
          // 使用dataset
          for(var i=0,len=users.length; i<len; i++){
              var user = users[i];
              var id = user.dataset.id;
              var username = user.dataset.userName;
              var sex = user.dataset.sex;
              if(!user.dataset.dateOfBirth)
                  user.dataset.dateOfBirth = "2020/1/1";
              var dateofbirth = user.dataset.dateOfBirth;
              console.log("ID:" + id + ",username:" + username + ",sex:" + sex + ",dateofbirth:" + dateofbirth);
          }
          </script>

          另外,dataset屬性在IE中,只有IE11支持,所以在低版本的IE中,如果要使用dataset屬性,必須做兼容性處理;

          if(mydiv.dataset){
              console.log(mydiv.dataset.subtitle);
              console.log(mydiv.dataset.webDescription);
          }else{
              console.log(mydiv.getAttribute("data-subtitle"));
              console.log(mydiv.getAttribute("data-web-description"));
          }
          // 封裝一個函數(shù)
          function getDataset(elt){
              if(elt.dataset)
                  return elt.dataset;
              var attrs = elt.attributes,  // 元素的屬性集合
                  dataset = {},   // 包裝的一個屬性集對象
                  name,   // 要獲取的特性名
                  matchStr;  // 匹配結(jié)果
              for(var i=0, len = attrs.length; i<len; i++){
                  // 匹配data-自定義屬性
                  matchStr = attrs[i].name.match(/^data-(.+)/);
                  if(matchStr){
                      // 轉(zhuǎn)成小駝峰
                      name = matchStr[1].replace(/-([\da-z])/gi, function(all, letter){
                          return letter.toUpperCase();
                      });
                      dataset[name] = attrs[i].value;
                  }
              }
              return dataset;
          }
          var dataset = getDataset(mydiv);
          console.log(dataset);

          另外data-屬性并不是只在Javascript中使用,在CSS中應(yīng)用的場景也很多,如:

          <style>
          p[data-font-size='2em']{font-size: 2em;}
          p[data-font-size='3em']{font-size: 3em;}
          </style>
          <p data-font-size="3em">零點(diǎn)程序員</p>
          <p data-font-size="2em">王唯</p>
          // 又如
          <style>
          #mydiv::after{background-color: rgba(0,0,0,.2); content: attr(data-content);}
          </style>
          <div id="mydiv" data-content="王唯是好人">大師哥</div>

          dataset應(yīng)用的場景還是非常多的,一般來說,為了給元素添加一些不可見的數(shù)據(jù),并要進(jìn)行后續(xù)的處理,就可以用到自定義數(shù)據(jù)屬性;比如,配合CSS開發(fā)一些動畫效果,或在跟蹤鏈接等應(yīng)用中,通過自定義數(shù)據(jù)屬性能方便地知道點(diǎn)擊來自頁面中的哪個部分;

          <a href="https://www.zeronetwork.cn" data-title="零點(diǎn)網(wǎng)絡(luò)">零點(diǎn)網(wǎng)絡(luò)</a>
          <script>
          window.onload = function(){
              var aElts = document.querySelectorAll("a");
              for(var i=0,len=aElts.length; i<len; i++){
                  aElts[i].addEventListener("click",function(e){
                      e.preventDefault();
                      doDataset(this);
                  },false);
              }
              var aDataset = [];
              function doDataset(elt){
                var o = {title:elt.dataset.title, href:elt.href, page:location.pathname};
                  aDataset.push(o);
                  console.log(aDataset);
              }
          }
          </script>
          // 小示例
          <style>
          .banner{
              background:url("images/2.jpg") no-repeat center; background-size:cover;
          }
          .fadeInDown{opacity: 0; transform: translateY(20px);}
          </style>
          <div class="banner"> 
              <h2 class="fadeInDown" data-duration=".8" data-delay="400">零點(diǎn)程序員</h2>
              <h3 class="fadeInDown" data-duration="1" data-delay="800">大師哥王唯</h3>
              <p class="fadeInDown" data-duration="1" data-delay="1000"><a href="#">更多</a></p>
          </div>
          <script>
          window.onload = function(){
              var elts = document.getElementsByClassName("fadeInDown");
              // for(var i=0,len=elts.length; i<len; i++){
              //  (function(){
              //      var elt = elts[i];
              //      var dataset = elt.dataset;
              //      setTimeout(function(){
              //          elt.style.opacity = 1;
              //          elt.style.transform = "translateY(-20px)";
              //          elt.style.transition = "all " + dataset.duration + "s linear";
              //      }, dataset.delay);
              //  })();
              // }
              Array.prototype.forEach.call(elts, function(v,k){
                  console.log(v);
                  var dataset = v.dataset;
                  setTimeout(function(){
                      v.style.opacity = 1;
                      v.style.transform = "translateY(-10px)";
                      v.style.transition = "all " + dataset.duration + "s linear";
                  }, dataset.delay);
              });
          }
          </script>

          Web前端開發(fā)之Javascript


          主站蜘蛛池模板: 国产91精品一区二区麻豆亚洲| 国产香蕉一区二区在线网站| 久久无码AV一区二区三区| 在线观看一区二区精品视频| 日本一区二区三区中文字幕| 精品一区二区三区在线观看 | 国产精品免费综合一区视频| 激情内射日本一区二区三区| 午夜无码一区二区三区在线观看| 亚洲第一区二区快射影院| 日韩精品成人一区二区三区| 红杏亚洲影院一区二区三区| 日本一区二区三区精品视频| 亚洲一区二区三区写真| 97人妻无码一区二区精品免费| 久久精品一区二区三区不卡| 久久se精品一区精品二区国产| 免费一区二区三区在线视频| 色天使亚洲综合一区二区| 成人欧美一区二区三区在线视频 | 一区二区三区电影在线观看| 日韩视频在线一区| 夜夜精品视频一区二区| 夜夜高潮夜夜爽夜夜爱爱一区| 无码人妻精一区二区三区| 国产精品视频一区| 国产大秀视频一区二区三区| 动漫精品第一区二区三区| 色综合视频一区二区三区| 亚洲视频一区二区| 中文字幕aⅴ人妻一区二区| 亚洲一区AV无码少妇电影☆| 性色A码一区二区三区天美传媒| 欧美成人aaa片一区国产精品| 国产一区二区成人| 国产精品一区二区三区高清在线 | 中文字幕在线观看一区| 日本成人一区二区| 亚洲视频一区网站| 国模大胆一区二区三区| 日本一区二区高清不卡|