在 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