後端Java工程師常用JavaScript_DOM

来源:http://www.cnblogs.com/BingHeng/archive/2016/12/25/6220541.html
-Advertisement-
Play Games

JavaScript [1]事件 ①用戶操作網頁或者瀏覽器所發生的交互行為稱為事件。比如:點擊按鈕,最小化視窗,修改文本框內容等。 ②JS為我們定義許多瀏覽器中的事件。比如:單擊(onclick)、雙擊(ondblclick)、移動(onmousemove) 等。 ③我們可以通過為事件設置一個響應函 ...


JavaScript

  [1]事件

    ①用戶操作網頁或者瀏覽器所發生的交互行為稱為事件。比如:點擊按鈕,最小化視窗,修改文本框內容等。

    ②JS為我們定義許多瀏覽器中的事件。比如:單擊(onclick)、雙擊(ondblclick)、移動(onmousemove) 等。

    ③我們可以通過為事件設置一個響應函數來對事件進行響應:

 1 <body>
 2 <button id="btn">按鈕</button>
 3 </body>
 4 
 5 <script type="text/javascript">
 6     //獲取到按鈕的對象
 7     var btn = document.getElementById("btn");
 8     //為btn綁定一個單擊響應函數
 9     btn.onclick = function(){
10     alert("hello World!");
11     };
12 </script>
13                 

  [2]載入方式

    ①瀏覽器載入網頁代碼時是由上到下依次載入的。

    ②如果我們在瀏覽器還尚未載入網頁中的元素,那麼將無法確定,控制台將會報錯,解決該問題有兩種方式:

      1) 將JS代碼編寫到body標簽的下邊。但是我們習慣上將JS、CSS等代碼都寫在head標簽中。這種形式不符合使用習慣。

      2) 將js代碼編寫到window.onload = function(){}中。推薦的使用方式。(ps:在編寫js代碼的時候最好開始的時候就將window.onload = function(){}寫上)。

  [3]DOM編程

    DOM全稱:Document Object Model。

    DOM主要是通過JavaScript來控制網頁中的各種元素,從而達到使網頁可以和用戶進行動態交互的作用。

    DOM的操作主要分四部分增、刪、改、查。   

    節點類型:
      - 元素節點
      - 文本節點
      - 屬性節點

    ①DOM查詢

      1) 通過document對象查詢:

        document.getElementById(id);  ---> 通過id獲取一個元素節點對象.   

        document.getElementsByTagName(標簽名); ---> 通過標簽名獲取一組元素節點對象.

        document.getElementsByName(name屬性); --->通過name屬性獲取一組元素節點對象,一般用來獲取表單項. 

      2) 通過具體的元素對象查詢:

        element.getElementsByTagName(標簽名); --->查找當前元素節點內指定標簽名的子節點

        element.childNodes; --->獲取當前節點的所有子節點.

        element.parentNode; --->獲取當前節點的父節點.

      3) 獲取元素的屬性:

        獲取  :  元素.屬性名

        設置  : 元素.屬性名 = 屬性值;

      4)this:

        this指向的是當前函數的所屬對象。

    DOM的增刪改:   

      1) 創建元素節點:document.createElement(標簽名);

      2) 創建文本節點: document.createTextNode(文本值);

      3) 添加子節點: 父節點.appendChild(子節點);

      4) 插入節點: 父節點.insertBefore(新節點,舊節點);

      5) 替換節點: 父節點.replaceChild(新節點,舊節點);

      6) 刪除節點: 父節點.removeChild(子節點); / 子節點.parentNode.removeChild(子節點) *****

      7) 讀寫元素內部HTML代碼

        讀取: 元素.innerHTML

        設置: 元素.innerHTML = 新值
        

    

    


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

-Advertisement-
Play Games
更多相關文章
  • 一、游標 新增加not-allowed游標,不允許訪問 隱藏游標,在觸模應用上很有用,css2.1需要一個透明的圖片來實現,而css3直接用cursor:none即可。 完整代碼: 二、擴大熱區 應用在小按鈕的情況下,不好被滑鼠點擊到 代碼如下: 三、自定義覆選框 系統自帶覆選框美化 利用css3提 ...
  • 本人Sam。啟蒙微軟派,遁入前端教。已修煉後端技能、領域驅動設計、前端技能等近八餘載。擅長C#,領域驅動設計,必殺技為Javascript、Css。為領域驅動設計在前端教的應用而奮鬥。現將自我領悟的前端教技能秘笈總結如下: 上圖咯: 內功心法 前端教的三大內功秘笈:Html、Css、Javascri ...
  • 由於a標簽屬於內聯元素,無高度和寬度屬性,因此控制滑鼠經過狀態改變背景顏色時,僅在有文字的地方顯示背景顏色。解決的辦法是把a標簽變為塊級元素,display:block ...
  • 設置圖片和文字的垂直居中。vertical-align:middle;圖片豎向居中,然後文字就可以和圖片對齊。 ...
  • 本文系筆者學習原生javascript動效的筆記。內容基於某非著名培訓機構的視頻教程。並重新做了歸類整理。刪除了一些過時的內容。並重做了GIF圖,加上了自己的一些分析。 一. 運動學基礎 引子:從左到右的div 點擊按鈕,一個紅色div從左向右運動! 運動的要素在於一個絕對定位的主體,一個定時器。和 ...
  • 註意:leftBox和rightBox設置浮動之後脫離了普通的文檔流,不再占用原來文檔中的位置,因此無法把父div撐開。 解決的方法: ...
  • 自從威少砍下45+11+11的大號三雙之後,網上出現了各種各樣的神級段子,有一條是這樣的: 威少:Hey,哥們,最近過得咋樣! 濃眉:對方開啟了好友驗證,請先添加對方為好友 威少:。。。。。。 JRS:2333333 看到了一條比賽當天的數據統計:威少45+11+11,杜少32+8+3,伊巴卡19+ ...
  • 一、變數提升 在ES6之前,JavaScript沒有塊級作用域(一對花括弧{}即為一個塊級作用域),只有全局作用域和函數作用域。變數提升即將變數聲明提升到它所在作用域的最開始的部分。上個簡歷的例子如: 之所以會是以上的列印結果,是由於js的變數提升,實際上上面的代碼是按照以下來執行的: 二、函數提升 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...