DOMBOM(source、methods、contents、Application)

何為DOM?

Document Object Model Dom,是W3C組織推薦的處理可擴展標志語言的標準編程接口。在網頁上,組織頁面的對象被組織在一個樹形結構中,用來表示文檔中對象的標準模型就稱為DOM。

可以認為DOM是頁面上數據和結構的一個樹形表示。

Source:

DOM的歷史可以追溯至1990年代后期微軟與Netscape的“瀏覽器大戰”,雙方為了在JavaScript與JScript一決生死,于是大規模的賦予瀏覽器強大的功能。微軟在網頁技術上加入了不少專屬事物,既有VBScript、ActiveX、以及微軟自家的DHTML格式等,使不少網頁使用非微軟平臺及瀏覽器無法正常顯示。DOM即是當時蘊釀出來的杰作。

Methods:

HTML DOM是關于如何獲取、修改、添加或刪除HTML元素的標準。

HTML文檔中的所有節點組成了一個文檔樹。

訪問HTML元素等同于訪問節點,主要有以下三種方式:

1)通過使用getElementById()方法

2)通過使用getElementByTagName()方法

3)通過使用getElementByClassName()方法

獲取到DOM對象后,可以做很多事情,如獲取該節點的各種信息,進一步獲取其子節點、父節點的信息,還可以層層推進直到根或葉子。

Contents:

?

?

DOM= Document Object Model,文檔對象模型,DOM可以以一種獨立于平臺和語言的方式訪問和修改一個文檔的內容和結構。換句話說,這是表示和處理一個HTML或XML文檔的常用方法。

換句話說,這是表示和處理一個HTML或XML文檔的常用方法。有一點很重要,DOM的設計是以對象管理組織(OMG)的規約為基礎的,因此可以用于任何編程語言。最初人們把它認為是一種讓JavaScript在瀏覽器間可移植的方法,不過DOM的應用已經遠遠超出這個范圍。Dom技術使得用戶頁面可以動態地變化,如可以動態地顯示或隱藏一個元素,改變它們的屬性,增加一個元素等,Dom技術使得頁面的交互性大大地增強。

Application:

通過 JavaScript,您可以重構整個 HTML 文檔。您可以添加、移除、改變或重排頁面上的項目。

DOM的修改

1)改變HTML內容;

2)改變CSS樣式;

3)改變HTML屬性;

4)創建新的HTML元素;

5)刪除已有的HTML元素;

6)改變時間(處理程序)。

也就是說,從dom操作開始,真正能夠通過編程對文檔進行控制。

何為BOM?

?

Source:

BOM:Browser Objec Model,是指瀏覽器對象模型,是用于描述這種對象和對象之間層次關系的模型。BOM提供了獨立于內容的、可以與瀏覽器窗口進行互動的對象結構。

Methods:

對BOM的子對象包括document、history、location、screen、navigator和frame對象,每個對象都有許多的操作方法。

DOM對象的方法前面也說了,就如window,有window.open(),打開窗口,或window.close,關閉窗口,再如系統對話框,消息框alert,對話框confirm等等。

Contents:

BOM由多個對象組成,其中代表瀏覽器窗口的window對象是BOM的頂層對象,其他對象是該對象的子對象,包含了document、history、location、screen、navigator和frame對象。

?

Application:
1. 彈出新瀏覽器窗口的能力;
2. 移動、關閉和更改瀏覽器窗口大小的能力;
3. 可提供WEB瀏覽器詳細信息的導航對象;
4.可提供瀏覽器載入頁面詳細信息的本地對象;
5 .可提供用戶屏幕分辨率詳細信息的屏幕對象;
6. 支持Cookies;
7. Internet Explorer對BOM進行擴展以包括ActiveX對象類,可以通過JavaScript來實現ActiveX對象。

?

轉載于:https://www.cnblogs.com/ceneasy/p/9853611.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/249139.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/249139.shtml
英文地址,請注明出處:http://en.pswp.cn/news/249139.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

sublime 無法下載插件解決辦法(親測有效)

最近發現sublime裝不到插件 只需要在Preferences > Package Settings > Package Control > Settings - User頁面加上以下代碼即可: "channels":["https://erhan.in/channel_v3.json"]上述頻道親測有效,如果還不能使用的小…

ES命令

基礎概念 Elasticsearch有幾個核心概念。從一開始理解這些概念會對整個學習過程有莫大的幫助。 接近實時(NRT) Elasticsearch是一個接近實時的搜索平臺。這意味著,從索引一個文檔直到這個文檔能夠被搜索到有一個輕微的延遲&#xff…

Bug : Bash on Ubuntu on Windows scp work on window but not in shell file

: No Permission轉載于:https://www.cnblogs.com/rgqancy/p/10726154.html

圖片做背景撐開div

需求點&#xff1a; 設計師給了一張超大背景圖&#xff0c;需要做一個不知道大小廣告位&#xff0c;要求就是要把圖片撐滿整個頁面&#xff0c;而且還得保證自適應。 解決方案一 &#xff08;親測有效&#xff09; HTML代碼&#xff1a; <div class"wrap">…

十一、jQuery的基本用法

初步接觸不是很習慣&#xff0c;之前都是用的js&#xff0c;但是jQuery去掉了js很多繁瑣的內容&#xff0c;用的不是很熟&#xff0c;所以先簡單的記錄一下&#xff0c;后續在繼續補充 jq獲取html內容: $("#id") 獲取id $(".class") class名 …

