js-DOM2，表单脚本

DOM2：

1、DOM2中：创建一个完整的HTML文档

document.implementation.createHTMLDocument("new Doc");

alert(htmldoc.title);------"New Doc"

alert(typeof htmldoc.body);-----"object"

2、 样式:

1)     在css属性是color，background-image ，在js中style.color，style.backgroundImage

float是js中的保留字，不能作为属性名，在样式对象是cssFloat，在IE中则是styleFloat

var a=document.getElementById("myDiv");

a.style.backgroundColor="red";

2)      cssText：它能够访问style特性中的CSS代码

myDiv.style.cssText="width:25px;height:100px;background-color:green";

alert(myDiv.style.cssText);

3)     getPropertyValue（propertyName）：返回给定属性的字符串值

var prop,value,i,len;

for(i=0,len=myDiv.style.length;i<len;i++){

prop=myDiv.style[i] ; //或者myDiv.style.item(i);

value=myDiv.style.getPropertyValue(prop); ---字符串表示

alert(prop+":"+value)；

}

4)     返回给定位置的css属性的名称

5)     removeProperty（propertyName）

myDiv.style.removeProperty("border");

6)     包含重叠的样式并影响到当前元素：getComputedStyle（）方法，接收两个参数，要取得计算样式的元素和一个伪元素字符串（eg：：after），如果不需要伪元素，将第二个参数设为null，

<style type="text/css">

#myDiv{

background-color:blue;

width:100px;

height:200px;

}

</style>

<div id="myDiv" style="border:1px solid black"></div>

js:

var myDiv=document.getElementById("myDiv");

var computedStyle=document.defaultView.getComputedStyle(myDiv,null);

alert(computedStyle.backgroundColor); ----red

alert(computedStyle.width);

alert(computedStyle.border);-----有些浏览器返回1px solid black

3、操作样式表;

1)

var sheet=null;

for(var i=0,len=document.styleSheets.length;i<len;i++){

sheet=document.styleSheets[i];

alert(sheet.href);

}

2)

Css规则：

Var sheet=document.styleSheets[0]------第一个样式表

Var rules=sheet.cssRules || sheet.rules;   ----取得规则表

Var rule=rules[0]   --------------第一条规则

Alert(rule.selectorText); ---------------“div .box”

Alert(rule.style.cssText); -----------css代码

删除规则：

function deleteRule(sheet,index){

if(sheet.deleteRule){

sheet.deleteRule(index);

}else if(sheet.removeRule){

sheet.removeRule(index);  ----IE

}

}

deleteRule(document.styleSheet[0],0);----调用函数

4、元素大小

1)     偏移量：

• offsetHight：元素在垂直方向上占用空间的大小，元素高度+水平滚动条高度+上边框高度+下边框高度
• offsetWidth:元素在水平方向上占用的空间大小，与offsetHight的计算方式类似
• offsetLeft：元素的左外边框至包含元素的左内边框之间的距离
• offsetTop：元素的上外边框至包含元素的上内边框之间的距离

function getElementLeft(element){

// offsetLeft以及offsetTop与包含元素有关，包含元素的引用在offsetParent中

var actualLeft=element.offsetLeft;

var current=element.offsetParent;

while(current !==null){

actualLeft+=current.offsetLeft;

current=current.offsetParent;

}

return actualLeft;

}

2)     客户区大小：clientWidth以及clientHeight（内容区+内边距高度）

function getViewport(){

if(document.compatMode=="BlackCompat"){

return{

width:document.body.clientWidth;

height:document.body.clientHeight;

};

}else{

return{

width:document.documentElement.clientWidth;

height:document.documentElement.clientHeight;

}

}

}

3)     滚动大小：

scollHeight:在没有滚动条的情况下，元素内容的总高度

scollWidth:在没有滚动条的情况下，元素内容的总宽度

scollLeft：被隐藏在内容区域左侧的像素数，通过设置这个属性可以改变元素的滚动位置

scollTop：被隐藏在内容区域上方的像素数，通过设置这个属性可以改变元素的滚动位置

var docHeight=Math.max(document.documentElement.scollHeight,

document.documentElement.clientHeight);

var docWidth=Math.max(document.documentElement.scollWidth,

document.documentElement.clientWidth);

function scollToTop(element){

if(element.scollTop!=0){

element.scollTop=0;

}}

5、遍历：

1)     NodeInterator：4个参数，root，表示要访问哪些节点的数字代码，filter，false

当filter==null的时候，遍历所有

var div=document.getElementById("div1");

var filter=function(node){

return node.tagName.toLowerCase()=="li"?

NodeFilter.Filter_ACCEPT:

NodeFilter.Filter_SKIP;

}

var interator=document.createNodeInterator(div，NodeFilter.

SHOW_ELEMENT，filter,false);

var node=interator.nextNode();   //previousNode()

