JavaScript--DOM总结

2024-08-16 09:29:43 浏览数 (1)

DOM 文档对象模型

Document对象

Document对象集合

集合

描述

all

页面中所有标签,不去重,返回一个数组

forms

返回对文档中所有 Form 对象的引用,返回一个数组

images

返回对文档中所有 Image 对象的引用,返回一个数组

links

返回对文档中所有 Area 和 Link 对象的引用

Document对象属性

属性

描述

domain

返回当前服务器域名

lastModified

返回文档被最后修改的日期和时间该值来自于 Last-Modified HTTP 头部, 它是由 Web 服务器发送的可选项

title

当前文档的标题

URL

URL 属性可返回当前文档的 URL

referrer

上一跳地址来源

cookie

cookie是之前php脚本通过setcookie()设置到客户端浏览器的创建/修改cookie document.cookie = 'sex = "女 " '; 设置过期时间 1.new时间对象var oDate = new Date(); 2.设置过期时间oDate.setTime(oDate.getTime() 60*601000); 3.转为UTC时间document.cookie = 'username=xx; path=/; expires=' d.toUTCString(); 删除cookie 将时间设置为过期时间

Document的对象方法

方法

描述

getElementById()

返回对拥有指定 ID 的第一个对象的引用

getElementsByName()

返回带有指定名称的对象的集合

getElementsByTagName()

可返回带有指定标签名的对象的集合

write()

向文档写入 HTML 表达式或 JavaScript 代码

Form对象

Form对象属性
代码语言：javascript复制
acceptCharset     服务器可接受的字符集。 
action                  设置或返回表单的 action 属性。 
enctype               设置或返回表单用来编码内容的 MIME 类型。 
id                         设置或返回表单的 id。 
length                  返回表单中的元素数目。 
method                设置或返回将数据发送到服务器的 HTTP 方法。 
name                  设置或返回表单的名称。 
target                 设置或返回表单提交结果的 Frame 或 Window 名。
Form的对象方法

方法

描述

reset()

把表单中的元素重置为它们的默认值

submit()

提交表单

Form对象事件句柄

事件句柄

描述

onreset

在重置表单元素之前调用

onsubmit

在提交表单之前调用

Form表单提交的三种方式
  1. 直接在form表单中设置提交按钮或button
  2. 使用HTML5方法,在表单外面也可使用,类似label
  3. 使用JavaScript中的submit()方法

Image对象

Image对象的属性
代码语言：javascript复制
align               设置或返回与内联内容的对齐方式。 
alt                   设置或返回无法显示图像时的替代文本。 
border            设置或返回图像周围的边框。 
complete        返回浏览器是否已完成对图像的加载。 
height            设置或返回图像的高度。 
hspace          设置或返回图像左侧和右侧的空白。 
id                  设置或返回图像的 id。 
isMap           返回图像是否是服务器端的图像映射。 
longDesc     设置或返回指向包含图像描述的文档的 URL。 
lowsrc         设置或返回指向图像的低分辨率版本的 URL。 
name          设置或返回图像的名称。 
src             设置或返回图像的 URL。 
useMap     设置或返回客户端图像映射的 usemap 属性的值。 
vspace     设置或返回图像的顶部和底部的空白。 
width      设置或返回图像的宽度。
Image对象的事件句柄

事件句柄

描述

onerror

在加载图像的过程中发生错误时调用的事件句柄

onabort

当用户放弃图像的加载时调用的事件句柄

onload

当图像加载完成时调用的事件句柄

Anchor 对象

