Javascript

文档对象模型（DOM）

DOM（Document Object Model，文档对象模型）是一个通过和JavaScript进行内容交互的APIJavascript和DOM一般经常作为一个整体，因为Javascript通常都是用来进行DOM操作和交互的window对象作为DOM里的全局对象，在页面上创建的所有全局对象都会作为window对象的属性而得以存在实际上DOM不是Javascript也不是浏览器厂商擅自给出的时髦的DHTML（通过CSS实现的一种不用编程即可简单动态化HTML文档）概念，它是W3C规定的一组用来描述脚本如何与结构化文档进行交互和访问的Web标准，DOM标准定义了一系列的Element节点对象、方法、属性 用于访问、操纵HTML文档的内容、结构、样式以及节点的行为

 

window对象 

window事件

onload()
//页面加载完毕时发生 

onresize()
//当窗口改变尺寸时发生 

window属性

defaultStatus
//设置或返回状态栏默认文本
 
status
//设置或返回状态栏文本
 
opener
//如果当前窗口是通过另一窗口的open方法打开的 opener将返回打开当前窗口的窗口对象 
 
closed
//测试窗口是否关闭，返回布尔值表示真假
 
screenLeft
//设置或获取窗口离屏幕的左边距
 
screenTop
//设置或获取窗口离屏幕的顶边距
 
outerHeight | outerWidth
//返回窗口的尺寸
 
innerHeight | innerWidth
//返回窗口文档可见区域的css像素尺寸（非物理像素，而是一行总容纳的像素，比如手机屏幕需要乘以像素比，320的手机屏，其innerWidth是320*3.0625左右），包含滚动条，窗口可见区域并不会因为滚动条的存在而变大，即使滚动条不存在，可实际上滚动条也是包含在可见区域内的。

 
pageXOffset
//获取滚动条向右拉动了多少各个像素
 
pageYOffset
//获取滚动条向下拉动了多少个像素

screen.width

屏幕宽度，这个值会随着浏览器的缩放而变化

document.documentElement.clientWidth

documentElement表示根元素html节点，clientWidth表示html节点在文档上的可见区域的css像素宽度，不包含滚动条。这个值会随着浏览器的缩放而变化，但不会随着其包含的内容而改变。

document.documentElement.offsetWidth

documentElement表示根元素html节点，offsetWidth表示html节点在文档上的可见区域+不可见区域+padding+border的css像素宽度，不包含滚动条。由于html的宽度不从它包含的元素上计算，它默认的宽度就是可视区域的宽度，当然，虽然你可以手动为html指定一个超出可视区域的宽度，但它不会从子元素上计算宽度。

window方法

open(URL,name,specs,replace)
 //打开新的window窗口
//打开新窗口并居中显示
window.onload = function () {
    var marginLeft=(window.outerWidth - 200) / 2;
    var marginTop=(window.outerHeight -200) /2;
    var newWindow = window.open('', '', 'width=200,height=200,left=' + marginLeft+',top='+marginTop);
    newWindow.document.write('<h1>hello world</h1>');
} 
 
alert(msg)
//弹出信息提示对话框
 
prompt(msg)
//脚本输入提示框，返回用户输入的信息
 
confirm(msg)
//带有指定消息、确定和取消按钮的对话框
 
focus()
//使窗口得到焦点
 
setTimeout(callBack, miSeconds)
//x是函数，y是毫秒，在经过的指定的毫秒后执行x  
//示例：
function test() {
    alert();
}
 
setTimeout(test, 2000);
 
function aa(string) {
    var say = string;
    alert(say);
    setTimeout(function () { aa(string) }, 2000)
}
aa('hello');
 
setInterval(callBack，miSeconds)
//在经过指定的毫秒数后周期性执行x并返回一个ID，这个ID可用于清除复调此方法是周期性执行x，而setTimeout只执行一次，让setTimeout有setInterval的效果就需要将它放进函数体里结合递归实现复调
 