while(node!=null){

alert(node.tagName);

node=interator.nextNode();

}

2)     TreeWalker

var walker=document.createTreeWalker(div,

NodeFilter.SHOW_ELEMENT,filter,false);

walker.firstChild();

walker.nextSibling();----下一个同辈元素

walker .currentNode----目前的起点

6、DOM中的范围：

1)     createRange（）：

setStartBefore(refNode):

setStateAfter(refNode):

setEndBefore(refNode):

setEndAfter(refNode):

eg：

<p id="p1"><b>Hello</b> world</p>

var range1=document.createRange();

range2=document.createRange();

p1=document.getElementById("p1");

range1.selectNode(p1);

range2.selectNodeContents(p1);

range1---><p id="p1"><b>Hello</b> world</p>

range2---><b>Hello</b> world

2)     var p1=document.getElementById("p1");

helloNode=p1.firstChild.firstChild; ----Hello

worldNode=p1.lastChild;   ---- world

var range=document.createRange();

range.setStart(helloNode,2); ----llo

range.setEnd(worldNode,3);   ---- wo

<p><b>He</b><b>llo</b> world</p>

“world”会划分为wo以及rld

3)     range.deleteContents();

会输出<p><b>He</b> rld</p>

4)     extractContents()会返回范围的文本片段

var fragment=range.extractContents();

p1.parentNode.appendChild(fragment);

<p><b>He</b> rld</p>

<b>llo</b> wo

5)     cloneContents（）保存的是范围节点中的副本，而不是实际节点

var fragment=range.cloneContents();

p1.parentNode.appendChild(fragment);

<p><b>Hello</b> world</p>

<b>llo</b> wo

6)     insertNode（）向范围选区的开始处插入一个节点

var span=document.createElement("span");

span.style.color="red";

span.appendChild(document.createTextNode("inserted text"));

range.insertNode(span);

输出：<p><b>He<span style="color:red">inserted text</span>llo</b> world</p>

7)     折叠到DOM范围：

range.collapse(true); //折叠到起点为true

8)     清理DOM范围

range.detach();//从文档中分离出来

range=null；

表单脚本：

1、documen.forms可以取得页面中所有的表单

var firstForm=document.forms[0];

var myForm=document.forms["foem2"];

2、提交表单：

1)     <input type="submit" value="submit">

//自定义提交按钮

<button type="submit">submot</button>

//图片按钮

<input type="image" src="gg.gif">

2)     在js中以编程方式提交按钮 ：

var form=document.getElementById("myForm");

form.submit();

但不会触发submit事件，所以在调用此方法之前需要先验证表单数据

表单重复提交：

方法1：

var checkSubmitFlg = false;

function checkSubmit() {

if (!checkSubmitFlg) {

// 第一次提交

checkSubmitFlg = true;

return true;

} else {

//重复提交

alert("Submit again!");

return false;

}

}

方法2：

EventUtil.addHandler(form,"submit",function(event){

event=EventUtil.getEvent(event);

var target=EventUtil.getTarget(event);

var btn=target.elements["submit-btn"];

btn.disable=true;

})

4、重置表单：

form.reset(); //会像单击重置按钮一样触发reset事件

5、表单字段：

var form=document.getElementById("form1");

//取得表单的第一个字段

var field1=form.elements[0];

//取得名为textbox1的字段

var field2=form.elements["textbox1"];

//取得表单中包含的字段的数量

var fieldCount=form.elements.length;

当多个表单控件同时使用一个name的时候，返回的是一个NodeList

6、共有的表单字段属性

form---指向当前字段所属表单的指针，只读

var form=document.getElementById("form1");

var field=form.elements[0];

alert(field.form===form) ----检查form属性的值

field.focus(); ---将焦点设置到当前字段

form.disable=true; ----禁用当前字段

7、共有的表单字段方法：focus（）以及blur（）

1)     focus（）：将浏览器的焦点设置到表单字段，激活表单字段，使其可以响应键盘事件

eg：页面加载完毕，将焦点移动表单中的第一个字段

EventUtil.addHandler(window,"load",function(event){

document.forms[0].elements[0].focus();

});

Html5为表单元素添加一个autofocus属性，是个布尔值（在支持的浏览器中是true），在支持该属性的浏览器中，会自动将焦点移动到相应字段<input type="text" autofocus>；

2)     blur（）是将焦点从元素中移走

8、共有的表单字段事件：blur，focus，change（对于input以及textarea元素，失去焦点且value值改变的时候触发，对于select元素，在其选项改变的时候触发）

9、文本框脚本：

1)     输入不能超过50个字符，能够显示25个字符：

<input type="text" size="25" maxlength="50" value="aaaa">

2)     不能在textarea中指定最大的字符数

<textarea rows="25" cols="5">aaaa</textarea>

3)     select（）用于选择文本框中的所有文本，不接受参数，可以在任何时候被调用

