javascript DOM API

最新推荐文章于 2024-04-11 19:58:23 发布

onlymark_YU

最新推荐文章于 2024-04-11 19:58:23 发布

阅读量159

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_35314280/article/details/105723091

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

属性

属性名	解释	使用范例
innerHTML	innerHTML 属性可用于获取或改变任何 HTML 元素，包括 <html> 和 <body>	element.innerHTML = new html content
attribute	改变 HTML 元素的属性值	element.attribute = new value
style.property	改变 HTML 元素的样式	element.style.property = new style
innerHTML	innerHTML 属性可用于获取或改变任何 HTML 元素，包括 <html> 和 <body>	element.innerHTML = new html content

方法

方法名	解释	使用范例
getElementById	使用 id 来`查找元素`	document.getElementById(“demo”)
getElementsByTagName	通过标签名来`查找元素`	document.getElementsByTagName(name)
getElementsByClassName	通过类名来`查找元素`	document.getElementsByClassName(name)
querySelectorAll	通过 CSS 选择器查找所有 HTML 元素	document.querySelectorAll(“p.intro”)
setAttribute	改变 HTML 元素的属性值	element.setAttribute(attribute, value)
createElement	创建 HTML 元素	document.createElement(element)
removeChild	删除 HTML 元素	document.removeChild(element)
appendChild	添加 HTML 元素	document.appendChild(element)
replaceChild	替换 HTML 元素	document.replaceChild(element)
addEventListener	为指定元素指定事件处理程序 `为元素附加事件处理程序而不会覆盖已有的事件处理程序`	element.addEventListener(“click”, displayDate)
removeEventListener	会删除已通过 addEventListener() 方法附加的事件处理程序	element.removeEventListener(“mousemove”, myFunction)

element.addEventListener(event, function, useCapture);
第一个参数是事件的类型（比如 "click" 或 "mousedown"）。
第二个参数是当事件发生时我们需要调用的函数。
第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。
默认值是 false，将使用冒泡传播，如果该值设置为 true，则事件使用捕获传播。

查找 HTML 对象

首个 HTML DOM Level 1 (1998)，定义了 11 个 HTML 对象、对象集合和属性。它们在 HTML5 中仍然有效。

后来，在 HTML DOM Level 3，加入了更多对象、集合和属性。

属性	描述	DOM
document.anchors	返回拥有 name 属性的所有 <a> 元素。	1
document.applets	返回所有 <applet> 元素（HTML5 不建议使用）	1
document.baseURI	返回文档的绝对基准 URI	3
document.body	返回 <body> 元素	1
document.cookie	返回文档的 cookie	1
document.doctype	返回文档的 doctype	3
document.documentElement	返回 <html> 元素	3
document.documentMode	返回浏览器使用的模式	3
document.documentURI	返回文档的 URI	3
document.domain	返回文档服务器的域名	1
document.domConfig	废弃。返回 DOM 配置	3
document.embeds	返回所有 <embed> 元素	3
document.forms	返回所有 <form> 元素	1
document.head	返回 <head> 元素	3
document.images	返回所有<img> 元素	1
document.implementation	返回 DOM 实现	3
document.inputEncoding	返回文档的编码（字符集）	3
document.lastModified	返回文档更新的日期和时间	3
document.links	返回拥有 href 属性的所有<area> 和\ <a> 元素	1
document.readyState	返回文档的（加载）状态	3
document.referrer	返回引用的 URI（链接文档）	1
document.scripts	返回所有 <script> 元素	3
document.strictErrorChecking		返回是否强制执行错误检查
document.title	返回\ <title> 元素	1
document.URL	返回文档的完整 URL	1

事件句柄　(Event Handlers)

HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 HTML 标签以定义事件的行为。

属性	此事件发生在何时…
onabort	图像的加载被中断。
onblur	元素失去焦点。
onchange	域的内容被改变。
onclick	当用户点击某个对象时调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄。
onerror	在加载文档或图像时发生错误。
onfocus	元素获得焦点。
onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按下并松开。
onkeyup	某个键盘按键被松开。
onload	一张页面或一幅图像完成加载。
onmousedown	鼠标按钮被按下。
onmousemove	鼠标被移动。
onmouseout	鼠标从某元素移开。
onmouseover	鼠标移到某元素之上。
onmouseup	鼠标按键被松开。
onreset	重置按钮被点击。
onresize	窗口或框架被重新调整大小。
onselect	文本被选中。
onsubmit	确认按钮被点击。
onunload	用户退出页面。

鼠标 / 键盘属性事件

属性	描述
altKey	返回当事件被触发时，“ALT” 是否被按下。
button	返回当事件被触发时，哪个鼠标按钮被点击。
clientX	返回当事件被触发时，鼠标指针的水平坐标。
clientY	返回当事件被触发时，鼠标指针的垂直坐标。
ctrlKey	返回当事件被触发时，“CTRL” 键是否被按下。
metaKey	返回当事件被触发时，“meta” 键是否被按下。
relatedTarget	返回与事件的目标节点相关的节点。
screenX	返回当某个事件被触发时，鼠标指针的水平坐标。
screenY	返回当某个事件被触发时，鼠标指针的垂直坐标。
shiftKey	返回当事件被触发时，“SHIFT” 键是否被按下。