Js操作DOM

Dom部分

 

DOM就是HTML页面的模型，将每个标签做成一个对象，Javascript通过调用DOM中的属性、方法就可以对页面中的文本框、层等元素进行编程控制了。

 

DHTML就是通过javascript对DOM和CSS的操作(Html+css+javascript---àDHTML)。

 

函数处理函数指定的两种方式（两种方式是不同含义的）

Onclick=myFun()------à表示当发生点击事件时调用myFun函数。

Onclick=myFun------à表示onclick的处理函数是myFun，通过此方式可以动态改变事件的处理函数。

 

Window对象：代表当前浏览器窗口，使用window对象的属性和方法，window关键字可以省略。

         Window.alert()---àalert();

         Window.confirm(“areyour scure?”)--àconfirm(“are your scure?”);点击是返回true否则为false。

         Window.navigate(“url”)----à navigate(“url”);导航到新的地址。

         Window.setInterval(“script”,time)---à setInterval(“script”,time)定时执行“”中的代码。返回定时器对象本身。

         Window.clearInterval(timer)---à clearInterval(timer);清楚定时器对象。

         Window.setTimeout(“script”,time)--àsetTimeout(“script”,time);定时执行一次“”中的代码，返回定时器本身。

         Window.clearTimeout(time)----à clearTimeout(time);清楚定时器.

实例：跑马灯

         <scriptlanguage=’javascript’>

                   functionscroll(){

                    var title = document.title;//获取页面的title值

                  var subChar = title.chartAt(0);

                    var subStr = title.subString(0,title.length);

                    document.title =  subStr + subChar;

}

setInterval(“scroll”,500);//每隔500毫秒执行一次

</script>

Onload事件表示所对应的元素加载完成时触发的事件。

Onunload表示浏览器关闭后触发的事件。

Onbeforeonload表示页面关闭前触发的事件。

Window.location.href返回当前页面的地址，也可以对其赋值，跳转到新的页面。

Window.location.reload刷新当前页面。

Window.event表示事件对象，包含事件发生的各种信息，不局限于window对象，其他对象都可以通过event对象获取信息。

Event中的属性：clientX、clientY表示触发事件对应页面的xy坐标。ScreenX、screenY表示屏幕的坐标。OffsetX、offsetY表示鼠标相对于事件源的坐标偏移量。srcElement获取事件源对象。

Window.event.returnValue表示事件的返回值，返回false表示取消事件的处理，否则触发事件。

Window.screen对象表示显示器，封转了显示器的所有信息。

ClipboardData对象表示剪切板。clearData(“Text”)清空剪切板，getData(“Text”)获取剪切板的值，setData(“Text”,data)设置剪切板的值，Text参数名是固定。

Oncopy和onpaste表示复制和粘贴事件，返回false则禁止相应的动作。

 

Window.history对象，表示历史访问记录对象。

         Window.history.go(num)跳转到指定的页面。

         Window.history.back()/forward()后退和前进。   

 

Document代表当前页面文档的对象，是window下的对象。

Document.write()/writeln()向文档中写入内容，区别是多了换行。写的位置就是js放的位置。注意，要写的内容一定要在页面加载完成时写入，否则就会把以前的内容冲掉。

 

元素对象的查找：getElementById(“id”)、getElementsByTagName(“TagName”)、getElementsByName(“name”)。

Js中的for in 遍历对象得到的是对象的属性名称（key）。

 

Dom动态创建对象

         Document.write()方式只能在加载的过程中创建新的对象，可以通过createElement(“TagName”)的方式创建新的对象，再通过appendChild(child)的方式添加到页面中。RemoveChild(child)移除子对象。

         innerText/innerHTML获取或者赋值，一种是Text形式的，一种是html形式的。

动态创建表格：

         Var tr = Document.createElement(“tr”);

         Var td = Document.createElement(“td”);

         Tr.appentChild(td);

         Table.append(tr);

注意：在ie6、7中要把创建的行添加到tbody中，因为动态产生的表格会有thead何tbody元素，因此添加内容要放到tbody中。

通用的方式创建表：

         Var tr = Tab.insertRow(-1);//-1表示在表格最后插入一行

         Var td =tr.insertCell(-1);//-1表示在一行的最后添加一列

         Td.innerHTML= “string”;//firefox不支持innerText

 

动态产生的内容通过查看源码的方式是看不到的，因为是动态产生的，通过firebug的方式可以看到。

 

This关键字：

         在事件发生时调用一个函数，不能在函数中使用this来取得事件源对象，因为这种方式表示的是函数的调用。和直接把函数的引用赋值给事件源是不同的。通过函数调用时把自己作为参数传递给被调用的函数，那么在函数中就可以使用事件源对象了。

Event.srcElement和this是不同的，this表示真正的事件源对象，而scrElement表示的是引发事件的对象（事件冒泡中的最外层注册该类型事件的对象）

        

Dom操作CSS：

         整体修改：

         通过对象元素的className=”className”的方式可以修改元素的样式。

                            Tds.className = “className”;

         部分修改：

         通过元素对象的style.propertyName=”value”.

                            Tds.style.backgroundColor=”red”

Onblur/onfocurs 表示失去和获得焦点的事件。

通过style.cursor=”pointer”来把鼠标的图标变成手型。

 

层的隐藏和显示

对层的操作就是对display属性的操作。Display没有值表示不显示，否则就是显示。

 

定位（poistion）

         绝对定位，相对定位、无定位、fixed（IE6不支持）等，要是用坐标的话，必须为绝对定位。

 

通过使用元素的setAttribute(“name”,value)的方式给元素添加新的属性。

 

通过Dom操作表单

1、  调用form的submit方法进行提交表单。

2、 Onsubmit会在表单提交的时候被触发，如果返回的是false则不会提交表单。

回车和tab键的替换

         回车的keycode是13，tab建的keycode是9.通过重新赋值keycode就可以实现功能替换。

         If(Window.event.keyCode=13) Window.event.keyCode=9

通过设置text-align:center/right/left来设置文本框中内容的对齐方式。

Ime-mode:disable--->表示禁用输入法(IE)。Style= Ime-mode:disable

只允许输入数字和小数点。
<input onKeypress="return(/[/d.]/.test(String.fromCharCode(event.keyCode)))"

<scriptlanguage=javascript>
function onlyNum()
{
if(!(event.keyCode==46)&&!(event.keyCode==8)&&!(event.keyCode==37)&&!(event.keyCode==39))
if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105)))
event.returnValue=false;
}
</script>

style="ime-mode:Disabled
这句是比较实用的。意为关闭输入法。省得有些人开着全角输入数字，结果输入不进去来找你哭天抹泪的，还怪你设计的不好。

只允许输入数字
<input name="username"type="text"onkeyup="value=this.value.replace(//D+/g,'')">

只允许输入英文字母、数字和下划线(以下二种方法实现)
<input name="username"type="text" style="ime-mode:disabled">
<input name="username"type="text"onkeyup="value=value.replace(/[^/w/.//]/ig,'')">

只允许输入英文字母、数字和&=@
<input name="username"type="text"onkeyup="value=value.replace(/[^/w=@&]|_/ig,'')">

只允许输入汉字
<input    name="username"       type="text" onkeyup="value=value.replace(/[^/u4E00-/u9FA5]/g,'')">

 

checked=’’表示不选中，checked=”checked”表示选中，ele.checked返回的是boolean类型的数据。