Anchor对象的属性
代码语言：javascript复制
accessKey        设置或返回访问一个链接的快捷键。 
charset             设置或返回被链接资源的字符集。 
coords             设置或返回逗号分隔列表，包含了图像映射中链接的坐标。 
href                 设置或返回被链接资源的 URL。 
hreflang	        设置或返回被链接资源的语言代码。 
id                     设置或返回一个链接的 id。 
innerHTML     设置或返回一个链接的内容。 
name             设置或返回一个链接的名称。 
rel                 设置或返回当前文档与目标 URL 之间的关系。 
rev                 设置或返回目标 URL 与之间当前文档的关系。 
shape             设置或返回图像映射中某个链接的形状。 
tabIndex         设置或返回某个链接的 Tab 键控制次序。 
target             设置或返回在何处打开链接。 
type              设置或返回被链接资源的 MIME 类型。
Anchor对象的方法

方法

描述

focus

给链接应用焦点

blur

把焦点从链接上移开

Base对象

Base对象的属性

属性

描述

href

设置或返回针对页面中所有链接的基准 URL

id

设置或返回 元素的 id

target

设置或返回针对页面中所有链接的默认打开位置的窗口

Canvs对象

CanvasRenderingContext2D 对象的方法

方法

描述

arc()

用一个中心点和半径，为一个画布的当前子路径添加一条弧线。

arcTo()

使用目标点和一个半径，为当前的子路径添加一条弧线。

beginPath()

开始一个画布中的一条新路径（或者子路径的一个集合）。

bezierCurveTo()

为当前的子路径添加一个三次贝塞尔曲线。

clearRect()

在一个画布的一个矩形区域中清除掉像素。

clip()

使用当前路径作为连续绘制操作的剪切区域。

closePath()

如果当前子路径是打开的，就关闭它。

createLinearGradient()

返回代表线性颜色渐变的一个 CanvasGradient 对象。

createPattern()

返回代表贴图图像的一个 CanvasPattern 对象。

createRadialGradient()

返回代表放射颜色渐变的一个 CanvasGradient 对象。

drawImage()

绘制一幅图像。

fill()

使用指定颜色、渐变或模式来绘制或填充当前路径的内部。

fillRect()

绘制或填充一个矩形。

lineTo()

为当前的子路径添加一条直线线段。

moveTo()

设置当前位置并开始一条新的子路径。

quadraticCurveTo()

为当前路径添加一条贝塞尔曲线。

rect()

为当前路径添加一条矩形子路径。

restore()

为画布重置为最近保存的图像状态。

rotate()

旋转画布。

save()

保存 CanvasRenderingContext2D 对象的属性、剪切区域和变换矩阵。

scale()

标注画布的用户坐标系统。

stroke()

沿着当前路径绘制或画一条直线。

strokeRect()

绘制（但不填充）一个矩形。

translate()

转换画布的用户坐标系统。

HTML5canvs操作
颜色、样式和阴影

属性

描述

fillStyle

设置或返回用于填充绘画的颜色、渐变或模式

strokeStyle

设置或返回用于笔触的颜色、渐变或模式

shadowColor

设置或返回用于阴影的颜色

shadowBlur

设置或返回用于阴影的模糊级别

shadowOffsetX

设置或返回阴影距形状的水平距离

shadowOffsetY

设置或返回阴影距形状的垂直距离

方法

描述

createLinearGradient()

创建线性渐变（用在画布内容上）

createPattern()

在指定的方向上重复指定的元素

createRadialGradient()

创建放射状/环形的渐变（用在画布内容上）

addColorStop()

规定渐变对象中的颜色和停止位置

线条样式

属性

描述

lineCap

设置或返回线条的结束端点样式

lineJoin

设置或返回两条线相交时，所创建的拐角类型

lineWidth

设置或返回当前的线条宽度

miterLimit

设置或返回最大斜接长度

矩形

方法

描述

rect()

创建矩形

fillRect()

绘制“被填充”的矩形

strokeRect()

绘制矩形（无填充）

clearRect()

在给定的矩形内清除指定的像素

路径

方法

描述

fill()

填充当前绘图（路径）

stroke()

绘制已定义的路径

beginPath()

起始一条路径，或重置当前路径

moveTo()