clearTimeout(ID)
//ID是setTimeout的返回值，根据ID清除setTimeout的延时调用 
//示例：
function aa() {
    alert("true")
    aa.timeOut = setTimeout("aa()", 2000)
}
function bb() {
    clearTimeout(aa.timeOut)
}
aa() 
 
clearInterval(ID)
//ID是setInterval的返回值，根据ID清除setInterval的周期性复调

 
moveTo(x, y)
//x是窗口离电脑屏幕左边距，y是窗口离电脑屏幕上边距。以窗口左上角为基准移动到绝对位置
 
resizeTo(x, y)
//x是宽，y是高。设置窗口绝对宽高
//示例：不规则移动窗口动画
window.resizeTo(300, 300)
var x = 0, y = 0, xpos = 5, ypos = 5;
var screenW = screen.width;
var screenY = screen.height;
function changeXY() {
    if (x + 300 >= screenW || x + 300 < 0) { xpos = -xpos }
    if (y + 300 >= screenY || y + 300 < 0) { ypos = -ypos }
    x += xpos;
    y += ypos;
    window.moveTo(x, y)
}
setInterval("changeXY()", 1);

跑马灯例子

<button onclick="dynamic()">开始</button>
<button onclick="clearDy()">取消</button>
<div id="box">天下之大无奇不有</div>

window.onload = function () {
var box = document.getElementById("box");
window.internalID=null;
}

function dynamic() {
    //防止重复创建延时调用函数
    if(window.internalID!=null) return;
    //400毫秒自动延时
    window.internalID = window.setInterval(function () {
        var start = box.innerText.substring(0, 1);
        var end = box.innerText.substring(1);
        box.innerText = end + start;
    }, 400);
}

function clearDy(){
    //清除延时调用仅仅是清除调用而已，函数还在，也即internalID指向的函数还在内存中，并非是null
    window.clearInterval(window.internalID);
    //重新赋值为null以便点击开始按钮后可以重新开启延时调用
    window.internalID=null;
}

navigator对象

navigator的属性

appName
//返回当前浏览器名

appName | appCodeName
//返回浏览器别名

appVersion
//返回浏览器内部版本号此版本号并不是发布时宣传的版本号，如IE4-IE6的版appVersion都是4.0

userAgent
//返回由客户机送到服务器的用户与代理头标文本，此属性通常包含appName & appVersion中的所有信息

screen对象

screen的属性

width
//客户机屏幕宽度

height
//客户机屏幕高度

availHeight
//屏幕视野高 剔除window的任务栏之后的高度

availWidth
//屏幕视野宽

colorDepth
//屏幕支持的色深

location对象

location的属性

href
//获取当前文档的url或跳转到指定的url

location.href = "http://www.baidu.com";

hash
//一个可读写的字符串，指定了当前URL的锚部分（包括前导散列符#），文档URL这一部分指定了锚在文档中的名字

host
//一个可读写的字符串，指定了当前URL中的主机名和端口号

hostname
//一个可读写的字符串，指定了当前URL中的主机名

pathname
//一个可读写的字符串，指定了当前URL中的路径部分

port
//一个可读写的字符串指定了当前URL中的端口号

protocol
//一个可读写的字符串，指定了当前URL中的协议部分 http:

search
//一个可读写的字符串，指定了当前URL中的查询部分，包括前导问号 
//示例：
var urlqueryString = window.location.search;//获取请求url中从?开始的数据
var sliceQueryString = urlqueryString.slice(1);//提取？后边的查询字符

location的方法

replace(url)
//发起新的url请求，浏览器back按钮不能退回上一个url记录点 (但用户可以通过历史记录退回到原来的文档位置) 

reload(url)
//刷新当前文档 

history对象

history的属性

current
//获取历史记录中的URL 只有签名过的脚本才允许使用

next
//返回当前历史记录页面的下一个历史记录的URL 只有签名过的脚本才允许使用

