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 代码 |
| acceptCharset 服务器可接受的字符集。 |
| action 设置或返回表单的 action 属性。 |
| enctype 设置或返回表单用来编码内容的 MIME 类型。 |
| id 设置或返回表单的 id。 |
| length 返回表单中的元素数目。 |
| method 设置或返回将数据发送到服务器的 HTTP 方法。 |
| name 设置或返回表单的名称。 |
| target 设置或返回表单提交结果的 Frame 或 Window 名。 |
| |
方法 |
描述 |
reset() |
把表单中的元素重置为它们的默认值 |
submit() |
提交表单 |
事件句柄 |
描述 |
onreset |
在重置表单元素之前调用 |
onsubmit |
在提交表单之前调用 |
- 直接在form表单中设置提交按钮或button
- 使用HTML5方法,在表单外面也可使用,类似label
- 使用JavaScript中的submit()方法
Image对象
Image对象的属性
| 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对象的属性
| 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() |
不再派发事件。 |
方法 |
描述 |
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对象集合
| 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 |
设置段落必须留到页面顶部的最小行数 |
属性 |
描述 |
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() |
在一行中的指定位置插入一个空的 | 元素。 |
学无止境,谦卑而行.
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 用 C# 插值字符串处理器写一个 sscanf
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!