var textbox=document.forms[0].elements["textbox1"];

textbox.select();

4)     select事件：

selectionStart，selectionEnd:保存的是基于0的数值，表示文本的范围

function getSelectText(textbox){

return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd)

}

5)     选择部分文本：setSelectionRange（）方法

接收两个参数：第一字符的索引，最后一个字符的索引，在IE8以及之前的版本中，不支持这种方法

10、过滤输入：

1)     屏蔽字符

Eg：只允许用户输入数值：

EventUtil.addHandler(textbox,"keypress",function(event){

event=EventUtil.getEvent(event);

var target=EventUtil.getTarget(event);

var charCode=EventUtil.getCharCode(event);

//跨浏览器取得字符编码

if(!/\d/.test(String.fromCharCode(charCode)) && ！event.ctrlKey){

// String.fromCharCode(charCode))将字符编码转化为字符串

EventUtil.preventDefault(event);

}

})

2)     操作剪贴板

beforecopy—发生在复制操作前触发；

copy

beforecut：

cut

beforepaste：

paste

clipboardData对象（访问剪贴板中的数据）的3个方法：getData（数据类型）；setData（数据类型，要放至剪贴板的文本）；clearData()

11、自动切换焦点：

<input type="text" name="tel1" id="textTel1" maxlength="3">

<input type="text" name="tel2" id="textTel2" maxlength="3">

<input type="text" name="tel3" id="textTel3" maxlength="4">

Js：

(function(){

function tabForward(event){

event=EventUtil.getEvent(event);

var target=EventUtil.getTarget(event);

if(target.value.length==target.maxlength){

var form=target.form;

for(var i=0,len=form.elements.length;i<len;i++){

if(form.elements[i]==target){

form.elements[i+1].focus()

}

return;

}

}

}

var textbox1=document.getElementById("textTel1");

var textbox2=document.getElementById("textTel2");

var textbox3=document.getElementById("textTel3");

EventUtil.addHandler(textbox1,"keyup",tabForward);

EventUtil.addHandler(textbox2,"keyup",tabForward);

EventUtil.addHandler(textbox3,"keyup",tabForward);

})()

12、HTML约束:

1)     必填字段：required

2)     数值范围：min，max，step（最大最小两个刻度之间的差值）

<input type="number" min="0" max="100" step="5" name="count">

//用户只能输入0-100之间的值，并且是5的倍数

stepUp();  //默认值是1，加1；

stepDown(); //默认值是1，减1；

stepDown(5); //减5

3)     输入模式：pattern---正则表达式

<input type="number" name="count" pattern=”\d+”>--输入数值

4)     检测有效性

1. checkValidity()

if(document.forms[0].elements[0].checkValidity()){

//字段有效继续

}else{

//字段无效

}

1. validity属性告诉你字段有效还是无效

if(input.validity && input.validity.valid){

if(input.validity.valueMissing){

alert("please add us")

}else if(input.validity.typeMismatch){

alert("sssss")

}

}

5)     禁用验证：novalidate

13、选择框脚本---select，option

add(new,rel);---添加option选项，位置在rel之前

multiple---布尔值

remove(index)

selectIndex:--基于0的选中项索引，如果没有选中项，则值为-1，对于多选控件，只保存第一项的索引

size---选择框中可见的行数

操作选项：

var selectbox=document.forms[0].elements["location"];

var text=selectbox.options[0].text;

var value=selectbox.options[0].value;

1)     选择选项：selectedIndex属性

单选：

var selectedOption=selectbox.options[selectbox.selectedIndex];

var selectedIndex=selectbox.selectedIndex;

var selectedOption=selectbox.options[selectedIndex];

alert("selected index:" + selectedIndex+ "\nSelected text:" + selectedOption.text+"\nSelected value:"　+selectedOption.value);

多选：

function getSelectedOptions(selectbox){

var result=new Array();

var option=null;

for(var i=0,len=selectbox.options.length;i<len;i++){

option=selectbox.options[1];

if(option.selected){

result.push(option);

}

}

return result;

}

2)     添加选项:

第一种：

var newOption=new Option("option text","Option value");

selectbox.add(newOption,undefined);

第二种：

appendChild（）

3)     移动：

var selectbox1=document.getElementById("selLocations1");

var selectbox2=document.getElementById("selLocations2");

selectbox2.appendChild(selectbox1.options[0]);

//appendChild()方法传入一个文档已有的元素，就会从父节点中移除它，再将它添加到指定位置

重排：

var optionToMove=selectbox.options[1];

selectbox.insertBefore(optionToMove,selectbox.options[optionToMove.index-1])

14、富文本编辑：

1)     使用contenteditable属性：true-打开；false-关闭；inherit—继承

<div class="editable" id="richedit" contenteditable></div>

var div=document.getElementById("richedit");

div.contentEditable="true";