previous
//返回当前历史记录页面的上一个历史记录的URL 只有签名过的脚本才允许使用

length
//返回历史记录状态中的页面个数 以URL计数

history的方法

back()
//返回上一个页面

forward()
//如果当前页面是在历史记录点中被重新装载过并从新页面返回的，forwar将返回新页面

go(x)
//x=-1后退，x=1前进

frames对象 

frames对象为一个数组对象，它表示页面上框架的集合（框架集） 

frames的事件

onload 

框架加载完毕时发生 

onunload 

框架被卸载时发生 

onbeforeunload 

框架被加载前发生 

访问框架对象

每个框架都相当于是一个独立的window对象，以下方式都可以获取指定的框架对象

window.frames[索引]
window.frames['框架name']
window.框架name

框架交互

parent

获取包含当前框架的window对象 ，parent表示为一个window对象而frames是window的子对象 ，通过指定frames对象的索引即可获取其他框架的信息

//以下方式都可以获取其他框架的信息：
parent.frames[1].name
parent.frames["框架的name属性值"].name

top

获取包含当前框架的顶层window对象，如果一个框架集嵌套了一个子框架集，要在子框架集的框架中访问其它框架，则必须使用top属性返回顶层框架，这样就可以获取顶层框架集下的任何子框架，包括嵌套的子框架，它们都在frames数组对象中

//我们经常会在框架之间进行变量之间的交互与取值，既然框架相当于window对象，那么如果需要在一个框架里访问另一个框架里的元素的值我们可以这样做：
window.parent.frames[1].document.getElementById

使用框架集

<frameset>

标签表示整个页面的框架集，框架集即一个文档页面被frameset标签分割成可以装在多个独立的html页面的框架集合定义如下： 

//将页面的body标签全部删除
//rows表示将页面横向分割成一个框架集
<frameset rows="50%,50%"></frameset>

<frameset>的属性

cols
//表示列个数

rows
//表示行个数 
//示例：
< frameset cols= "50%,*" >
    //此处可以使用数字比如100,* 表示100行（100个像素）剩余的都分给第二个框架
    <frame frameborder="yes" />
    <frame frameborder="yes" />
</frameset >

<frame>

表示框架集里的独立框架 

<frameset rows="50%,50%">
    <frame src="1.html" frameborder="yes" />
    <frame src="2.html" frameborder="yes" />
</frameset>
//frameborder表示是否显示独立框架的边框线

独立框架里还可以分割框架

<frameset rows="50%,50%">
    <frame src="1.html" frameborder="yes" />
    <frameset cols="50%,50%">
        <frame src="1.html" frameborder="yes" />
        <frame src="1.html" frameborder="yes" />
    </frameset>
</frameset>

<frame>的属性

frameborder
//是否显示边框线

scrolling
//是否自动出现滚动条

bordercolor
//指定边框线的颜色

src
//指定框架链接的页面的路径

noresize
//指定框架的边框不允许拖动，noresize="noresize"

name
//指定框架的名称，不能用id 

示例

<frameset cols="50%,*">
    <frame frameborder="yes" name="left" id="left" src="1.aspx" bordercolor="red" noresize="noresize" scrolling="No" />
    <frame frameborder="yes" name="right" id="right" src="1.aspx" bordercolor="red" noresize="noresize" scrolling="No" />
</frameset>

<iframe>浮动框架

浮动框架是独立的，它不属于frameset框架集

<body>
    <iframe frameborder="yes" src="1.html" />
</body>

event对象

event的属性

altKey
//测试Alt键是否被按下并保持住了，返回布尔值表示真假

ctrlKey
//测试ctrl键是否被按下并保持住了，返回布尔值表示真假
//示例：
document.onkeydown = function () {
if (event.ctrlKey) {
    alert("true")
}
}

shiftKey
//测试shift键是否被按下并保持住了，返回布尔值表示真假

keyCode
//获取当键位被按下时的Unicode键位码

