javascript中DOM部分基礎知識總結

来源:http://www.cnblogs.com/2010master/archive/2016/08/28/5815838.html
-Advertisement-
Play Games

1.DOM介紹 1.1 DOM概念 文檔對象模型(Document Object Model),它定義了訪問和處理HTML文檔的標準方法。現在我們主要接觸到的是HTML DOM。 HTML文檔中的每個成分都是一個節點。HTML文檔中的所有節點組成了一個文檔樹(節點樹)。HTML文檔中的每個元素、屬性 ...


1.DOM介紹      1.1 DOM概念      文檔對象模型(Document Object Model),它定義了訪問和處理HTML文檔的標準方法。現在我們主要接觸到的是HTML DOM。 HTML文檔中的每個成分都是一個節點。HTML文檔中的所有節點組成了一個文檔樹(節點樹)。HTML文檔中的每個元素、屬性、文本等都代表著樹中的一個節點。樹起始於文檔節點,並由此繼續延伸枝條,直到處於這棵樹最低級別的所有文本節點為止。學習DOM,就是學習一些操作頁面元素的API(方法)。下圖表示一個文檔樹。  

 

     1.2 DOM的組成      DOM是由節點組成的。節點又分為標簽節點、屬性節點、文本節點。        1.3 DOM的用途      通過JavaScript,我們可以重構整個HTML頁面文檔。可以添加、移除、改變或重排頁面上的項目。要改變頁面的某個東西(即動態改變),JavaScript就需要獲得對HTML文檔中所有元素進行訪問的入口。這個入口,連同對HTML元素進行添加、移動、改變或移除的方法和屬性,都是通過文檔對象模型(DOM)來獲得的。   2.獲取頁面元素的三種方式
document.getELementById(idStr); document.getElementsByTagName(tagStr); document.getElementsByClassName(classStr);     //不常用   3.事件      3.1 什麼是事件      事件就是文檔或瀏覽器中發生的某些特定的交互瞬間。可分為觸發(發生的什麼事,做的什麼操作)和響應(得到或達到的什麼效果)兩個階段。        3.2 事件的三要素      a,事件源     //要註冊事件的對象      b,事件名稱     //要註冊哪種事件,click、mouseover等等      c,事件處理程式     // 要執行的函數        3.3 註冊事件的三種方式      a,行內式
1 <div id="box" style="width: 100px; height: 100px; "></div>
2 <input type="button" value="點擊切換顏色" onclick="toggle();"/>
3 <script>
4      var box = document.getElementById("box");
5      function toggle() {
6          box.style.backgroundColor = "#f00"; 
7      }
8 </script>

 

       b,內嵌式--on
1 <div id="box" style="width: 100px; height: 100px; " id="box"></div>
2 <input type="button" value="點擊切換顏色" id="btn"/>
3 <script>
4     var box = document.getElementById("box");
5     var btn = document.getElementById("btn");
6     btn.onclick = function () {
7         box.style.backgroundColor = "#f00";
8     }
9 </script>
       c,內嵌式--addEventListener      addEventListener(type, listener, useCapture); //type,事件名稱(註意不帶on) //listener,時間的監聽者--事件處理函數 //useCapture,是否捕獲,true(捕獲) false(冒泡)
 1 <input type="button" value="button" id="btn"/>
 2 <script>
 3      var btn = document.getElementById("btn");
 4      btn.addEventListener("click", function () {
 5          alert("我說:哈哈哈"); 
 6      },false);
 7      btn.addEventListener("click", function () {
 8           alert("她說:23333");
 9      }, false);
10      //兩次事件都會執行,這是區別於on方式的
11 </script>

 

還有一個是attachEvent,區別主要分為事件名稱的區別和this的區別,放在代碼塊里解釋  
//事件名稱的區別
     // addEventLisener中第一個參數type是click、load,不帶on
     // attachEvent中一個參數type是onclick、onload
