細看JS中的BOM、DOM對象

来源:http://www.cnblogs.com/waj6511988/archive/2017/04/16/6717813.html
-Advertisement-
Play Games

DOM對象模型 【DOM樹節點】 DOM節點分為三大類:元素節點,文本節點,屬性節點: 文本節點,屬性節點為元素節點的兩個子節點; 通過getElment系列方法,可以去到元素節點; 【查看節點】 1.getElementById:通過id獲取唯一的節點;多個同名ID只會取到第一個; 2.etEle ...


                                    DOM對象模型 【DOM樹節點】    DOM節點分為三大類:元素節點,文本節點,屬性節點:   文本節點,屬性節點為元素節點的兩個子節點;   通過getElment系列方法,可以去到元素節點; 【查看節點】 1.getElementById:通過id獲取唯一的節點;多個同名ID只會取到第一個; 2.etElementByName:通過name取到一個數組,包含1到多個節點;    使用方式:通過迴圈取到每個節點,迴圈次數,從0開始<數組.length    [查看設置屬性節點]   1.查看屬性節點:getAttribute("屬性名")    2.設置屬性節點:setAttribute("屬性名""屬性值")*/    js修改樣式總結】  1、.className:為元素設置一個新的clas名字;      div1.className="class1"; 2、.style:為元素設置新的樣式,註意駝峰命名法;     div1.style.backgroundColor="red"; 3、.style.cssText:為元素同時修改多個樣式;     div1.style.cssText="width:100px;height:100px";      [查看節點] 1.tagname:獲取節點的標簽名; 2.innerHTML:設置或者獲取節點內部的所有HTML代碼; 3.innerText:設置或者獲取節點內部的所有文字;               獲取行內樣式的方法:var div=document.getElementsByTagName("div"); [獲取層次節點的常用屬性]:   1、.childNodes:(數組)獲取元素的所有子節點(元素節點:子標簽、文本節點);    2、 .firstChild:獲取元素的第一個子節點;    3、.lastChild:獲取元素的最後一個子節點;    4、.ownerDocument:獲取當前文檔根節點,在html中,為doucument節點;    5、.parentNode::獲取當前文檔父節點;    6、.previousSibling:獲取當前節點的前一個兄弟節點    7、.nextSibling:獲取當前節點的後一個兄弟節點;     8、.attributes:獲取當前節點的所有屬性節點; 【註意】:上述屬性均會獲得所有元素節點和文本節點,如果只需要元素節點,需要使用對應的Element屬性,例如: .firstChild->.firstElementChild [創建新增節點]: 1、.createElement("標簽名"):創建一個新的節點,需要配合.setAttribute()方法設置新節點的相關屬性; 2、.appendChild(節點名):在某元素的最後追加一個新節點; 3、.insertBefore(新節點名,目標節點名):將新節點插入到目標節點之前 4、克隆節點 .cloneNode(true/false):需要克隆誰,就用誰去調用克隆對象;     傳遞參數可以是(true/false);     true:為科隆當前節點和所有子節點;     false:之科隆當前節點,不克隆子節點(預設); [刪除替換節點] 1、.removeChild(需刪除節點):從父容器中,刪除指定節點; 2、.replaceChild(,新節點,被替換節點):用新節點替換指定節點,如果新節點為頁面中已有節點會刪除後替換指定節點 function deleteUl1(){ //取到ul1 var ul1=document.getElementById("ul1"); //從ul的父容器刪除ul1 if(ul1){ document.body.removeChild(ul1); }else{ alert("ul1已經不存在"); } } 【表格對象】 1、rows屬性:返回表格中的所有行,數組; 2、insertRow(index):在表格的第index+1行,插入新行; 3.deleteRow():刪除表格的第index+1行;   表格行對象】:   1、cells屬性:返回表格中的所有行,數組;   2、rowIndex:返回當前行,在表格中的索引順序,從0開始;   3、indexCell(index):在表格的第index+1處插入一個<td>;   4、deleteCell(index):刪除當前行的第index+1個<td>;     【表格的單元格對象】   1.cellIndex屬性:返回單元格在該行的索引順序,從0開始;   2、innerHTML屬性:返回或設置當前單元格中的HTML代碼;   3、align屬性:設置當前單元格的水平對齊方式;   4、claaName屬性:設置單元格的class屬性;                            BOM對象模型 【screen對象】 console.log(screen); console.log(screen.width);   //屏幕寬度; console.log(screen.height);    //屏幕高度; console.log(screen.availWidth);//屏幕可用寬度; console.log(screen.availHeight);//屏幕可用高度=屏幕高度-底部任務欄高度;      location對象   location完整的URL路徑:   1.協議://主機名(IP地址):埠號(預設80埠)/文件路徑?傳遞參數(參數名=參數值name1=value1&name2=value2)#錨點*/ console.log(location.href);//完整路徑 console.log(location.protocol);//使用的協議http:https:ftp:file:mailto: console.log(location.pathname);//文件路徑 console.log(location.port);//埠號 console.log(location.search);//從?開始的部分 console.log(location.hostname);//主機名(IP地址) console.log(location.host);//主機名+埠號 console.log(location.hash);//從#開始的錨點 window.location="http://www.baidu.com";//使用JS跳轉頁面 function locationAssign(){ location.assign("http://www.baidu.com"); 載入新文檔,載入之後,可以回退; } function locationReplace(){ location.replace("http://www.baidu.com"); 使用新的文檔,替換當前文檔,替換之後不能回退; } function locationReload(){ 重新載入當前頁面 reload(true):從伺服器重新載入頁面 reload():在本地刷新當前頁面*/         location.reload(true); } console.log(history.length); 瀏覽歷史列表的個數 history.forward();前進到前一個頁面;   history.back();前進到後一個頁面;   history.go(-1);跳轉到任意頁面:前一個頁面為第一個,後一個頁面為-1個 Navigator 瞭解 console.log(navigator.appName); //產品名稱 console.log(navigator.appVersion); //產品版本號 console.log(navigator.userAgent); //用戶代理信息 console.log(navigator.platform); //系統平臺 navigator.plugins。返回一個數組,檢測瀏覽器安裝的所有插件 >>>主要的屬性: description:插件的描述信息         filename:插件在本地磁碟的文件名         length:插件的個數 name:插件名 console.log(navigator.plugins);//檢查瀏覽器安裝的插件信息 navigator.mimeTypes 瀏覽器插件,所支持的文件類型 >>>主要屬性 description:MIME類型描述 enabledPlugin:支持此類型的瀏覽器插件 suffixes:此類型可能的尾碼名 type:MIME類型的寫法,例如: image/x-icon text/css console.log(navigator.mimeTypes);//檢查瀏覽器安裝的插件支持的文件類型   【重點】window對象的常用方法: >>>window對象中的所有方法,均可以省略前面的window,比如close();                 1.prompt:彈窗接受用戶輸入;                 2.alert:彈窗警告;                 3.confirm:帶有確認/取消按鈕的提示框;                 4.close:關閉視窗;                 5.open:重新打開一個視窗,傳入參數URL/視窗名稱/視窗特征;                 6.setTimeout:設置延時執行,只會執行一次;                 7.setInterval:設置定時器,迴圈每個N毫秒執行一次;                          兩個參數:需要執行的function/毫秒                 8.clearTimeout:清除延時;                 9.clearInterval:清除定時器 傳入參數:調用setInterval時返回一個ID,通過變數接受ID,傳入clearInterval;                        
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前言:這是筆者學習之後自己的理解與整理。如果有錯誤或者疑問的地方,請大家指正,我會持續更新! getElementById() obj.getElementById(id) 該方法接收一個參數(該元素的id),若找到則返回該元素對象,若不存在則返回null; 任何HTML元素可以有一個 id 屬性, ...
  • 本文為轉載 (出處:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html) 教程開始: 首先要知道,div是塊級元素,在頁面中獨占一行,自上而下排列,也就是傳說中的流。如下圖: 可以看出,即使div1的寬度很小,頁面中一行可 ...
  • 學前端需要掌握的第一個核心要點就是“玩命的學,玩命的練”,即韌性,不然很難學會,只有堅持下去才能學會。前端學習與前端教程有很多,如果你能“堅持”那麼就開始從簡單的前端模塊學習吧 前端要學習三個部分:HTML,CSS,JavaScript(簡稱JS),因此首先明確三個概念:HTML是內容層,它的目的是 ...
  • 網頁佈局基礎 簡介 什麼是網頁佈局? 網頁佈局是網頁製作的基礎,使用DIV+CSS佈局網頁是基礎中的基礎。三種基本佈局方式:流式佈局,浮動佈局,絕對定位佈局。 W3C標準包括結構化標準語言,表現標準語言,行為標準語言,倡導結構,樣式,行為分離。 CSS中,存在三種定位機制:標準文檔流,浮動,絕對定位 ...
  • 上回書說道,JS中變數、運算符、分支結構、迴圈和嵌套迴圈等內容。本回就由本K給大伙嘮嘮JS中的BOM、DOM和事件。 一、“花心大蘿蔔”——BOM 1、震驚,FFF團為何對BOM舉起了火把——BOM簡介 BOM(Browser Object Model) 是指瀏覽器對象模型,在JS中BOM是個不折不 ...
  • 一個精美的網頁需要的樣式很多,在父級上設置的字體顏色或者大小,在其子元素中不一定全部相同,這時候要更改其中某一項的樣式怎麼辦呢。 很多新手朋友就不明白,會迷惑為什麼我使用class單獨命名了,重新設置了還是沒有變化,會考慮是不是格式錯了,是不是命名有問題,但是有沒有考慮過權重值呢,新手朋友對於權重值 ...
  • opacity透明在網頁製作中使用會很多,為了增加好看的效果,透明的樣式肯定是必不可少的。 記得之前做一個網頁,其中一個塊給了個30的高,背景半透明的黑色,上面有一排導航,導航字體的顏色也就成了灰黑色,本來是想做成白色字體,怎麼改都不行,以為是字體的ul層在背景塊的下麵,想用z-index把字體的層 ...
  • 通過JS實現banner圖的滾動主要是定時器的應用 先新建好banner圖的幾張圖片,最後一張與第一張用同一個,保證滾動的不間斷 改好樣式,需註意所有圖片要在同行顯示,否則不能向左滾動 聲明一個函數,為定時器函數,函數內通過switch結構執行,case的值通過聲明一個全局變數每次執行函數的時候使其 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...