clientX
//获取事件发生时，鼠标指针在浏览器客户区的水平坐标

clientY
//获取事件发生时，鼠标指针在浏览器客户区的垂直坐标

screenX
//获取事件发生时，鼠标指针在计算机屏幕的水平坐标

screenY
//获取事件发生时，鼠标指针在计算机屏幕的垂直坐标

offsetX
//鼠标相对于事件源元素的X坐标，只有IE事件有这个属性

offsetY
//鼠标相对于事件源元素的Y坐标，只有IE事件有这个属性
//示例：
//实时获取鼠标在x轴和y轴上的位置
var aa = function () {
    var xp = "X:" + event.offsetX + "     ";
    xp += "Y:" + event.offsetY;
    div = document.getElementById("divs");
    div.innerText = xp;
    status = xp;
}
//<body style= "font-family:'Arial';font-size:20px;text-align:center;" >
//    <div>指针滑过对象查看指针在图片上的像素位置</div>
//    <img src="Snap15.bmp" onmousemove="aa()" onmouseout="div=document.getElementById('divs');div.innerText=' '">
//    <div id="divs" style="margin-top:-40px;margin-left:20px;background:white;200px;"></div>
//</body>

srcElement
//获取对于生成事件的 Window 对象、Document 对象或Element 对象

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

bubbles
//指示事件是否是起泡事件类型，返回布尔值表示真假

cancelable
//设置事件是否可拥可取消的默认动作

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

returnValue
//设为fasle，可以取消发生事件的源元素的默认动作只有IE事件有这个属性
//示例：
//< a href= "https://www.flickr.com/" onclick= "window.event.returnValue=false" > click</a >
//<a href="https://www.flickr.com/" onclick="window.event.returnValue=trace( )">click</a>

event的方法

preventDefault()
//通知浏览器不要执行与事件关联的默认动作

stopPropagation()
//停止事件的传播，阻止它被分派到其他节点

document对象

Document表示整个html文档，html元素被称为元素对象，它们是作为Document的子对象存在的

document的属性

all
//获取文档的所有元素 

fgColor
//设置或获取文档前景色 

bgColor
//设置或获取文档背景色 

linkColor
//设置或获取文档所有超链接的初始颜色 

vlinkColor
//设置或获取文档所有超链接的访问后的颜色 

alinkColor
//设置或获取文档所有超链接按下时的颜色 

referrer
//获取把浏览器带到当前文档的URL 必须是以超链接形式转到当前页面不能获得asp.net中以response.redirect转过来的url

URL
//等同window.location.href 

lastModified
//获取当前文档最后修改日期的时间戳 

body
//获取body节点 

documentElement
//获取html标签节点 

styleSheets
//获取该文档中的所有CSSStyleSheet对象列表   

forms
//获取当前文档所有的表单节点对象集合

images
//获取当前文档所有的img对象集合
//images的属性：src、width、height、fileSize、links

title
//获取/设置当前文档的title，用title节点对象来动态设置文档的标题好处是利于搜索引擎搜索到本页面

cookie
//设置或获取cookie，如果是获取cookie，此属性返回一个以分号隔开每个cookie名/值的字符串表示，你可以通过split方法将返回的字符串分隔然后获取指定的cookie

cookie一般性用法

1.保存用户登录状态

2.创建购物车

3.跟踪用户行为 例如一个天气预报网站 能够根据用户选择的地区显示当地的天气情况

4.定制页面 如果站点提供了换肤或更换布局的功能

//设置cookie
document.cookie = "userName=yin;userPwd=123";
//修改cookie
document.cookie = "userName=简单粗暴"
//设置cookie过期时间
var date = new Date();
//找到当前时间 1000毫秒=1秒 60秒=1分钟 60分钟=1小时 24小时=1天 以下设置10天的毫秒数
date.setTime(date.getTime() + 1000 * 60 * 60 * 24 * 10);
var Time = date.toGMTString();
document.cookie = "name=yin ; expires=" + Time;
//设置cookie的可访问性
//你可以将cookie的访问性限制为你指定的域名。当然，默认情况下，一个站点中创建的cookie在另一个站点下是不能被访问的，如果确实需要跨域名访问cookie，可手动设置。
document.cookie = "name=yin ; expires=" + Time + "domain=.google.cn";
//编码cookie
document.cookie = escape("userName") + "=" + escape("苍穹%无尽");

