国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

DOM和BOM

justCoding / 3527人閱讀

摘要：和概念文檔對象模型。作用操作頁面中的元素。頂級對象是就是指或者文件。側重于展示數據，側重于存儲數據，寫的是代碼，遵循的是的規范。頁面中所有的內容都是節點標簽節點，屬性節點，文本節點。所以，對象值這種寫法是錯誤的。

DOM和BOM DOM 概念

DOM:Document Object Model 文檔對象模型。

DOM作用：操作頁面中的元素。

頂級對象是document 就是指HTML或者XML文件。

HTML側重于展示數據，XML側重于存儲數據，XHTML寫的是HTML代碼，遵循的是XML 的規范。

每一個HTML文件都可以看成是一個文檔對象，里面所有的標簽的層次關系都可以看成是一個樹形結構圖，樹狀圖。

頁面中所有的內容都是節點：標簽節點，屬性節點，文本節點。IE8中會忽略空白節點

節點屬性

nodeType 如果是標簽，值為1；如果是屬性，值為2；如果是文本，值為3

nodeName 如果是標簽，值為大寫標簽名字；如果是屬性，值為小寫屬性名字；如果是文本，值為#text

nodeValue 如果是標簽，值為 null ；如果是屬性，值為屬性值；如果是文本，值為文本內容

頁面中的標簽，標簽就是元素，元素就可以看成是對象，標簽也是節點。

節點比元素大。

根元素：頁面中最外邊的標簽

文檔元素：文檔中的第一個元素，HTML文檔元素就是< html>

綁定和解綁

第一種寫法

對象.on+"事件名字"=事件處理函數

對象.on+"事件名字"=null

第二種寫法

對象.addEventListener("事件名字",命名函數,false);

對象.revemoEventListener("事件名字",命名函數的名字,false);

第三種寫法

對象.attachEvent("事件名字",命名函數);

對象.detachEvent("事件名字",命名函數的名字);

事件冒泡

元素A中嵌套了另一個元素B，里面元素B和外面元素A注冊了相同的事件，如果里面元素B的事件觸發了，外面的元素A的該事件也會自動的觸發。

阻止事件冒泡的兩種方法 window.event.cancelBubble=true 或者是 e.stopPropagation();

事件的三個階段

事件捕獲階段，事件目標階段，事件冒泡階段

事件階段有一個屬性，這個屬性是需要通過事件參數對象.eventPhase來獲取的

屬性的值是：1->捕獲階段2->目標階段3->冒泡階段

e.type獲取的是當前觸發該事件的事件類型

false值由內向外，一般采用false

dv3===2===click

dv2===3===click

dv1===3===click

true值由外向內

dv1===1===click

dv2===1===click

dv3===2===click

DOM級別

DOM0 初級階段

DOM1 規定了節點的類型Node，一般使用DOM1

DOM2 新增了一些方法，但是很多瀏覽器并不支持

DOM3 大多數瀏覽器都沒有支持

全局變量和隱式全局變量

全局變量不會被刪除，隱式全局變量會被刪除

innerText和innerHTML

設置文本內容的時候，用兩個都一樣

設置標簽內容的時候

innerText設置標簽內容，顯示的是標簽+文本，標簽實際上是轉義出來了

innerHTML設置標簽內容，顯示的是效果

如果想要設置文本，用誰都可以，如果想要有標簽效果，用innerHTML

獲取標簽中的文本內容，使用innerText和innerHTML都可以，如果獲取的是元素中的標簽和文本內容，應該使用innerHTML

innerText和textContent

innerText：谷歌支持，低版本火狐不支持，高版本火狐支持，IE8支持

textContent：谷歌支持，火狐支持，IE8不支持

瀏覽器不支持某屬性時，該屬性的類型是undefined

className

html標簽中的class屬性，在js 中是關鍵字，不能直接使用。所以， 對象.class="值"; 這種寫法是錯誤的。應該這么寫：對象.className="值";

對象.style.屬性名="值"; div.style.backgroundColor="red";

對象.className="值"; div.className="cls";

自定義屬性

獲取自定義屬性的值 對象.getAttribute(“屬性的名字”); 返回值是該屬性的值

設置自定義屬性的值 對象.setAttribute(“屬性的名字”,”值”);

removeAttribute，getAttribute，setAttribute三個方法不僅可以操作元素的自定義屬性及值，還可以操作元素的自帶屬性

隱藏方式
設置樣式

如果樣式的屬性是在style屬性中設置的，是可以直接獲取的

如果樣式的屬性是在style標簽中設置的，不能直接獲取

獲取節點元素12個
創建元素的三種方式

第一種document.write

第二種 對象.innerHTML=”標簽代碼及內容”

第三種 document.creatElement

定時器 setInterval()

參數：代碼

參數：時間----1000毫秒---1秒

返回值：該定時器的id值

執行過程：當頁面加載完畢后，過了一段時間才執行里面的代碼，再過一段時間再次里面的代碼，反復執行

clearInterval(timeId);//清理定時器

setTimeout()

參數：代碼

參數：時間----1000毫秒---1秒

返回值：該定時器的id值

執行過程：當頁面加載完畢后，過了一段時間才執行里面的代碼，再過一段時間再次里面的代碼，只執行一次

clearTimeout(timeId2);//清理定時器

三大系列 offset系列

offsetLeft：元素相對左邊的橫坐標

offsetTop：元素相對上面的縱坐標

offsetWidth：元素的寬度，有邊框

offsetHeight：元素的高度，有邊框

offset系列獲取的值都是數字類型

