JavaScript--DOM总结

DOM 文档对象模型

Document对象

Document对象集合
集合描述
all页面中所有标签,不去重,返回一个数组
forms返回对文档中所有 Form 对象的引用,返回一个数组
images返回对文档中所有 Image 对象的引用,返回一个数组
links返回对文档中所有 Area 和 Link 对象的引用
Document对象属性
属性描述
domain返回当前服务器域名
lastModified返回文档被最后修改的日期和时间
该值来自于 Last-Modified HTTP 头部, 它是由 Web 服务器发送的可选项
title当前文档的标题
URLURL 属性可返回当前文档的 URL
referrer上一跳地址来源
cookiecookie是之前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对象属性
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对象的属性
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()不再派发事件。

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

转载于:https://www.cnblogs.com/wangyang0210/p/9586167.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值