document的方法

write(text)
//打印文本，如果此方法在函数里被引用，会覆盖当前html文档所有的文本
//示例：
document.write("Javascript Is Funny")
document.write("<h1>Javascript Is Funny</h1>")
 
createElement(html)
//创建HTML节点
var a = document.createElement("a");
a.href = "http://www.google.com";
a.style.color = red;
 
createTextNode(text)
//创建文本节点
document.createTextNode("hello world");
 
createAttribute(attri)
//创建属性节点
var div = document.createElement("div");
var style = document.createAttribute("style");
style.value = "height:100px;background:black;";
div.setAttributeNode(style);
document.body.appendChild(div);
 
getElementById(htmlId)
//返回指定id的节点对象
 
getElementsByTagName(tagName)
//获取文档里所有与参数标签名匹配的节点对象，tagName可以=*
 
attachEvent(type, fn)
//为文档上的节点注册事件
 
detachEvent(type, fn)
//为文档上的节点对象注销事件

Node对象

文档中有元素节点、属性节点、文本节点和注释节点，每个节点对象都继承自Node节点对象，所以这些节点都共同维护了一些属性和方法。getElementById返回的就是一个node对象，以下是node对象的属性和方法注：文本节点属于元素节点的子节点，但属性节点不属于元素节点的子节点

节点通用属性

nodeName
//获取节点的名称，元素节点的名称是其html名称，属性节点的名称是属性名，文本节点的名称永远是#text

nodeValue
//获取节点的值，元素节点的值永远是null，属性节点的值是属性值，文本节点的值是文本内容

nodeType
//获取节点类型

firstChild
//获取当前节点下所包含的第一个子节点，由于html都有换行的格式而不是把所有html放在一行上，所以换行总是导致空白符会识别为html节点的第一个子节点

lastChild
//获取当前节点下所包含的最后一个子节点

childNodes
//获取当前节点下所包含的所有子节点 返回一个节点数组注：不包括孙子节点 

attributes  ？无效
//获取当前节点的所有属性（包括内置属性），返回一个节点属性数组（NamedNodeMap），注：要获取具体某个属性可以使用NamedNodeMap类的一个特殊属性：getNamedItem

parentNode
//获取当前节点的父节点

previousSibling
//获取同一级别的当前节点的上个节点

nextSibling
//获取同一级别的当前节点的下个节点

节点通用方法 

getAttributeNode(attri)
//获取该元素节点的属性节点 

setAttributeNode(attri, value)
//为当前节点创建属性 

removeAttributeNode(attri)
//删除该节点的由参数指定的属性 

appendChild(node)
//将参数节点插入当前节点的子末尾 

insertBefore(node1, node2)
//将node1插入到node2之前，此方法需要父节点引用

cloneNode(bool)
//克隆并返回克隆的节点，true时，克隆包括其子孙节点，false时，只克隆当前节点。注意节点的id也会被克隆

removeChild(node)
//移除父节点下指定的子、子孙节点，并返回被移除的节点对象，如果node参数不存在，移除所有

replaceChild(new,old)
用新节点替换父节点下的子节点，如果被替换的子节点存在子节点也将被覆盖

hasChildNodes()
//返回一个布尔值表示该节点是否含有子节点

hasAttributes()
//返回一个布尔值表示该节点是否含有属性

 

getAttribute()

css(cssName, cssValue)
//设置节点的css样式

节点常量

测试当前节点是否是你期望的节点类型，常量表示为Node对象的一个属性

