欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

實(shí)現(xiàn)JavaScript的組成----BOM和DOM詳解

 更新時(shí)間:2016年05月18日 15:04:00   投稿:jingxian  
下面小編就為大家?guī)硪黄獙?shí)現(xiàn)JavaScript的組成----BOM和DOM詳解。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考,一起跟隨小編過來看看吧

我們知道,一個(gè)完整的JavaScript的實(shí)現(xiàn),需要由三部分組成:ECMAScript(核心),BOM(瀏覽器對(duì)象模型),DOM(文檔對(duì)象模型)。

今天主要學(xué)習(xí)BOM和DOM。

BOM:

BOM提供了很多對(duì)象,用來訪問瀏覽器的功能,這些功能于網(wǎng)頁內(nèi)容無關(guān)(這些是DOM的事),目前,BOM已經(jīng)被W3C搬入了HTML5規(guī)范中。

window對(duì)象:

BOM的core,表示瀏覽器的一個(gè)實(shí)例,它既是通過javascript訪問瀏覽器窗口的一個(gè)接口,又是ECMAScript規(guī)定的Global對(duì)象,這意味著在網(wǎng)頁中定義的任何一個(gè)對(duì)象,變量和函數(shù),都已window作為其Global對(duì)象,因此有權(quán)訪問paresinInt()等方法。(摘自高程三)。此外,如果一個(gè)網(wǎng)頁中包含框架,則每個(gè)框架都擁有自己的window對(duì)象,并且保存在frames集合中(索引0開始,ltr,ttb)。

首先,全局執(zhí)行環(huán)境中的變量,函數(shù)都是window對(duì)象的屬型和方法。當(dāng)然,全局變量與直接定義的window屬型有一點(diǎn)差異,全局變量(準(zhǔn)確的說應(yīng)該是顯式聲明的全局變量)無法使用delete,而window屬性就可以。此外,還有一個(gè)細(xì)節(jié)需要注意,嘗試訪問未聲明的變量會(huì)出錯(cuò),但是使用查詢window對(duì)象就沒有問題。

那么,window有哪些常見的屬性或者方法呢?

1.name,每個(gè)window對(duì)象都有name屬性,包含框架的名稱。通常是為了了解窗口關(guān)系與框架。

2.窗口位置方法:moveTo(新位置的x坐標(biāo),新位置的y坐標(biāo)),moveBy(水平移動(dòng)x,垂直移動(dòng)y)。這兩個(gè)方法不適用框架。

3.窗口大小屬性:innerWidth/Height(視圖區(qū)(減去邊框的寬度)的大小/* IE,Safari,firefox */),outerWidth/Height(返回瀏覽器窗口的大小/*IE,Safari,firefox */).在Chrome中,inner,outer均返回視圖區(qū)的大小。

當(dāng)然,可以通過resizeTo(新窗口width,新窗口height),resizeBy(比原寬度提高x,比原高度提高y)來改變窗口大小。這戀歌方法不適用框架結(jié)構(gòu)。

4.window.open(URL,窗口目標(biāo),特性字符串,新頁面是否取代瀏覽器歷史紀(jì)錄中當(dāng)前加載頁面的boolean)用于導(dǎo)航到一個(gè)特定的url或者打開一個(gè)新的窗口。如果指定窗口目標(biāo),且窗口目標(biāo)是已有的窗口或者框架的名稱,那么就會(huì)在有改名成的窗口或者框架中加載指定的url。否則,就將打開的新窗口命名為目標(biāo)窗口。當(dāng)然,窗口目標(biāo)可以指定的關(guān)鍵字有_self,_parent,_top,_blank。

<a href=http://www.dbjr.com.cn>click me</a>
    <script>
    var link=document.getElementsByTagName("a")[0];
      alert(link.nodeName);   
     window.onload=function(){
      
      link.onclick=function () {
        window.open(link.href,"good","width=400px,height=300px");
        return false;
    
      }  
    }
  </script

此處特性字符串的具體設(shè)置不再贅述,有興趣的可以點(diǎn)擊此處

5.作為一門單線程語言,js仍然允許設(shè)置超時(shí)值(指定的事件過后執(zhí)行代碼)和間歇時(shí)間值(每隔指定的時(shí)間循環(huán)一次)來調(diào)度代碼在特定的時(shí)刻執(zhí)行。

超時(shí)調(diào)用:setTimeout(js代碼字符串,毫秒時(shí)間),作為一個(gè)單線程語言,js的任務(wù)隊(duì)列每次只能執(zhí)行一段代碼,若經(jīng)過設(shè)置的時(shí)間間隔過后任務(wù)隊(duì)列為空,則執(zhí)行代碼字符串,否則,要等到前面的代碼執(zhí)行完成后再執(zhí)行。

var al=setTimeout(function () {
      alert("good");
    },5000);
    alert(al); //2

此處,我在5秒后調(diào)用了一個(gè)匿名函數(shù)輸出good,窗口先彈出一個(gè)警示框顯示2,可見setTimeout()函數(shù)返回的是一個(gè)數(shù)值ID,具有唯一性,那么我們就可以通過這個(gè)ID來清除超時(shí)調(diào)用,可以使用clearTimeout(ID)來清除。

間接調(diào)用:setInterval(),他接受的參數(shù)與setTimeout()相同,同樣返回一個(gè)數(shù)值ID,使用clearTimeout()清除。

