js-DOM2,表单脚本

时间:2022-03-15 11:15:15

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";