ELEMENT_NODE 对应的数字表示为：1
ATTRIBUTE_NODE 对应的数字表示为：2
TEXT_NODE 对应的数字表示为：3
CDATASECTION_NODE 对应的数字表示为：4
ENTITY_REFERENCE_NODE 对应的数字表示为：5
ENTITY_NODE 对应的数字表示为：6
PROCESSING_INSTRUCTION_NODE 对应的数字表示为：7
COMMENT_NODE 对应的数字表示为：8
DOCUMENT_NODE 对应的数字表示为：9
DOCUMENT_TYPE_NODE 对应的数字表示为：10
DOCUMENT_FRAGMENT_NODE 对应的数字表示为：11
NOTATION_NODE 对应的数字表示为：12

element对象

DOM文档所有的HTML元素都是一个element对象，它们共同维护了一些方法

element的属性

defaultValue
//获取该元素的默认值
 
tagName
//获取元素标签名
 
src
//获取或设置元素src属性类似的还有href 、width、align、id、name、className
 
style
//设置元素的css样式设置样式的属性不能是连字符，如：font-weight应改为fontWeight，-webkit-transition应改为webkitTransition。下面是一个特殊例子，设定元素的float属性
//示例：
div.style.cssFloat = 'left';
document.getElementById("s").style.cssText = "background:url('image/invalid.gif') no-repeat left center;padding-left:20px"; //支持连字符
 
offsetTop
//返回一个数字表示元素自身离包含它的父元素的上边距，只读
 
offsetLeft
//如果父元素没有设置position，则表示当前元素离浏览器的左边距，如果父元素有设置position，则表示当前元素离父元素的左边距，只读
 
offsetWidth
//返回一个数字表示元素当前元素的宽度，包括边框，只读
 
offsetHeight
//返回一个数字表示元素当前元素的高度，包括边框，只读
 
clientWidth
//返回一个数字表示当前元素的宽度，不包括边框，只读
//获取文档区域的尺寸时，可使用document.documentElement和document.body，但根据文档是否声明了DTD（<!DOCTYPE html>）此属性又会返回不同的结果。
//document.documentElement.clientHeight：有DTD声明时，得到的是可见区域的尺寸，没有DTC声明时，得到的是可见和不可见区域的尺寸
//document.body.clientHeight：有DTD声明时，得到的是可见和不可见区域的尺寸，没有DTC声明时，得到的是可见区域的尺寸
//IE中有DTD时，document.body.clientHeight得到的是可见和不可见区域的尺寸，document.documentElement.clientHeight得到的是可见区域的尺寸
//IE中没有DTD时，document.body.clientHeight与document.documentElement.clientHeight等同，都只获取可见区域的尺寸
//鉴于以上混乱的情况，做了个如下的统一设置，下面两个函数用于根据参数的指令来获取文档可见区域的尺寸或可见+不可见区域的尺寸
//all：布尔值，默认false，只获取可见区域的高，如果为rue，则获取可见和不可见区域的高
function getDocClientHeight(all) {
    if (all) {
        //IE下无DTD声明时，只能获取offsetHeight，还需要剔除边框宽度
        if (document.documentElement.clientHeight == document.body.clientHeight) {
            var top = parseInt(document.body.style.borderTopWidth);
            var bottom = parseInt(document.body.style.borderTopWidth);
            return document.body.offsetHeight - ((isNaN(top) == true ? 0 : top) + (isNaN(bottom) == true ? 0 : bottom));
        }
        return document.body.clientHeight < document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight;
    }
    return document.body.clientHeight < document.documentElement.clientHeight ? document.body.clientHeight : document.documentElement.clientHeight;
}
 
