1 简介

  1. Element节点对象对应网页的HTML元素

  2. Element对象继承了Node接口

    2 属性

    2.1 元素特性相关属性

    2.1.1 Element.id

  3. 返回指定元素的id属性

    2.1.2 Element.tagName

  4. 返回指定元素的大写标签名，和nodeName属性的值相同

    2.1.3 Element.draggable

  5. 返回一个布尔值，表示当前元素是否可拖动

    2.1.4 Element.lang

  6. 返回当前元素的语言设置

    2.1.5 Element.tabIndex

  7. 该属性返回一个整数

  8. 表示当前元素在Tab键遍历时的属性

    2.1.6 Element.title

  9. 获取当前元素的title属性

    2.2 元素状态的相关属性

    2.2.1 Element.attributes

  10. 属性返回一个类似数组的对象

  11. 成员时当前元素节点的所有属性节点

    2.2.2 Element.className

  12. 该属性用来读写当前元素节点的class属性

  13. 值是一个字符串，每个class之间用空格分割

    2.2.3 Element.classList

  14. 该属性返回一个类似数组的对象

  15. 当前节点的每个class就是这个对象的一个成员
  16. classList对象有如下方法:
  • add(): 增加一个class
  • remove(): 移除一个class
  • contains(): 检查当前元素是否包含某个class
  • toggle(): 将某个class移入或移出当前元素
  • item(): 返回指定索引位置的class
  • toString(): 将class的列表转为字符串
  1. toggle():
  • 该方法可以传递两个参数，第二个参数为布尔值
  • 如果第二个参数为true，则添加属性；如果为false，则去除属性

    2.2.4 Element.dataset

  1. 网页元素可以自定义添加data-属性，用来添加数据 ```javascript

document.getElementById(“myDiv”).dataset.timestamp;

  2. 2. dataset上面的各个属性返回都是字符串
  3. 2. 除了dataset读写data-属性，也可以使用Element.getAttribute()和Element.setAttribute()通过完整的属性名读写这些属性
  4. <a name="XeWMA"></a>
  5. ### 2.2.5 Element.innerHTML
  6. <a name="MEBeo"></a>
  7. ### 2.2.6 Element.clientHeight , Element.clientWidth
  8. <a name="dFWfy"></a>
  9. #### clientHeight
  11. 1. `Element.clientHeight`属性返回一个**整数值**，单位是像素
  12. 1. 只对块级元素生效，对于行内元素返回0
  13. 1. 返回的整数值 = **元素本身的高等+padding部分**；
  14. 1. 不包含border和margin；如果有水平滚动条，要减去水平滚动条的高度
  15. 1. `document.documentElement`的`clientHeight`属性返回当前视口的高度，即浏览器窗口的高度；等同于`window.innerHeight`-水平滚动条的高度
  16. 1. `document.body`的高度是网页的实际高度
  17. <a name="EIp7e"></a>
  18. #### clientWidth
  20. 1. 效果和clientHeight一样
  21. <a name="AYt1F"></a>
  22. ### 2.2.7 Element.clientLeft 和Element.clientTop
  23. <a name="FTShS"></a>
  24. #### clientLeft
  26. 1. 该属性等于元素左边框的宽度
  27. 1. 如果没有设置左边框或者是行内元素，则返回0
  28. 1. 该属性返回整数值
  29. <a name="UW7pZ"></a>
  30. #### clientTop
  32. 1. 效果等同于clientLeft
  33. 1. 返回元素上边框的宽度
  34. <a name="sd479"></a>
  35. ### 2.2.8 Element.scrollHeight 和 Element.scrollWidth
  36. <a name="yCFme"></a>
  37. #### scrollHeight
  39. 1. 返回值是一个整数，表示当前元素的总高度，包括溢出容器、当前不可见的部分
  40. 1. 该值包括padding，不包括border、margin以及水平滚动条的高度
  41. 1. 整张网页的总高度可以通过：
  42.    - document.documentElement.scrollHeight
  43.    - document.body.scrollHeight
  44. <a name="LA5jy"></a>
  45. ### 2.2.9 Element.scrollLeft 和 Element.scrollTop
  46. <a name="uXv15"></a>
  47. #### scrollLeft
  49. 1. 该属性可读写
  50. 1. 表示当前元素的水平滚动条向右滚动的像素数量
  51. <a name="ZmXhk"></a>
  52. ### 2.2.10 Element.offsetParent
  54. 1. 该属性返回最靠近当前元素的，并且CSS的position属性不等于static的上层元素
  55. ```html
  56. <div stype="position:absolute">
  57.       <p>
  58.       <span>hello</span>
  59.       </p>
  60.  </div>
  1. 上面代码中span的offsetParent将返回div元素
  2. 该属性主要用来确认子元素位置偏移的计算基准；Element.offsetTop和Element.offsetLeft就是offsetParent元素计算得来
  3. 如果该元素是不可见的(display:none)或者位置是固定的(position:fixed)，offsetParent返回null

  4. 如果该元素的上层元素都是静态的，则返回body

    2.2.11 Element.offsetHeight，Element.offsetWidth

    offsetHeight

  5. 返回一个整数，表示元素的垂直高度

  6. 包括元素本身的高度，padding和border，以及水平滚动条的高度(如果存在)

  7. 只读属性，比Element.clientHeight多了边框的高度

    2.2.12 Element.offsetLeft，Element.offsetTop

    offsetLeft

  8. 返回当前元素左上角相对于Element.offsetParent节点的水平位移

    offsetTop

  9. 相对于offsetParent的垂直位移

    2.2.13 Element.style

    方法

    事件相关的方法

  10. 都继承自EventTarget接口

    其他方法

    Element.getBoundingClientRect()

  11. 该方法返回一个对象，具有如下属性：

  • x: 元素左上角相对视口的横坐标
  • y: 元素左上角相对视口的纵坐标
  • height: 元素高度
  • width: 元素宽度
  • left: 元素左上角相对视口的横坐标，和X属性相等
  • right: 元素右边界相对于视口的横坐标（等于x + width）
  • top: 元素左上角相对视口的纵坐标，相当于Y属性
  • bottom:元素底部相对于视口的纵坐标（等于y + height）
  1. 该方法的返回对象的所有属性，都把border作为元素的一部分；

  2. 即：width = 元素本身的width + padding + border; height也是同样道理

    Element.focus() 和Element.blur()

    focus

  3. 元素获取焦点

    blur

  4. 元素失去焦点