DOM 对象所有属性方法介绍,看这一篇就够了!

1. Document 对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。

集合

集合描述
all[]提供对文档中所有 HTML 元素的访问。
anchors[]返回对文档中所有 Anchor 对象的引用。
applets返回对文档中所有 Applet 对象的引用。
forms[]返回对文档中所有 Form 对象引用。
images[]返回对文档中所有 Image 对象引用。
links[]返回对文档中所有 Area 和 Link 对象引用。

属性

属性描述
body提供对 元素的直接访问。
对于定义了框架集的文档,该属性引用最外层的 。
cookie设置或返回与当前文档有关的所有 cookie。
domain返回当前文档的域名。
lastModified返回文档被最后修改的日期和时间。
referrer返回载入当前文档的文档的 URL。
title返回当前文档的标题。
URL返回当前文档的 URL。

方法

方法描述
close()关闭用 document.open() 方法打开的输出流,并显示选定的数据。
getElementById()返回对拥有指定 id 的第一个对象的引用。
getElementsByName()返回带有指定名称的对象集合。
getElementsByTagName()返回带有指定标签名的对象集合。
open()打开一个流,以收集来自任何 document.write() 或 document.writeln() 方法的输出。
write()向文档写 HTML 表达式 或 JavaScript 代码。
writeln()等同于 write() 方法,不同的是在每个表达式之后写一个换行符。

Document 对象描述

HTMLDocument 接口对 DOM Document 接口进行了扩展,定义 HTML 专用的属性和方法。

很多属性和方法都是 HTMLCollection 对象(实际上是可以用数组或名称索引的只读数组),其中保存了对锚、表单、链接以及其他可脚本元素的引用。

这些集合属性都源自于 0 级 DOM。它们已经被 Document.getElementsByTagName() 所取代,但是仍然常常使用,因为他们很方便。

write() 方法值得注意,在文档载入和解析的时候,它允许一个脚本向文档中插入动态生成的内容。

注意,在 1 级 DOM 中,HTMLDocument 定义了一个名为 getElementById() 的非常有用的方法。在 2 级 DOM 中,该方法已经被转移到了 Document 接口,它现在由 HTMLDocument 继承而不是由它定义了。

2. Element 对象

在 HTML DOM 中,Element 对象表示 HTML 元素。

Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。

NodeList 对象表示节点列表,比如 HTML 元素的子节点集合。

元素也可以拥有属性。属性是属性节点(参见第3节,Attribute 对象
)。

属性和方法

下面的属性和方法可用于所有 HTML 元素上:

属性 / 方法描述
element.accessKey设置或返回元素的快捷键。
element.appendChild()向元素添加新的子节点,作为最后一个子节点。
element.attributes返回元素属性的 NamedNodeMap。
element.childNodes返回元素子节点的 NodeList。
element.className设置或返回元素的 class 属性。
element.clientHeight返回元素的可见高度。
element.clientWidth返回元素的可见宽度。
element.cloneNode()克隆元素。
element.compareDocumentPosition()比较两个元素的文档位置。
element.contentEditable设置或返回元素的文本方向。
element.dir设置或返回元素的内容是否可编辑。
element.firstChild返回元素的首个子。
element.getAttribute()返回元素节点的指定属性值。
element.getAttributeNode()返回指定的属性节点。
element.getElementsByTagName()返回拥有指定标签名的所有子元素的集合。
element.getFeature()返回实现了指定特性的 API 的某个对象。
element.getUserData()返回关联元素上键的对象。
element.hasAttribute()如果元素拥有指定属性,则返回true,否则返回 false。
element.hasAttributes()如果元素拥有属性,则返回 true,否则返回 false。
element.hasChildNodes()如果元素拥有子节点,则返回 true,否则 false。
element.id设置或返回元素的 id。
element.innerHTML设置或返回元素的内容。
element.insertBefore()在指定的已有的子节点之前插入新节点。
element.isContentEditable设置或返回元素的内容。
element.isDefaultNamespace()如果指定的 namespaceURI 是默认的,则返回 true,否则返回 false。
element.isEqualNode()检查两个元素是否相等。
element.isSameNode()检查两个元素是否是相同的节点。
element.isSupported()如果元素支持指定特性,则返回 true。
element.lang设置或返回元素的语言代码。
element.lastChild返回元素的最后一个子元素。
element.namespaceURI返回元素的 namespace URI。
element.nextSibling返回位于相同节点树层级的下一个节点。
element.nodeName返回元素的名称。
element.nodeType返回元素的节点类型。
element.nodeValue设置或返回元素值。
element.normalize()合并元素中相邻的文本节点,并移除空的文本节点。
element.offsetHeight返回元素的高度。
element.offsetWidth返回元素的宽度。
element.offsetLeft返回元素的水平偏移位置。
element.offsetParent返回元素的偏移容器。
element.offsetTop返回元素的垂直偏移位置。
element.ownerDocument返回元素的根元素(文档对象)。
element.parentNode返回元素的父节点。
element.previousSibling返回位于相同节点树层级的前一个元素。
element.removeAttribute()从元素中移除指定属性。
element.removeAttributeNode()移除指定的属性节点,并返回被移除的节点。
element.removeChild()从元素中移除子节点。
element.replaceChild()替换元素中的子节点。
element.scrollHeight返回元素的整体高度。
element.scrollLeft返回元素左边缘与视图之间的距离。
element.scrollTop返回元素上边缘与视图之间的距离。
element.scrollWidth返回元素的整体宽度。
element.setAttribute()把指定属性设置或更改为指定值。
element.setAttributeNode()设置或更改指定属性节点。
element.setIdAttribute()
element.setIdAttributeNode()
element.setUserData()把对象关联到元素上的键。
element.style设置或返回元素的 style 属性。
element.tabIndex设置或返回元素的 tab 键控制次序。
element.tagName返回元素的标签名。
element.textContent设置或返回节点及其后代的文本内容。
element.title设置或返回元素的 title 属性。
element.toString()把元素转换为字符串。
nodelist.item()返回 NodeList 中位于指定下标的节点。
nodelist.length返回 NodeList 中的节点数。

