【JavaScript】通过 getElementById 获取到的东西，到底都能干点啥

当使用 getElementById 方法获取页面上的元素之后，可以获得许多有用的属性和值，帮助你实现各种任务。但作为一个小白，不知道 getElementById 到底都有啥，好苦恼。

所以我在这里简单总结了 50 个常见的可用属性，方便大家更好地利用 JavaScript 操作页面元素！

• • 详细介绍版：
  • 精简版（快速查阅用法）：

详细介绍版：

1. id：你可以通过 element.id 来获取元素的 id 属性的值。
2. tagName：通过 element.tagName 可以获取元素的标签名，例如

   元素的标签名是 “DIV”。

3. innerHTML：使用 element.innerHTML 可以获取元素内部的 HTML 内容，包括文本和嵌套元素。
4. textContent：通过 element.textContent 可以获取元素内部的纯文本内容，不包括 HTML 标记。
5. className：通过 element.className 可以获取元素的 CSS 类名，用于样式设置和选择器匹配。
6. style：使用 element.style 可以访问和修改元素的 CSS 样式属性，例如 element.style.color 用于改变文本颜色。
7. attributes：通过 element.attributes 可以获取元素的所有属性列表，你可以进一步遍历和访问这些属性。
8. value (输入框)：你可以使用 element.value 来获取或设置输入框元素的值，例如文本框或密码框中的文本。
9. src (图像)：对于图像元素，你可以通过 element.src 获取图像的 URL。
10. href (链接)：对于链接元素，使用 element.href 可以获取链接的目标 URL。
11. alt (图像): 你可以通过 element.alt 获取图像元素的 alt 属性的值，这是图像的替代文本。
12. width (图像): 使用 element.width 可以获取图像元素的宽度，通常以像素为单位。
13. height (图像): 通过 element.height 可以获取图像元素的高度，通常以像素为单位。
14. checked (复选框): 如果你有一个复选框元素，你可以使用 element.checked 来检查或设置它是否被选中（true 为选中，false 为未选中）。
15. disabled (表单元素): 你可以使用 element.disabled 来检查或设置表单元素是否被禁用，例如文本框或按钮。
16. selectedIndex (下拉框): 如果你有一个下拉框元素，你可以通过 element.selectedIndex 获取当前选中选项的索引。
17. options (下拉框): 使用 element.options 可以获取下拉框元素的所有选项列表。
18. value (下拉框选项): 你可以通过 element.options[index].value 获取特定索引位置的下拉框选项的值。
19. innerHTML (下拉框选项): 使用 element.options[index].innerHTML 可以获取特定索引位置的下拉框选项的内部 HTML 内容。
20. selected (单选框): 如果你有一个单选框元素，你可以使用 element.checked 来检查或设置它是否被选中（true 为选中，false 为未选中）。
21. placeholder (输入框): 你可以通过 element.placeholder 获取输入框元素的占位符文本。
22. title: 通过 element.title 可以获取元素的标题属性，通常用于提供鼠标悬停时的额外信息。
23. max (输入框): 如果你有一个输入框元素，你可以使用 element.max 获取其最大值。
24. min (输入框): 使用 element.min 可以获取输入框元素的最小值。
25. step (输入框): 通过 element.step 可以获取输入框元素的步进值，通常用于数字输入。
26. form (表单元素): 你可以通过 element.form 获取表单元素所属的表单对象。
27. target (链接): 使用 element.target 可以获取链接元素的目标属性，通常用于指定链接在何处打开。
28. name: 通过 element.name 可以获取元素的名称属性，通常用于表单元素。
29. valueAsNumber (输入框): 如果你有一个输入框元素，你可以使用 element.valueAsNumber 获取输入框的值作为数字类型。
30. valueAsDate (输入框): 通过 element.valueAsDate 可以获取输入框的值作为日期对象。
31. charset (脚本): 你可以通过 element.charset 获取脚本元素的字符集（字符编码）。
32. srcdoc (iframe): 使用 element.srcdoc 可以获取 iframe 元素的内联文档内容。
33. cols (文本域): 如果你有一个文本域元素，你可以通过 element.cols 获取其列数。
34. rows (文本域): 通过 element.rows 可以获取文本域元素的行数。
35. defaultValue (输入框): 你可以使用 element.defaultValue 来获取输入框元素的默认值。
36. autofocus (表单元素): 使用 element.autofocus 可以检查或设置表单元素是否自动获取焦点。
37. hidden: 通过 element.hidden 可以检查或设置元素是否隐藏（true 为隐藏，false 为可见）。
38. role (无障碍属性): 你可以通过 element.getAttribute(“role”) 来获取元素的无障碍角色属性的值。
39. contentEditable (可编辑元素): 使用 element.contentEditable 可以检查或设置元素是否可编辑（“true” 为可编辑，“false” 为不可编辑）。
40. scrollWidth: 通过 element.scrollWidth 可以获取元素的内容的滚动宽度，包括不可见部分。
41. scrollHeight: 使用 element.scrollHeight 可以获取元素的内容的滚动高度，包括不可见部分。
42. offsetWidth: 通过 element.offsetWidth 可以获取元素的宽度，包括内边距、边框和滚动条。
43. offsetHeight: 使用 element.offsetHeight 可以获取元素的高度，包括内边距、边框和滚动条。
44. clientWidth: 通过 element.clientWidth 可以获取元素的可见宽度，不包括滚动条。
45. clientHeight: 使用 element.clientHeight 可以获取元素的可见高度，不包括滚动条。
46. offsetLeft: 通过 element.offsetLeft 可以获取元素相对于其 offsetParent 元素的左偏移。
47. offsetTop: 使用 element.offsetTop 可以获取元素相对于其 offsetParent 元素的上偏移。
48. offsetParent: 你可以通过 element.offsetParent 获取元素的 offsetParent 元素。
49. value (按钮): 如果你有一个按钮元素，你可以使用 element.value 来获取按钮的值。
50. name (按钮): 通过 element.name 可以获取按钮元素的名称属性，通常用于表单中的按钮。

精简版（快速查阅用法）：

1. id: element.id
2. tagName: element.tagName
3. innerHTML: element.innerHTML
4. textContent: element.textContent
5. className: element.className
6. style: element.style
7. attributes: element.attributes
8. value (输入框): element.value
9. src (图像): element.src
10. href (链接): element.href
11. alt (图像): element.alt
12. width (图像): element.width
13. height (图像): element.height
14. checked (复选框): element.checked
15. disabled (表单元素): element.disabled
16. selectedIndex (下拉框): element.selectedIndex
17. options (下拉框): element.options
18. value (下拉框选项): element.options[index].value
19. innerHTML (下拉框选项): element.options[index].innerHTML
20. selected (单选框): element.checked
21. placeholder (输入框): element.placeholder
22. title: element.title
23. max (输入框): element.max
24. min (输入框): element.min
25. step (输入框): element.step
26. form (表单元素): element.form
27. target (链接): element.target
28. name: element.name
29. valueAsNumber (输入框): element.valueAsNumber
30. valueAsDate (输入框): element.valueAsDate
31. charset (脚本): element.charset
32. srcdoc (iframe): element.srcdoc
33. cols (文本域): element.cols
34. rows (文本域): element.rows
35. defaultValue (输入框): element.defaultValue
36. autofocus (表单元素): element.autofocus
37. hidden: element.hidden
38. role (无障碍属性): element.getAttribute(“role”)
39. contentEditable (可编辑元素): element.contentEditable
40. scrollWidth: element.scrollWidth
41. scrollHeight: element.scrollHeight
42. offsetWidth: element.offsetWidth
43. offsetHeight: element.offsetHeight
44. clientWidth: element.clientWidth
45. clientHeight: element.clientHeight
46. offsetLeft: element.offsetLeft
47. offsetTop: element.offsetTop
48. offsetParent: element.offsetParent
49. value (按钮): element.value
50. name (按钮): element.name