把路径移动到画布中的指定点，不创建线条

closePath()

创建从当前点回到起始点的路径

lineTo()

添加一个新点，然后在画布中创建从该点到最后指定点的线条

clip()

从原始画布剪切任意形状和尺寸的区域

quadraticCurveTo()

创建二次贝塞尔曲线

bezierCurveTo()

创建三次方贝塞尔曲线

arc()

创建弧/曲线（用于创建圆形或部分圆）

arcTo()

创建两切线之间的弧/曲线

isPointInPath()

如果指定的点位于当前路径中，则返回 true，否则返回 false

转换

方法

描述

scale()

缩放当前绘图至更大或更小

rotate()

旋转当前绘图

translate()

重新映射画布上的 (0,0) 位置

transform()

替换绘图的当前转换矩阵

setTransform()

将当前转换重置为单位矩阵。然后运行 transform()

文本

属性

描述

font

设置或返回文本内容的当前字体属性

textAlign

设置或返回文本内容的当前对齐方式

textBaseline

设置或返回在绘制文本时使用的当前文本基线

方法

描述

fillText()

在画布上绘制“被填充的”文本

strokeText()

在画布上绘制文本（无填充）

measureText()

返回包含指定文本宽度的对象

图像绘制

方法

描述

drawImage()

向画布上绘制图像、画布或视频

像素操作

属性

描述

width

返回 ImageData 对象的宽度

height

返回 ImageData 对象的高度

data

返回一个对象，其包含指定的 ImageData 对象的图像数据

方法

描述

createImageData()

创建新的、空白的 ImageData 对象

getImageData()

返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据

putImageData()

把图像数据（从指定的 ImageData 对象）放回画布上

合成

属性

描述

globalAlpha

设置或返回绘图的当前 alpha 或透明值

globalCompositeOperation

设置或返回新图像如何绘制到已有的图像上

其他

方法

描述

save()

保存当前环境的状态

restore()

返回之前保存过的路径状态和属性

createEvent()

getContext()

toDataURL()

Event对象

事件句柄

属性

此事件发生在何时...

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" 键是否被按下。

IE 属性

除了上面的鼠标/事件属性，IE 浏览器还支持下面的属性：

属性

描述

cancelBubble

如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。

fromElement

对于 mouseover 和 mouseout 事件，fromElement 引用移出鼠标的元素。

keyCode

对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。

offsetX,offsetY

发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。

returnValue

如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle，可以取消发生事件的源元素的默认动作。

srcElement

对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。

toElement

对于 mouseover 和 mouseout 事件，该属性引用移入鼠标的元素。

x,y

事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素。

标准 Event 属性

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

属性

描述

bubbles

返回布尔值，指示事件是否是起泡事件类型。

cancelable

返回布尔值，指示事件是否可拥可取消的默认动作。

currentTarget

返回其事件监听器触发该事件的元素。

eventPhase

返回事件传播的当前阶段。

target

返回触发此事件的元素（事件的目标节点）。

timeStamp

返回事件生成的日期和时间。

type

返回当前 Event 对象表示的事件的名称。

标准 Event 方法

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

方法

描述

initEvent()

初始化新创建的 Event 对象的属性。

preventDefault()

通知浏览器不要执行与事件关联的默认动作。

stopPropagation()

不再派发事件。

Input对象

Input对象方法

方法

描述

blur()

把焦点从表单上移开

click()

模拟一次鼠标单击

focus()

表单赋予焦点

select()