3. Attribute 对象

在 HTML DOM 中,Attr 对象表示 HTML 属性。

HTML 属性始终属于 HTML 元素。

属性和方法

属性 / 方法描述
attr.isId如果属性是 id 类型,则返回 true,否则返回 false。
attr.name返回属性的名称。
attr.value设置或返回属性的值。
attr.specified如果已指定属性,则返回 true,否则返回 false。
nodemap.getNamedItem()从 NamedNodeMap 返回指定的属性节点。
nodemap.item()返回 NamedNodeMap 中位于指定下标的节点。
nodemap.length返回 NamedNodeMap 中的节点数。
nodemap.removeNamedItem()移除指定的属性节点。
nodemap.setNamedItem()设置指定的属性节点(通过名称)。

DOM 4 警告!

在 W3C DOM Core 中,Attr (attribute) 对象从 Node 对象继承所有属性和方法。

在 DOM 4 中,Attr 对象不再从 Node 继承。

为了保证未来的代码安全,您应该避免在属性对象上使用节点对象的属性和方法:

属性 / 方法避免的理由
attr.appendChild()属性没有子节点。
attr.attributes属性没有属性。
attr.baseURI使用 document.baseURI 代替。
attr.childNodes属性没有子节点。
attr.cloneNode()使用 attr.value 代替。
attr.firstChild属性没有子节点。
attr.hasAttributes()属性没有属性。
attr.hasChildNodes属性没有子节点。
attr.insertBefore()属性没有子节点。
attr.isEqualNode()没有意义。
attr.isSameNode()没有意义。
attr.isSupported()始终为 true。
attr.lastChild属性没有子节点。
attr.nextSibling属性没有同级节点。
attr.nodeName使用 attr.name 代替。
attr.nodeType始终为 2 (ATTRIBUTE_NODE)。
attr.nodeValue使用 attr.value 代替。
attr.normalize()属性无法被正常化。
attr.ownerDocument始终是您的 HTML 文档。
attr.ownerElement这是您用来访问该属性的 HTML 元素。
attr.parentNode这是您用来访问该属性的 HTML 元素。
attr.previousSibling属性没有同级节点。
attr.removeChild属性没有子节点。
attr.replaceChild属性没有子节点。
attr.textContent使用 attr.value 代替。

4. Event 对象(事件状态)

Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用,函数不会在事件发生前被执行!

事件句柄 (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” 键是否被按下。

标准 Event 属性

下面列出了 2 级 DOM 事件标准定义的属性。

属性描述
bubbles返回布尔值,指示事件是否是起泡事件类型。
cancelable返回布尔值,指示事件是否可拥可取消的默认动作。
currentTarget返回其事件监听器触发该事件的元素。
eventPhase返回事件传播的当前阶段。
target返回触发此事件的元素(事件的目标节点)。
timeStamp返回事件生成的日期和时间。
type返回当前 Event 对象表示的事件的名称。

标准 Event 方法

下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法:

方法描述
initEvent()初始化新创建的 Event 对象的属性。
preventDefault()通知浏览器不要执行与事件关联的默认动作。
stopPropagation()不再派发事件。
  • 4
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CODER-V

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值