Element对象

• 参考资料
  • Element对象

Element对象

• 元素节点
• Element对象对应网页的HTML标签元素
• 每一个HTML标签元素，在DOM树上都会转化成一个Element节点对象。

特征相关的属性

• Element.attributes
• Element.id
• Element.tagName
• Element.innerHTML
• Element.outerHTML
• Element.className
• Element.classList
  • Element.classList.add
  • Element.classList.remove
  • Element.classList.contains
  • Element.classList.toggle
  • Element.classList.item
  • Element.classList.toString

盒状模型相关属性

• Element.clientWidth 元素节点可见部分的宽度,元素的CSS宽度加上Padding，减去滚动条（如果存在）。
• Element.scrollWidth 整个元素的宽度，包括由于存在滚动条而不可见的部分。默认情况下，包括Padding，但不包括Border和Margin。
• Element.offsetWidth 元素的水平宽度，包括Padding和Border、以及滚动条。这也意味着，如果不存在内容溢出，Element.offsetWidth只比Element.clientWidth多了边框的宽度。
• Element.style 元素的行内样式
• Element.clientLeft 元素节点左边框（left border）的宽度
• Element.scrollLeft 表示网页元素的水平滚动条向右侧滚动的像素数量
• Element.offsetLeft 相对于父节点的位移 -

相关节点的属性

• Element.children 当前元素节点的所有子元素（HTMLCollection对象）
• Element.childElementCount 当前元素节点包含的子HTML元素节点的个数
• Element.firstElementChild 当前元素节点包含的第一个HTML元素子节点
• Element.lastElementChild 当前元素节点包含的最后一个HTML元素子节点
• Element.nextElementSibling 当前HTML元素节点的后一个同级HTML元素节点，如果没有则返回null。
• Element.previousElementSibling 当前HTML元素节点的前一个同级HTML元素节点，如果没有则返回null
• Element.offsetParent 当前 HTML 元素的最靠近的、并且 CSS 的position属性不等于static的上层元素
  • 用于确定子元素位置偏移的计算基准，Element.offsetTop和Element.offsetLeft就是offsetParent元素计算的。

属性相关的方法

• Element.getAttribute
• Element.setAttribute
• Element.hasAttribute
• Element.removeAttribute

其他方法

• Element.getBoundingClientRect 返回一个对象，提供当前元素节点的大小、位置等信息，基本上就是CSS盒状模型提供的所有信息。
• Element.getClientRects 返回一个类似数组的对象，里面是当前元素在页面上形成的所有矩形
• Element.insertAdjacentHTML 解析HTML字符串，然后将生成的节点插入DOM树的指定位置
• Element.remove 将当前元素节点从DOM树删除
• Element.focus 将当前页面的焦点转移到指定元素上

属性操作

• 标准属性
  • Element.id
  • Element.src
  • Element.href
  • Element.method
• 属性操作
  • Element.getAttribute
  • Element.setAttribute
  • Element.hasAttribute
  • Element.removeAttribute
• dataset属性
  • Element.dataset.name=value 设置某个dataset属性
  • delete Element.dataset.name 删除某个dataset属性

CSS操作

• style属性
• Style对象
  • setProperty()
  • getPropertyValue()
  • removeProperty()
• cssText属性
• 操作class
  • className
  • classList
• getComputedStyle

案例练习

案例练习