JS 的 Element元素對象

来源:https://www.cnblogs.com/zyueer/archive/2019/08/09/11328921.html
-Advertisement-
Play Games

在 HTML DOM 中, 元素對象代表著一個 HTML 元素。 元素對象 的 子節點可以是, 可以是元素節點,文本節點,註釋節點。 NodeList 對象 代表了節點列表,類似於 HTML元素的子節點集合。 Element對象的屬性和方法 1.元素特性相關屬性 element.id 設置/返回元素 ...


在 HTML DOM 中, 元素對象代表著一個 HTML 元素

元素對象 的 子節點可以是, 可以是元素節點,文本節點,註釋節點。

NodeList 對象 代表了節點列表,類似於 HTML元素的子節點集合。

Element對象的屬性和方法

1.元素特性相關屬性

  element.id    設置/返回元素的id

  element.tagName    設置/返回元素的標簽名

  element.dir    設置/返回元素的文字方向

  element.accessKey    設置/返回元素的快捷鍵

  element.draggable    設置/返回元素的是否可拖拽

  element.lang    設置/返回元素的語言

  element.tabIndex    設置/返回元素的在Tab鍵遍歷時的順序,-1表示不可被遍歷

  element.hidden    設置/返回元素 是否可見

  element.contentEditable    設置/返回元素  是否可編輯

  element.isContentEditable    返回元素  是否可編輯 

2.元素狀態相關屬性

  element.attributes    設置/返回元素的屬性,返回一個類似數組的對象。

  element.className    設置/返回元素的類名,它的值是一個字元串,每個class之間用空格分隔

  element.classList    設置/返回元素的類名,返回一個類似數組的對象。

  element.innerHTML    設置/返回元素包含的所有HTML代碼

3.盒模型相關屬性

  element.clientHeight    返回元素的CSS高度,只對塊級元素有效,行內元素返回0。  除了元素本身的高度,還包括padding(不包括border、margin)。如果有滾動條還要減去水平滾動條的高度。

    document.body.clientHeight  網頁總高度  大於>    document.documentElement.clientHeight  瀏覽器視窗高度(減去滾動條的高度)

  element.clientLeft,  element.clientTop     返回元素左邊框的寬度,不包括padding和margin

  element.scrollHeight,  element.scrollWidth    返回當前元素的總高度,包括溢出容器部門,包括padding、偽元素高度不包括border、margin、滾動條。

  element.scrollLeft,  element.scrollTop    返回當前元素向右滾動的px

    如果要查看整張網頁的水平的和垂直的滾動距離,要從document.documentElement元素上讀取

  element.offsetHeight,  element.offsetWidth    返回元素的垂直高度,包括heigth、padding、border、滾動條高度。

  element.offsetLeft,  element.offsetTop   返回當前元素 左上角位移

4.節點屬性

  element.appendChild()    為元素添加一個新的子元素

  element.children,  element.childElementCount

  element.firstElementChild,  element.lastElementChild

  element.nextElementSibling,  element.previousElementSibling

  element.offsetParent

5.屬性相關方法

  element.getAttribute()  返回同名屬性的值

    element.setAttribute()

    element.removeAttribute()

    element.hasAttribute()

  element.querySelector()   返回匹配的第一個元素

  getElementsByTagName    返回指定標簽名的所有子元素集合

  getElementsByClassName

6.事件

       監聽事件都繼承 EventTarget介面

    element.addEventListener()    添加事件監聽函數

    element.removeEventListener()    移除

    dispatchEvent()    觸發事件

  scrollIntoView()  滾動到當前元素

  element.focus()    設置元素獲取焦點

補充:DOM事件對象  https://www.runoob.com/jsref/dom-obj-event.html

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  

 


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

-Advertisement-
Play Games
更多相關文章
  • 1. 多線程的底層實現? 2. 線程間怎麼通信? 3. 網路圖片處理問題中怎麼解決一個相同的網路地址重覆請求的問題? 4. 用NSOpertion和NSOpertionQueue處理A,B,C三個線程,要求執行完A,B後才能執行C,怎麼做? 5. 列舉cocoa中常見對幾種多線程的實現,並談談多線程 ...
  • 初步認為應該是與熱點名稱的位元組數有關。 然後開始查看源碼。 /Settings/res/xml/tether_prefs.xml 中的 發現了熱點設置界面在HotspotSettings 裡面, 在HotspotSettings中點擊設置wifi熱點,進入/Settings/src/com/andr ...
  • Android上已經自動對鍵盤遮擋輸入框做了處理,所以我們只需要關註ios。 1.首先引入 KeyboardAvoidingView 2.然後在頁面的最外層加上 KeyboardAvoidingView 如果適配ios和Android,可以將頁面提取出來 ...
  • 菜鳥入坑記——第一篇 關鍵字:AlarmManager 一、AlarmManager簡介: 參考網址:https://www.jianshu.com/p/8a2ce9d02640 參考網站:https://www.runoob.com/w3cnote/android-tutorial-alarmma ...
  • 在html中使用css的三種方式: 1、行內樣式:同過元素的style屬性來設置 屬性之間分號隔開。 2、內部樣式:在<head>的<style>元素中定義css樣式 3、外部樣式:在css文件中定義css樣式,然後在html的<head>中通過<style>引入外部樣式表 css文件中不加<sty ...
  • 在電腦科學中,樹是一種十分重要的數據結構。樹被描述為一種分層數據抽象模型,常用來描述數據間的層級關係和組織結構。樹也是一種非順序的數據結構。下圖展示了樹的定義: 在介紹如何用JavaScript實現樹之前,我們先介紹一些和樹相關的術語。 如上圖所示,一棵完整的樹包含一個位於樹頂部的節點,稱之為根節 ...
  • 翻譯:瘋狂的技術宅,原文:https://blog.bitsrc.io/11-javascript-animation-libraries-for-2018-9d7ac93a2c59 當我想要在網上找一個簡潔的 Javascript 動效庫時,總是發現很多“推薦”的庫都是缺乏持續維護的。 經過一番研 ...
  • 學完了JavaScript基礎部分,總結出一些基本案例,以備日後查看! 1、九九乘法口訣表:在控制臺中輸出九九乘法口訣表!代碼如下: 2、水仙花數:所謂“水仙花數”是指一個三位數,其各位數字立方和等於該數本身!代碼如下: 3、輪播圖片:利用數組知識,實現簡單的輪播效果!代碼如下: 4、字元串拼接:給 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...