offsetWidth（offsetHeight）獲取的元素本身的寬（高）+元素邊框的寬（高）

如果父級元素脫離文檔流，子級元素此時的offsetLeft獲取的是相對父級元素的pading+自己的margin

如果元素自己脫離文檔流，此時的offsetLeft獲取的事自己的left+自己的margin

scroll系列

scrollLeft：向左卷曲出去的橫坐標

scrollTop：向上卷曲出去的縱坐標

scrollWidth：內容實際的寬度，沒有內容就是元素的寬度，沒有邊框

scrollHeight：內容實際的高度，沒有內容就是元素的高度，沒有邊框

client系列

clientX：可視區域的橫坐標

clientY：可視區域的縱坐標

clientWidth：可視區域的寬

clientHeight：可視區域的高

BOM 概述

瀏覽器中的頂級對象window，頁面中的頂級對象document

頁面中所有的內容都是window的，變量是屬于window的，函數是屬于window的。

因為頁面中所有的內容都是window，所以，window是可以省略不寫的。

系統對話框

alert() //不同瀏覽器中的外觀是不一樣的

confirm();//true確定,false取消

prompt() //不推薦使用

窗口對象

Window.open() 打開窗口

參數1:地址(內部的地址,外部的地址)

參數2:打開的方式：self 是在當前的頁面中打開，blank是在新的選項卡中打開

參數3:好多的代碼

window.close() 關閉窗口

Window.location對象

location相當于瀏覽器地址欄，可以將url解析成獨立的片段

Window.navigator對象

window.navigator 的一些屬性可以獲取客戶端(瀏覽器)的一些信息：

userAgent用戶當前瀏覽器信息

platform用戶系統信息（不準確）

Window.history對象

歷史記錄管理：

后退：history.back() history.go(-1)

前進：history.forward() history.go(1)

操作之后生成歷史記錄

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54578.html

相關文章

  • kmdjs和循環依賴

    摘要：從很早的版本就開始，是支持循環依賴的。比如下面的代碼會被編譯成要支持循環依賴其實有個要求，就是。不是的循環依賴是無解的循環依賴。所以在初始化階段，這樣的循環依賴是被允許的，因為都是。 循環依賴 循環依賴是非常必要的，有的程序寫著寫著就循環依賴了，可以提取出一個對象來共同依賴解決循環依賴，但是有時會破壞程序的邏輯自封閉和高內聚。所以沒解決好循環依賴的模塊化庫、框架、編譯器都不是一個好庫、...

    AlienZHOU 評論0 收藏0

  • JavaScript的組成 | DOM/BOM

    摘要：中主要關注的就是，對象的主要功能就是處理網頁內容。中文翻譯模型，如果你把這個詞從中抽離出來，看下面的圖片是不是就很好理解。年月制定的標準，由兩大部分組成核心和。擴展鼠標和用戶界面事件范圍遍歷，增加了對支持。 往期回顧 在上一期的《JavaScript的組成 | 核心-ECMAScript 》?里，我們有說到JavaScript 是由三大部分組成，分別是：核心ECMAScript、文檔對...

    worldligang 評論0 收藏0

  • 談談瀏覽器里的JavaScript

    摘要：而與最大的區別在于與瀏覽器溝通的窗口，不涉及網頁內容。完全依賴于瀏覽器廠商實作本身無標準規范，而有著所制定的標準來規范。而透過選取出來的節點，我們可以通過操作屬性來變更它的文字。在許多的網頁前端教學或是文章書籍當中，你可能常常聽到這樣的說法：「HTML、CSS 與JavaScript 是網頁前端三大要素」，其中： HTML 負責資料與結構 CSS 負責樣式與呈現 JavaScript 負責...

    CastlePeaK 評論0 收藏0

  • JavaScript學習總結（三）BOM和DOM詳解

    摘要：有級級級共個級別。事件類型事件類型鼠標事件鍵盤事件事件事件處理器執行代碼的程序在事件發生時會對事件做出響應。在標簽中使用事件處理器的語法是標簽事件處理器代碼事件處理程序事件就是用戶或瀏覽器自身執行的某種動作。 DOM介紹 D（文檔）可以理解為整個Web加載的網頁文檔，O（對象）可以理解為類似window對象只來的東西，可以調用屬性和方法，這里我們說的是document對象，M（模型）可...

    littlelightss 評論0 收藏0

  • 《JavaScript 闖關記》之簡介

    摘要：瀏覽器只是實現的宿主環境之一，其他宿主環境包括和。年月，版發布，成為國際標準。事件定義了事件和事件處理的接口。對于已經正式納入標準的來說，盡管各瀏覽器都實現了某些眾所周知的共同特性，但其他特性還是會因瀏覽器而異。 JavaScript 是面向 Web 的編程語言，絕大多數現代網站都使用了 JavaScript，并且所有的現代 Web 瀏覽器（電腦，手機，平板）均包含了 JavaScri...

    baihe 評論0 收藏0

  • 做一名精致的JavaScripter 01：JavaScript簡介

    摘要：精致從細節做起。標準會在每年的月發布一次，作為當年的正式版本，便是年發布的正式版本。支持情況各大瀏覽器對的支持情況瀏覽器支持情況對的支持情況支持情況。在瀏覽器中基于實現的已經成為的重要組成部分。 精致從細節做起。前端的工作也有一段時間了，大大小小的前端框架都有接觸過，越是深入學習越是感覺之前的學習過于粗糙，基礎不夠扎實，于是準備近期把JavaScript的基礎知識點梳理一下，查缺補漏，...

    張巨偉 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<