JavaScript/DHTML 常用操作速查
以下整理了网页开发中常用的 JavaScript/DHTML 操作语法，涵盖事件、元素操作、窗体控制、样式处理等核心场景：
一、事件相关
| 语法 | 说明 |
|---|
event.srcElement.tagName | 获取事件源对象的标签名 |
event.srcElement.type | 获取事件源对象的类型 |
event.srcElement.setCapture() | 捕获事件源的鼠标事件 |
event.srcElement.releaseCapture() | 释放事件源的鼠标捕获 |
event.keyCode | 获取按键编码（如回车=13、Tab=9） |
event.shiftKey/event.altKey/event.ctrlKey | 判断Shift/Alt/Ctrl键是否按下（布尔值） |
event.returnValue | 设置事件返回值（false可阻止默认行为） |
event.x/event.y | 获取鼠标在事件源中的坐标 |
document.captureEvents(Event.KEYDOWN) | 绑定全局键盘按下事件 |
document.onmousedown=scrollwindow | 绑定窗体鼠标按下事件（scrollwindow为自定义函数） |
document.oncontextmenu = () => false | 禁止右键菜单 |
obj.detachEvent('onclick', a) | 解绑对象的onclick事件（a为事件处理函数） |
二、元素操作
| 语法 | 说明 |
|---|
document.activeElement | 获取窗体当前活动元素 |
document.all("txt").focus() | 让id为txt的元素获得焦点 |
document.all("txt").select() | 选中id为txt的输入框内容 |
document.createElement("SPAN") | 创建SPAN元素 |
document.elementFromPoint(event.x,event.y) | 根据鼠标坐标获取元素 |
document.getElementsByName("r1") | 根据name获取元素集合 |
document.getElementById(id) | 根据id获取单个元素 |
document.images[索引] | 获取窗体中的图片元素 |
document.窗体.elements[索引] | 获取窗体中的表单元素 |
obj.parentElement | 获取元素的父元素（DHTML） |
obj.parentNode | 获取元素的父节点（DOM标准） |
TableID.moveRow(2,1) | 交换表格的行（参数：源行索引、目标行索引） |
obj.scrollIntoView(true) | 让元素滚动到可视区域（true=对齐顶部） |
obj.contenteditable=true | 让元素可编辑 |
document.selection.createRange().duplicate().text | 获取选中的文本内容 |
三、窗体/浏览器控制
| 语法 | 说明 |
|---|
document.execCommand | 执行窗体命令（如复制、粘贴） |
document.cookie | 操作窗体Cookie（读取/设置） |
navigator.plugins | 获取浏览器插件数目 |
timer=setInterval('scrollwindow()',delay) | 设置定时器（delay为毫秒） |
clearInterval(timer) | 清除定时器 |
location.search() | 获取网页URL的查询参数（?后的内容） |
document.referrer | 获取上一网页的URL（JS版） |
request.servervariables("HTTP_REFERER") | 获取上一网页的URL（ASP版） |
CollectGarbage() | 释放浏览器内存 |
window.open("aa.htm", "meizz", "fullscreen=7") | 打开最大化且无关闭按钮的窗口（IE专属） |
win.closed | 判断窗口是否已关闭 |
window.screen.height/width | 获取屏幕分辨率（高/宽） |
window.screen.availHeight/availWidth | 获取屏幕可用工作区尺寸 |
document.body.clientWidth/clientHeight | 网页可见区域宽/高（不含滚动条） |
document.body.offsetWidth/offsetHeight | 网页可见区域宽/高（含边线） |
document.body.scrollWidth/scrollHeight | 网页正文全文宽/高 |
document.body.scrollTop/scrollLeft | 网页被卷去的高度/宽度 |
四、样式与显示
| 语法 | 说明 |
|---|
document.all.csss.href = "a.css" | 替换链接的CSS文件 |
display:inline | 元素并排显示 |
hidefocus=true | 隐藏元素焦点 |
style="word-break:break-all" | 根据宽度自动换行 |
style="word-wrap: break-word; word-break: break-all | 英文字符串超出表格宽度自动换行 |
frame allowtransparency="allowtransparency" | 透明背景的iframe |
obj.style.cssText | 获取/设置元素的style内容 |
document.documentElement.innerHTML | 获取/设置HTML根标签的内容 |
document.styleSheets[0] | 获取第一个style标签 |
document.styleSheets[0].rules[0] | 获取第一个style标签里的第一个样式 |
tr onmouseover="this.bgColor='#f0f0f0'" onmouseout="this.bgColor='#ffffff'" | 表格行鼠标悬停变色 |
五、输入框/表单特殊处理
| 语法 | 说明 |
|---|
input style="IME-MODE: disabled" | 关闭输入法 |
input onfocus="this.select()" value="123" | 获焦时自动全选内容 |
input onkeydown="if(event.keyCode==13)event.keyCode=9" | Enter键转为Tab键（移到下一个输入框） |
input onfocus="alert(this.defaultValue)" value="123"> | 获焦时显示默认值 |
input autocomplete="on/off" | 开启/关闭输入框自动完成功能 |
下拉框.options[索引] | 获取下拉框的选项 |
下拉框.options.length | 获取下拉框选项数量 |
六、编码/时间/其他实用操作
| 语法 | 说明 |
|---|
escape()/unescape() | UNCODE编码/解码（旧版） |
encodeURIComponent()/decodeURIComponent() | URI编码/解码（推荐，支持特殊字符） |
typeof($js_libpath) == "undefined" | 判断变量类型是否为未定义 |
var n1 = new Date("2004-10-10".replace(/-/g, "\\/")).getTime() | 获取时间对应的毫秒数 |
meta http-equiv="refresh" content="8;URL=http://xxx" | 8秒后自动刷新并跳转 |
a href="mailto:aaa@bbb.com?subject=ccc&body=xxxyyy" | 快速打开邮件客户端（指定主题/内容） |
link href="favicon.ico" rel="Shortcut Icon" | 设置地址栏图标（16*16 16色，放根目录） |
link href="favicon.ico" rel="Bookmark" | 设置收藏栏图标 |
input onclick="window.location = 'view-source:'+ 'http://www.csdn.net/'" | 查看网页源代码 |
a href="javascript:function()" | 防止空链接点击后跳转到页首 |
obj.title = "123 \n sdfs" | 标题换行（部分浏览器支持） |
input style="CLIP: rect(5px 15px 15px 5px); POSITION: absolute" type="checkbox" | 扁平样式的复选框 |
示例：网页尺寸信息获取
var s = "";
s += "\r\n网页可见区域宽："+ document.body.clientWidth;
s += "\r\n网页可见区域高："+ document.body.clientHeight;
s += "\r\n网页可见区域宽（含边线）："+ document.body.offsetWidth;
s += "\r\n网页可见区域高（含边线）："+ document.body.offsetHeight;
s += "\r\n网页正文全文宽："+ document.body.scrollWidth;
s += "\r\n网页正文全文高："+ document.body.scrollHeight;
s += "\r\n网页被卷去的高："+ document.body.scrollTop;
s += "\r\n网页被卷去的左："+ document.body.scrollLeft;
s += "\r\n网页正文部分上："+ window.screenTop;
s += "\r\n网页正文部分左："+ window.screenLeft;
s += "\r\n屏幕分辨率的高："+ window.screen.height;
s += "\r\n屏幕分辨率的宽："+ window.screen.width;
s += "\r\n屏幕可用工作区高度："+ window.screen.availHeight;
s += "\r\n屏幕可用工作区宽度："+ window.screen.availWidth;
alert(s);