JS 的 Element元素對象


在 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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM