当使用 getElementById 方法获取页面上的元素之后,可以获得许多有用的属性和值,帮助你实现各种任务。但作为一个小白,不知道 getElementById 到底都有啥,好苦恼。
所以我在这里简单总结了 50 个常见的可用属性,方便大家更好地利用 JavaScript 操作页面元素!
详细介绍版:
- id:你可以通过 element.id 来获取元素的 id 属性的值。
- tagName:通过 element.tagName 可以获取元素的标签名,例如
元素的标签名是 “DIV”。
- innerHTML:使用 element.innerHTML 可以获取元素内部的 HTML 内容,包括文本和嵌套元素。
- textContent:通过 element.textContent 可以获取元素内部的纯文本内容,不包括 HTML 标记。
- className:通过 element.className 可以获取元素的 CSS 类名,用于样式设置和选择器匹配。
- style:使用 element.style 可以访问和修改元素的 CSS 样式属性,例如 element.style.color 用于改变文本颜色。
- attributes:通过 element.attributes 可以获取元素的所有属性列表,你可以进一步遍历和访问这些属性。
- value (输入框):你可以使用 element.value 来获取或设置输入框元素的值,例如文本框或密码框中的文本。
- src (图像):对于图像元素,你可以通过 element.src 获取图像的 URL。
- href (链接):对于链接元素,使用 element.href 可以获取链接的目标 URL。
- alt (图像): 你可以通过 element.alt 获取图像元素的 alt 属性的值,这是图像的替代文本。
- width (图像): 使用 element.width 可以获取图像元素的宽度,通常以像素为单位。
- height (图像): 通过 element.height 可以获取图像元素的高度,通常以像素为单位。
- checked (复选框): 如果你有一个复选框元素,你可以使用 element.checked 来检查或设置它是否被选中(true 为选中,false 为未选中)。
- disabled (表单元素): 你可以使用 element.disabled 来检查或设置表单元素是否被禁用,例如文本框或按钮。
- selectedIndex (下拉框): 如果你有一个下拉框元素,你可以通过 element.selectedIndex 获取当前选中选项的索引。
- options (下拉框): 使用 element.options 可以获取下拉框元素的所有选项列表。
- value (下拉框选项): 你可以通过 element.options[index].value 获取特定索引位置的下拉框选项的值。
- innerHTML (下拉框选项): 使用 element.options[index].innerHTML 可以获取特定索引位置的下拉框选项的内部 HTML 内容。
- selected (单选框): 如果你有一个单选框元素,你可以使用 element.checked 来检查或设置它是否被选中(true 为选中,false 为未选中)。
- placeholder (输入框): 你可以通过 element.placeholder 获取输入框元素的占位符文本。
- title: 通过 element.title 可以获取元素的标题属性,通常用于提供鼠标悬停时的额外信息。
- max (输入框): 如果你有一个输入框元素,你可以使用 element.max 获取其最大值。
- min (输入框): 使用 element.min 可以获取输入框元素的最小值。
- step (输入框): 通过 element.step 可以获取输入框元素的步进值,通常用于数字输入。
- form (表单元素): 你可以通过 element.form 获取表单元素所属的表单对象。
- target (链接): 使用 element.target 可以获取链接元素的目标属性,通常用于指定链接在何处打开。
- name: 通过 element.name 可以获取元素的名称属性,通常用于表单元素。
- valueAsNumber (输入框): 如果你有一个输入框元素,你可以使用 element.valueAsNumber 获取输入框的值作为数字类型。
- valueAsDate (输入框): 通过 element.valueAsDate 可以获取输入框的值作为日期对象。
- charset (脚本): 你可以通过 element.charset 获取脚本元素的字符集(字符编码)。
- srcdoc (iframe): 使用 element.srcdoc 可以获取 iframe 元素的内联文档内容。
- cols (文本域): 如果你有一个文本域元素,你可以通过 element.cols 获取其列数。
- rows (文本域): 通过 element.rows 可以获取文本域元素的行数。
- defaultValue (输入框): 你可以使用 element.defaultValue 来获取输入框元素的默认值。
- autofocus (表单元素): 使用 element.autofocus 可以检查或设置表单元素是否自动获取焦点。
- hidden: 通过 element.hidden 可以检查或设置元素是否隐藏(true 为隐藏,false 为可见)。
- role (无障碍属性): 你可以通过 element.getAttribute(“role”) 来获取元素的无障碍角色属性的值。
- contentEditable (可编辑元素): 使用 element.contentEditable 可以检查或设置元素是否可编辑(“true” 为可编辑,“false” 为不可编辑)。
- scrollWidth: 通过 element.scrollWidth 可以获取元素的内容的滚动宽度,包括不可见部分。
- scrollHeight: 使用 element.scrollHeight 可以获取元素的内容的滚动高度,包括不可见部分。
- offsetWidth: 通过 element.offsetWidth 可以获取元素的宽度,包括内边距、边框和滚动条。
- offsetHeight: 使用 element.offsetHeight 可以获取元素的高度,包括内边距、边框和滚动条。
- clientWidth: 通过 element.clientWidth 可以获取元素的可见宽度,不包括滚动条。
- clientHeight: 使用 element.clientHeight 可以获取元素的可见高度,不包括滚动条。
- offsetLeft: 通过 element.offsetLeft 可以获取元素相对于其 offsetParent 元素的左偏移。
- offsetTop: 使用 element.offsetTop 可以获取元素相对于其 offsetParent 元素的上偏移。
- offsetParent: 你可以通过 element.offsetParent 获取元素的 offsetParent 元素。
- value (按钮): 如果你有一个按钮元素,你可以使用 element.value 来获取按钮的值。
- name (按钮): 通过 element.name 可以获取按钮元素的名称属性,通常用于表单中的按钮。
精简版(快速查阅用法):
- id: element.id
- tagName: element.tagName
- innerHTML: element.innerHTML
- textContent: element.textContent
- className: element.className
- style: element.style
- attributes: element.attributes
- value (输入框): element.value
- src (图像): element.src
- href (链接): element.href
- alt (图像): element.alt
- width (图像): element.width
- height (图像): element.height
- checked (复选框): element.checked
- disabled (表单元素): element.disabled
- selectedIndex (下拉框): element.selectedIndex
- options (下拉框): element.options
- value (下拉框选项): element.options[index].value
- innerHTML (下拉框选项): element.options[index].innerHTML
- selected (单选框): element.checked
- placeholder (输入框): element.placeholder
- title: element.title
- max (输入框): element.max
- min (输入框): element.min
- step (输入框): element.step
- form (表单元素): element.form
- target (链接): element.target
- name: element.name
- valueAsNumber (输入框): element.valueAsNumber
- valueAsDate (输入框): element.valueAsDate
- charset (脚本): element.charset
- srcdoc (iframe): element.srcdoc
- cols (文本域): element.cols
- rows (文本域): element.rows
- defaultValue (输入框): element.defaultValue
- autofocus (表单元素): element.autofocus
- hidden: element.hidden
- role (无障碍属性): element.getAttribute(“role”)
- contentEditable (可编辑元素): element.contentEditable
- scrollWidth: element.scrollWidth
- scrollHeight: element.scrollHeight
- offsetWidth: element.offsetWidth
- offsetHeight: element.offsetHeight
- clientWidth: element.clientWidth
- clientHeight: element.clientHeight
- offsetLeft: element.offsetLeft
- offsetTop: element.offsetTop
- offsetParent: element.offsetParent
- value (按钮): element.value
- name (按钮): element.name
版权声明:本文为博主作者:冷酷女人8521原创文章,版权归属原作者,如果侵权,请联系我们删除!
原文链接:https://blog.csdn.net/weixin_45968070/article/details/134196489