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() |
在一行中的指定位置插入一个空的 | 元素。 |