//all：布尔值，默认false，只获取可见区域的宽，如果为rue，则获取可见和不可见区域的宽
function getDocClientWidth(all) {
    if (all) {
        //IE下无DTD声明时，只能获取offsetWidth，还需要剔除边框宽度
        if (document.documentElement.clientWidth == document.body.clientWidth) {
            var left = parseInt(document.body.style.borderLeftWidth);
            var right = parseInt(document.body.style.borderRightWidth);
            return document.body.offsetHeight - ((isNaN(left) == true ? 0 : left) + (isNaN(right) == true ? 0 : right));
        }
        return document.body.clientWidth < document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth;
    }
    return document.body.clientWidth < document.documentElement.clientWidth ? document.body.clientWidth : document.documentElement.clientWidth;
}
 
clientHeight
//返回一个数字表示当前元素的高度，不包括边框，只读
 
scrollTop
//返回一个数字表示当前元素的滚动条离自身工作区的上边距
 
scrollLeft
//返回一个数字表示当前元素的滚动条离自身工作区的左边距
 
scrollWidth
//返回一个数字表示该元素的完整宽度，一般用于获取出现滚动条的元素
 
scrollHeight
//返回一个数字表示该元素的完整高度，一般用于获取出现滚动条的元素

body对象

body的事件

onselectstart
//当使用鼠标选取文档某区域内的文本时发生

oncontextmenu
//当用户使用右键菜单时发生

onscroll
//当滚动条被拖动时发生

 body的属性

scrollTop
//返回一个数字表示滚动条离自身工作区的上边距

scrollLeft
//返回一个数字表示滚动条离自身工作区的左边距

scroll
//是否显示滚动条

text
//设置文本颜色

form对象

form的事件

onsubmit
//当表单中的Type为submit的按钮被点击后发生

onreset
//当表单的Type为reset的按钮被点击后发生 

onChange
//当表单的下拉列表的选择项发生改变时发生，当输入框的值被修改后光标离开输入框时发生 

onSelect
//当输入框的值被选中后发生 

onFocus
//当表单子元素得到焦点时发生 

onBlur
//当表单子元素失去焦点时发生 

form的属性

all
//返回一个数组表示form对象的所有子元素

elements
//返回一个数组表示form对象所包含的除<input type=image>之外的所有表单元素

chidren
//返回一个数组表示form对象所包含的所有子元素 包括<input type=image>

form的方法

submit()
//提交表单信息，此方法不会产生onsubmit事件

form子元素的属性

form
//获取一个form对象 表示该元素的父元素
//<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return aa(this.form)" />

defaultValue
//获取或设置表单子元素的缺省值(默认值) 

disabled
//获取或设置表单的desabled状态

readOnly
//获取或设置输入框的readOnly状态 值为bool 

value
//获取表单子元素的value值 

checked
//获取或设置单选或复选框是否选中 

form子元素的方法

select()
//使文本输入框的值可以被选中

blur()
//使该元素失去焦点 

focus()
//使元素获得焦点

setCapture()
//在该元素上捕获整个网页文档的鼠标事件，即使鼠标移开对象依然会进行捕获 

releaseCapture()
//清除setCapture方法

form子对象select的属性

multiple
//获取或设置下拉列表的multiple属性 

defaultSelected
//选项列表中的缺省选项 

selectedIndex
//获取或设置下拉列表中被选中的option选择项的索引 

value
//获取下拉列表中被选中的option选择项的值 

options
//返回一个option对象表示下拉列表的选项的集合，此属性为一个数组可读写

option对象的属性（下拉选项）

text
//设置或获取Option选择项的文本 

value
//设置或获取Option选择项的值 

selected
//测试当前option是否被选中 

index
//获取或设置Option元素在包含它的Select元素中自身所处的索引位置　

option对象的方法（下拉选项）

add(new,index)
//将新的option插入到选项集合中 
var option = document.createElement("option");
option.text = "荔枝";
option.value = "1";
window.onload = function () {
    document.getElementById("Choose").add(option, 1);
}

remove(index)
//移除一个Option选项

 参考：https://blog.csdn.net/qq_33036599/article/details/81224346

http://wenda.jikexueyuan.com/question/23916/?page=1&listRows=15

Javascript - 学习总目录