6.系統(tǒng)對(duì)話框方法:alert(),confirm(),prompt()等在我前面的博客中有寫道,點(diǎn)擊這里

location對(duì)象

與其說是BOM中的對(duì)象,不如說Location是window對(duì)象中的一個(gè)屬性,當(dāng)然,也是后面要講的DOM中document對(duì)象的屬性,也就是說,window.location和document.location引用同一個(gè)對(duì)象。

location對(duì)象屬性列表,修改這些屬性可以加載新的頁面,且會(huì)在歷史記錄中生成新的紀(jì)錄。使用location.replace()則不會(huì)再歷史紀(jì)錄中生成新紀(jì)錄。

hash "#contents" 返回url中的hash,沒有為“”
host "www.google.com" 返回服務(wù)器名和端口號(hào)(如果有)
hostname "www.google.com" 返回不帶端口號(hào)的服務(wù)器名稱
href "www.google.com" 返回當(dāng)前頁面的完整url,調(diào)用了assign()
pathname ''/wileyCDA/' 返回目錄名稱
port "8080" 返回端口號(hào),沒有則返回空字符串
protocol "http:" 返回頁面使用的協(xié)議
search "?=javascript" 返回查詢字符串,以問號(hào)開頭

navigator對(duì)象:用于識(shí)別瀏覽器的事實(shí)標(biāo)準(zhǔn),其屬性和方法主要用于檢測(cè)瀏覽器的類型。

其余的如history對(duì)象(保存歷史紀(jì)錄),screen對(duì)象(表明客戶端能力),由于在js中編程作用不大,便不再贅述。

------------------------------------------------------------------------------

DOM:

DOM是基于XML后經(jīng)過擴(kuò)展用于HTML的API,DOM依靠節(jié)點(diǎn)樹展開?!?/p>

首先需要明確一點(diǎn),文檔節(jié)點(diǎn)是每個(gè)節(jié)點(diǎn)的根節(jié)點(diǎn),文檔節(jié)點(diǎn)有且只有一個(gè)子節(jié)點(diǎn)既元素html(文檔元素)。

Node類型:

DOM1中的一個(gè)接口,由DOM所有節(jié)點(diǎn)類型(文本節(jié)點(diǎn),屬性節(jié)點(diǎn),元素節(jié)點(diǎn))實(shí)現(xiàn),該接口在js中作為Node類型實(shí)現(xiàn)。

nodeType屬性,每個(gè)節(jié)點(diǎn)都擁有。由12個(gè)數(shù)值表示,element--1,attribute--2,text--3......

nodeName屬性,對(duì)于元素節(jié)點(diǎn),nodeName的值為標(biāo)簽名。

nodeValue屬性,對(duì)于元素節(jié)點(diǎn),nodeValue的值為null。

節(jié)點(diǎn)關(guān)系:每個(gè)節(jié)點(diǎn)都擁有childNodes屬性,保存NodeList(類數(shù)組對(duì)象)對(duì)象。每個(gè)節(jié)點(diǎn)都擁有parentNode屬性,指向父節(jié)點(diǎn)。在childNodes中的節(jié)點(diǎn)擁有相同的parentNode。使用previousSibling和nextSibling屬性可以訪問兄弟節(jié)點(diǎn)。同時(shí)childNodes[0]==firstChild,childNodes[childNodes.length-1]==lastChild.

操作節(jié)點(diǎn):appendChild(),向NodeList末尾push一個(gè)節(jié)點(diǎn),返回新增的節(jié)點(diǎn)。insertBefore(),向NodeList首部unshift一個(gè)節(jié)點(diǎn),返回新增節(jié)點(diǎn)。replaceChild(newChild,targetChild),替換目標(biāo)節(jié)點(diǎn),原節(jié)點(diǎn)仍在文檔中,但已經(jīng)沒有位置。removeChild(tragetChild),移除節(jié)點(diǎn),與replaceChild()的效果類似。cloneChild(boolean),true時(shí)表示完全復(fù)制(整個(gè)節(jié)點(diǎn)與子節(jié)點(diǎn)),false表示基本復(fù)制。

Document類型:

表示文檔,document對(duì)象是HTMLDDocument(繼承自Document類型)的實(shí)例,表示整個(gè)html頁面。同時(shí),doument對(duì)象也是window對(duì)象的一個(gè)屬性,因此可以作為全局對(duì)象訪問。document.firstChild==html. document.body==body. document.doctype--->對(duì)<!DOCTYPE>的引用。doucment.title--->title  document.url--->location.url.

查找元素:getElementById(),getElementsByTagName(),getElementsByClassName().

文檔寫入:write(),writeln(),open(),close()

Element類型:

getAttribute(),獲取特性 對(duì)于class,則使用“class”,而不是className,在使用element.className時(shí)可以獲取class特性。

setAttribute(),設(shè)置特性,若特性存在,則替換。否則,創(chuàng)建。

removeAttribute(),徹底刪除元素特性。

createElement(),創(chuàng)建新元素。

Text類型:

createTextNode(),創(chuàng)建文本節(jié)點(diǎn),如果連個(gè)文本節(jié)點(diǎn)是相鄰?fù)?jié)點(diǎn),則這個(gè)兩個(gè)文本會(huì)連接起來,沒有空格。

以上這篇實(shí)現(xiàn)JavaScript的組成----BOM和DOM詳解就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論