//this的區別
     // addEventLisener:事件處理程式會在當前對象的作用域運行,因此事件處理程式的this就是當前對象
     // attachEvent:事件處理程式是在全局作用域下運行,因此this就是window
      補充1:註冊事件的性能問題           可能會多次調用匿名函數,占記憶體。不妨把函數寫在事件之外     補充2:移除事件的兩種方式 1,如:element.onlick = null; 2,如:removeEventListener     (IE9以前detachEvent, 如果註冊的時候使用的是匿名函數,則無法移除)        3.4 常用的一些事件      onclick, ondblclick, onchang, onfocus, onnblur, onmouseover, onmouseout, onkeyup, onkeydown, onload, onunload, onsubmit等等        3.5 事件中的this      事件中的this始終指代當前觸發事件的對象   4.獲取標簽內容和設置標簽內容      第一種方式,innerText      第二種方式,innerHTML      兩者的區別:1,兩者都可以獲得頁面元素之間的內容                          2,innetText只會獲取文本信息,而innerHTML會將標簽之間的標簽獲取到,並會原樣輸出                          3,innerText在火狐早期版本不支持,早期火狐只支持textContent,新版本都已相容                          4,innerText設置帶有標簽內容的時候,會正常輸出;innerHTML會將裡面的標簽渲染成HTML標簽顯示(轉義)             為此封裝相容性函數,進行能力檢測
 1 //獲得頁面標簽之間文本內容的相容性寫法
 2 function getInnerText(obj) {
 3             if (obj.innerText) {
 4                         retrun obj.innerText;
 5             } else {
 6                         return obj.textContent;
 7             }
 8 }
 9 //設置頁面標簽之間的文本內容的相容性寫法
10 function setInnerText(obj, value) {
11             if(obj.innerText) {
12                         obj.innerText = value;
13             } else {
14                         obj.textContent = value;
15             }
16 }

 

5.動態操作頁面元素的屬性及修改樣式        5.1 給元素添加類名以改變樣式      5.2 用JS改變標簽的單屬性值
<input type="button" value="按鈕1" id="btn" aa="自己設置的類名">
<script>
    var btn = document.getElementById("btn");
    btn.value = "按鈕2";     //設置屬性,改變了原來的屬性值
    btn.bb = "自己設置的屬性";     //實際上是添加不上去的
</script>
            5.3 修改元素背景色      5.4 動態改變元素的寬高      5.5 改變元素的位置(定位)      5.6 改變元素的層級      5.7 改變元素的透明度
 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         div {
 6             width: 200px;
 7             height: 200px;
 8             background-color: rebeccapurple;
 9             position: absolute;
10         }
11     </style>
12 </head>
13 <body>
14 <input type="button" id="btn" value="button">
15 <div id="box"></div>
16 <script>
17     var btn = document.getElementById("btn");
18     var box = document.getElementById("box");
19     btn.onclick = function () {
20         box.style.backgroundColor = "blue"; //5.3
21         box.style.width = " 400px"; //5.4
22         box.style.top = "200px";    //5.5
23         box.style.zIndex = "1"; //5.6
24         box.style.opacity = .5; //5.7
25     };
26 </script>
27 </body>

 

6.自定義屬性      getAttribute     獲取自定義屬性      setAttribute     設置自定義屬性      removeAttribute     移除自定義屬性      下麵是一段tab切換的css樣式和js代碼     
 1 <style>
 2         * {
 3             margin: 0;
 4             padding: 0;
 5         }
 6         ul {
 7             list-style: none;
 8         }
 9         .box {
10             width: 400px;
11             height: 300px;
12             border: 1px solid #ccc;
13             margin: 100px auto;
14         }
15         .hd {
16             height: 45px;
17         }
18         .hd span {
19             display: inline-block; /*將行內元素轉換成行內塊元素,寬高才起作用*/
20             width: 90px;
21             background-color: pink;
22             line-height: 45px;
23             text-align: center;
24             cursor: pointer;
25         }
26         .hd span.current {
27             background-color: purple; /*紫色*/
28         }
29         .bd li {
30             height: 255px;
31             background-color: purple;
32             display: none;  /*設置隱藏*/
33         }
34         .bd li.current {
35             display: block;
36         }
37     </style>
38 </head>
39 <body>
40 <div class="box" id="box">
41     <div class="hd">
42         <span class="current">體育</span>
43         <span>娛樂</span>
44         <span>新聞</span>
45         <span>綜合</span>
46     </div>
47     <div class="bd">
48         <ul>
49             <li class="current">我是體育模塊</li>
50             <li>我的娛樂模塊</li>
51             <li>我是新聞模塊</li>
52             <li>我是綜合模塊</li>
53         </ul>
54     </div>
55 </div>
56 <script>
57     var box = document.getElementById("box");
58     var spans = box.getElementsByTagName("span");
59     var lis = box.getElementsByTagName("li");
60     for (var i = 0; i < spans.length; i++) {
61         spans[i].setAttribute("index", i);//設置自定義屬性index
62         spans[i].onclick = function () {
63             for (var j = 0; j < spans.length; j++) {
64                 spans[j].removeAttribute("class");
65                 lis[j].removeAttribute("class");
66             }
67             this.setAttribute("class", "current");
68             //var index = this.getAttribute("index");//設置一個變數來獲得自定義屬性
69             //lis[index].setAttribute("class", "current");
70             lis[this.getAttribute("index")].setAttribute("class", "current");
71         };
72     }
73 </script>

 

