标签：
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) 偏移量：
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) 检测有效性
if(document.forms[0].elements[0].checkValidity()){
//字段有效继续
}else{
//字段无效
}
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";
标签：
原文地址：http://www.cnblogs.com/zhanghuiyun/p/5137729.html