全选var oC = document.getElementById('copy');oC.onclick = function() {if (window.clipboardData) {// 复制类型,复制的值clipboardData.setData('text',oT.value);alert('已复制到剪切板');}else{oT.select();alert('请使用ctrl c复制');}}

select对象

select对象集合
代码语言：javascript复制
options
如果把 options.length 属性设置为 0,Select 对象中所有选项都会被清除。 
如果 options.length 属性的值比当前值小，出现在数组尾部的元素就会被丢弃。 
如果把 options[] 数组中的一个元素设置为 null，那么选项就会从 Select 对象中删除。 
可以通过构造函数 Option() 来创建一个新的 option 对象（需要设置 options.length 属性）。
select对象方法

方法

对象

add()

向下拉列表添加一个选项

blur()

从下拉列表移开焦点

focus()

在下拉列表上设置焦点

remove()

从下拉列表中删除一个选项

select对象事件句柄

事件句柄

描述

onchange

当改变选择时调用的事件句柄

style对象

Background 属性

属性

描述

background

在一行中设置所有的背景属性

backgroundAttachment

设置背景图像是否固定或随页面滚动

backgroundColor

设置元素的背景颜色

backgroundImage

设置元素的背景图像

backgroundPosition

设置背景图像的起始位置

backgroundPositionX

设置backgroundPosition属性的X坐标

backgroundPositionY

设置backgroundPosition属性的Y坐标

backgroundRepeat

设置是否及如何重复背景图像

Border 和 Margin 属性

属性

描述

border

在一行设置四个边框的所有属性

borderBottom

在一行设置底边框的所有属性

borderBottomColor

设置底边框的颜色

borderBottomStyle

设置底边框的样式

borderBottomWidth

设置底边框的宽度

borderColor

设置所有四个边框的颜色 (可设置四种颜色)

borderLeft

在一行设置左边框的所有属性

borderLeftColor

设置左边框的颜色

borderLeftStyle

设置左边框的样式

borderLeftWidth

设置左边框的宽度

borderRight

在一行设置右边框的所有属性

borderRightColor

设置右边框的颜色

borderRightStyle

设置右边框的样式

borderRightWidth

设置右边框的宽度

borderStyle

设置所有四个边框的样式 (可设置四种样式)

borderTop

在一行设置顶边框的所有属性

borderTopColor

设置顶边框的颜色

borderTopStyle

设置顶边框的样式

borderTopWidth

设置顶边框的宽度

borderWidth

设置所有四条边框的宽度 (可设置四种宽度)

margin

设置元素的边距 (可设置四个值)

marginBottom

设置元素的底边距

marginLeft

设置元素的左边距

marginRight

设置元素的右边据

marginTop

设置元素的顶边距

outline

在一行设置所有的outline属性

outlineColor

设置围绕元素的轮廓颜色

outlineStyle

设置围绕元素的轮廓样式

outlineWidth

设置围绕元素的轮廓宽度

padding

设置元素的填充 (可设置四个值)

paddingBottom

设置元素的下填充

paddingLeft

设置元素的左填充

paddingRight

设置元素的右填充

paddingTop

设置元素的顶填充

Layout 属性

属性

描述

clear

设置在元素的哪边不允许其他的浮动元素

clip

设置元素的形状

content

设置元信息

counterIncrement

设置其后是正数的计数器名称的列表。其中整数指示每当元素出现时计数器的增量。默认是1。

counterReset

设置其后是正数的计数器名称的列表。其中整数指示每当元素出现时计数器被设置的值。默认是0。

cssFloat

设置图像或文本将出现（浮动）在另一元素中的何处。

cursor

设置显示的指针类型

direction

设置元素的文本方向

display

设置元素如何被显示

height

设置元素的高度

markerOffset

设置marker box的principal box距离其最近的边框边缘的距离

marks

设置是否cross marks或crop marks应仅仅被呈现于page box边缘之外

maxHeight

设置元素的最大高度

maxWidth

设置元素的最大宽度

minHeight

设置元素的最小高度

minWidth

设置元素的最小宽度

overflow

规定如何处理不适合元素盒的内容

verticalAlign

设置对元素中的内容进行垂直排列

visibility

设置元素是否可见

width

设置元素的宽度

List 属性

属性

描述

listStyle

在一行设置列表的所有属性

listStyleImage

把图像设置为列表项标记

listStylePosition

改变列表项标记的位置

listStyleType

设置列表项标记的类型

Positioning 属性

属性

描述

bottom

设置元素的底边缘距离父元素底边缘的之上或之下的距离

left

置元素的左边缘距离父元素左边缘的左边或右边的距离

position

把元素放置在static, relative, absolute 或 fixed 的位置

right

置元素的右边缘距离父元素右边缘的左边或右边的距离

top

设置元素的顶边缘距离父元素顶边缘的之上或之下的距离

zIndex

设置元素的堆叠次序

Printing 属性

属性

描述

orphans

设置段落留到页面底部的最小行数

page

设置显示某元素时使用的页面类型

pageBreakAfter

设置某元素之后的分页行为

pageBreakBefore

设置某元素之前的分页行为

pageBreakInside

设置某元素内部的分页行为

size

设置页面的方向和尺寸

widows

设置段落必须留到页面顶部的最小行数

Scrollbar 属性 (IE-only)

属性

描述

scrollbar3dLightColor

设置箭头和滚动条左侧和顶边的颜色

scrollbarArrowColor

设置滚动条上的箭头颜色

scrollbarBaseColor

设置滚动条的底色

scrollbarDarkShadowColor

设置箭头和滚动条右侧和底边的颜色

scrollbarFaceColor

设置滚动条的表色

scrollbarHighlightColor

设置箭头和滚动条左侧和顶边的颜色，以及滚动条的背景

scrollbarShadowColor

设置箭头和滚动条右侧和底边的颜色

scrollbarTrackColor

设置滚动条的背景色

Table 属性

属性

描述

borderCollapse

设置表格边框是否合并为单边框，或者像在标准的HTML中那样分离。

borderSpacing

设置分隔单元格边框的距离

captionSide

设置表格标题的位置

emptyCells

设置是否显示表格中的空单元格

tableLayout

设置用来显示表格单元格、行以及列的算法

Text 属性

属性

描述

color

设置文本的颜色

font

在一行设置所有的字体属性

fontFamily

设置元素的字体系列。

fontSize

设置元素的字体大小。

fontSizeAdjust

设置/调整文本的尺寸

fontStretch

设置如何紧缩或伸展字体

fontStyle

设置元素的字体样式

fontVariant

用小型大写字母字体来显示文本

fontWeight

设置字体的粗细

letterSpacing

设置字符间距

lineHeight

设置行间距

quotes

设置在文本中使用哪种引号

textAlign

排列文本

textDecoration

设置文本的修饰

textIndent

缩紧首行的文本

textShadow

设置文本的阴影效果

textTransform

对文本设置大写效果

unicodeBidi

whiteSpace

设置如何设置文本中的折行和空白符

wordSpacing

设置文本中的词间距

Table对象

Table 对象集合

集合

描述

cells

回包含表格中所有单元格的一个数组。

rows

返回包含表格中所有行的一个数组。可通过length获取到当前表格的数量

tBodies

返回包含表格中所有 tbody 的一个数组。

Table 对象方法

方法

描述

createCaption()

为表格创建一个 caption 元素。

createTFoot()

在表格中创建一个空的 tFoot 元素。

createTHead()

在表格中创建一个空的 tHead 元素。

deleteCaption()

从表格删除 caption 元素以及其内容。

deleteRow()

从表格删除一行。

deleteTFoot()

从表格删除 tFoot 元素及其内容。

deleteTHead()

从表格删除 tHead 元素及其内容。

insertRow()

在表格中插入一个新行。

TableRow对象

TableRow 对象集合

集合

描述

cells[]

返回包含行中所有单元格的一个数组。

TableRow 对象方法

方法

描述

deleteCell()

删除行中的指定的单元格。

insertCell()

在一行中的指定位置插入一个空的

元素。

javascript dom 表格 对象 事件

0 人点赞