7.節點      7.1 節點的類型
 a.標簽節點 b.屬性節點 c.文本節點
       7.2 節點的組成
節點類型nodeType 節點名稱nodeName 節點值nodeValue
       7.3 節點的層次           父節點--parentNode           子節點--childNodes     標準的DOM屬性,獲取子標簽以外,還會獲取文本節點,IE8中會忽略空白節點                     --children     不是標準的DOM屬性,但是所有的瀏覽器都支持,只會返回元素節點           兄弟節點--nextSibling     下一個兄弟節點,可能是非元素節點,IE8中是元素節點                        --nextElementSiblings     火狐,谷歌支持,IE8及之前的瀏覽器不支持                        --previousSibling                        --previousElementSiblings           第一個和最後一個節點--firstChild                                            --firstElementChild                                            --lastChild                                            --lastElementChild           註:選擇節點時,由於瀏覽器不同,存在很多相容性問題,我們在選擇之前需要進行能力檢測。        7.4 節點操作  
克隆元素(標簽)節點 cloneNode() 參數為True,深度克隆,克隆當前對象的一切子節點;為false,淺克隆,只會克隆標簽,不包含文本信息
移除節點 removeChild  
追加節點 appendChild 父節點.appendChild(子節點)
插入節點 insertBefore  
獲得屬性節點 getAttributeNode  
追加節點 appendChild 父節點.appendChild(子節點)
    8.動態創建元素  
方法一、documenet.write(); 寫在函數里的話,會衝掉之前的元素,所以一般不用  
方法二、innerHTML innerHTML比較方便,但要註意儘量不要頻繁的拼接字元串 字元串具有不可變性,會重覆開闢記憶體空間,一定要註意優化 可以考慮用數組代替  
方法三、document.creatElement() 如:appendChild()        removeChild()        insertBefore()        replaceChild()  

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 首發於: "https://mingjiezhang.github.io/" 。 在JavaScript中,this對象是運行時基於函數的執行環境(也就是上下文)綁定的。 從react中的demo說起 Facebook最近一次更新react時,將es6中的class加入了組件的創建方式當中。Face ...
  • 一、引用 二、調用示例 1、彈出基本消息框: 2、彈出模態消息框: 3、彈出帶【確定】和【取消】按鈕的模態消息框,並設置寬度位為200px: 4、點擊【取消】按鈕,不讓消息框關閉: 5、在消息框關閉時執行自定義邏輯: 6、讓消息框彈出後在指定時間後自動關閉,此時不會顯示右上角的“x”關閉按鈕,以及【 ...
  • × 目錄 [1]註釋節點 [2]文檔類型 前面的話 把註釋節點和文檔類型節點放在一起是因為IE8-瀏覽器的一個bug。IE8-瀏覽器將標簽名為"!"的元素視作註釋節點,所以文檔聲明也被視作註釋節點。本文將詳細介紹這兩部分的內容 註釋節點 【特征】 註釋在DOM中是通過Comment類型來表示,註釋節 ...
  • 前言 這幾天在看273M站點時被他們的頁面交互方式所吸引,他們的首頁是採用三次載入+分頁的方式。也就說分為大分頁和小分頁兩種交互。大分頁就是通過分頁按鈕來操作,小分頁是通過下拉(向下滑動)時非同步載入數據。 273這個M站點是產品推薦我看的。第一眼看這個產品時我就再想他們這個三次載入和翻頁按鈕的方式, ...
  • 不管學習什麼知識,習慣於把自己所學習的知識列成一個list,會有助於我們理清思路,是一個很好的學習方法。強烈推薦。 以下篇幅有點長,希望讀者耐心閱讀。 以下內容會分為如下部分: 1.涵義 1.1:this涵義 1.2:this指向的可變性 2.使用場合 2.1:全局環境 2.2:構造函數 2.3:對 ...
  • Javascript是一種基於對象(object-based)的語言,你遇到的所有東西幾乎都是對象。但是,它又不是一種真正的面向對象編程(OOP)語言,因為它的語法中沒有class(類)。 那麼,如果我們要把"屬性"(property)和"方法"(method),封裝成一個對象,甚至要從原型對象生成 ...
  • 最近做項目中用到了iframe,子頁面更改父頁面的高度,經過九九八十一難,找到瞭解決的辦法。 $(window).load(function() { var h=$(document).height(); var ifHeight = $(window.top.document).find(".XX ...
  • jquery學習筆記 1、click與dbclick事件 用交互操作中,最簡單直接就是點擊操作。jQuery提供了兩個方法一個是click方法用於監聽用戶單擊操作,另一個方法是dbclick方法用於監聽用戶雙擊操作。這兩個方法的用戶是類似,下麵以click()事件為例 使用上非常簡單: 方法一:$e ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...