spring-注解---IOC(3)

spring--注解---IOC(3) package com.zwj.bean;public class Blue {public Blue(){System.out.println("blue...constructor");}public void init(){System.out.println("blue...init...");}public void detory(){System.out.println("blue...detory..…

絕對定位的div圖片居中自適應

需求點 固定定位div中添加圖片內容&#xff0c;保證圖片垂直居中&#xff0c;并且自適應。 一般在第三方UI組件中&#xff0c;這種布局需求較為常見 解決方案一 &#xff08;親測有效&#xff09; HTML代碼&#xff1a; <div class"el-carousel__item is-active is…

英語進階系列-A06-本周總結

本周總結 目錄Content 英語進階系列-A01-再別康橋 英語進階系列-A02-英語學習的奧秘 英語進階系列-A03-英語升級練習一 英語進階系列-A04-英語升級練習二 英語進階系列-A05-英語升級練習三 古詩Poem 再別康橋 回鄉偶書 梅花 勸學 游子吟 詞匯Vocabulary be; have; give; get; t…

在div中設置文字與內部div垂直居中

要實現如圖一所示的結果&#xff1a; html代碼如下&#xff1a; <!DOCTYPE html> <html><head lang"zh"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta charset"utf-8" /><title>商…

王之泰201771010131《面向對象程序設計(java)》第九周學習總結

第一部分&#xff1a;理論知識學習部分 第7章異常、日志、斷言和調試 概念&#xff1a;異常、異常類型、異常聲明、異常拋出、 異常捕獲1.異常處理技術2.斷言的概念及使用3.基本的調試技巧 1&#xff09;異常的概念 a.Java的異常處理機制可以控制程序從錯誤產生的 位置轉移到能…

vue移動端UI框架——Vant全局引入vs局部引入

全局引入 1.在main.js中全局引入全部vant組件 優點&#xff1a;可以在所有vue文件的template中定義所需組件缺點&#xff1a;打包發布時會增加包的大小&#xff0c;Vue的SPA首屏打開時本來就有些慢&#xff0c;同時不能在js中使用類似Toast功能的組件 代碼如下&#xff1a; …

大前端完整學習路線(完整版),路線完整版

第一階段&#xff1a; HTMLCSS: HTML進階、CSS進階、divcss布局、HTMLcss整站開發、 JavaScript基礎&#xff1a; Js基礎教程、js內置對象常用方法、常見DOM樹操作大全、ECMAscript、DOM、BOM、定時器和焦點圖。 JS基本特效&#xff1a; 常見特效、例如&#xff1a;tab、…

web-8. 多框架頁面的創建

8. 多框架頁面的創建 8.1 框架概念 框架是由單個框架加上框架集構成的區域。 每個框架是指頁面中一個獨立額區&#xff0c;框架集是一個關于框架結構的頁面&#xff0c;定義本頁面的框架數、大小、布局以及框架之間的相互關系。 8.2 框架集標記 框架集文件保存了所有框架的信息…

匯編語言第二章知識梳理及思考

第二章 寄存器&#xff08;CPU工作原理&#xff09; CPU概述 CPU由運算器、控制器、寄存器等器件組成&#xff0c;這些器件靠內部總線相連。 內部總線實現CPU內部各個器件之間的聯系。 外部總線實現CPU和主板上其他器件的聯系。 寄存器概述 8086CPU有14個寄存器&#xff1a; AX…

前端面試題總結(js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源)持續更新

Vue面試題 生命周期函數面試題 1.什么是 vue 生命周期 2.vue生命周期的作用是什么 3.第一次頁面加載會觸發哪幾個鉤子 4.簡述每個周期具體適合哪些場景 5.created和mounted的區別 6.vue獲取數據在哪個周期函數 7.請詳細說下你對vue生命周期的理解&…

Neural Networks and Deep Learning 讀書筆記

1 轉載于:https://www.cnblogs.com/jellyj/p/9867103.html

JS中的數據類型轉換:String轉換成Number的3種方法

今天有個學員問了個關于數據類型轉換的問題&#xff0c;我覺得這個是可以給大家說一下的。 JavaScript中&#xff0c;可以通過以下3種方法來將string值轉換成number&#xff1a; 1.調用Number()來對string進行值類型轉換。 2.parseInt()。 3.parseFloat()。 Number() 使用…

Java學習——使用Static修飾符

程序功能&#xff1a;通過兩個類 StaticDemo、LX4_1 說明靜態變量/方法與實例變量/方法的區別。 package Pack1;public class Try {public static void main(String[] args) {// TODO Auto-generated method stubSystem.out.println("靜態變量x"StaticDemo.getX());非…

JavaScript從入門到精通之入門篇(一)概念與語法

入門篇大綱 第一部分 概念與語法 1.JavaScript的歷史 2.基本概念 3.JavaScript的使用、調試和異常處理 4.基本詞法和變量 5.數據類型和類型轉換 6.運算符 算數運算符 賦值運算符 一元運算符 使用一元運算符&#xff0c;將會把所有的內容轉換為數值運算&#xff0c;不…

【小記】-005--純CSS實現的小玩意兒

效果圖奉上 代碼奉上 <!DOCTYPE html> <html lang"zh"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-UA-Compatible&q…