動(dòng)態(tài)設(shè)置事件：

1. <input type="button" value="val1" οnclick="fn1();"/>;

2.

ie支持???? attachEvent w3c標(biāo)準(zhǔn)?? addEventListener if (!window.event) {
??????????????? document.getElementById("btn").addEventListener("click", function () {
??????????????????? alert("aa");
??????????????? }); ??????????????? document.getElementById("btn").addEventListener("click", function () {
??????????????????? alert("bb");
??????????????? });
??????????? }
??????????? else {
??????????????? document.getElementById("btn").attachEvent("onclick", function () {
??????????????????? alert("aa");
??????????????? });
??????????? } -------------------------------------- window對(duì)象方法： 1. 產(chǎn)生一個(gè)定時(shí)器 window.setInterval(code,delay); var intervalId = setInterval("alert('hello');",1000); 2.停止計(jì)時(shí)器 window.clearInterval(intervalId); clearInterval(intervalId); 3. 產(chǎn)生超時(shí)定時(shí)器，只執(zhí)行一次 var timerId = setTimeout("alert('hello');",1000); 4. 清除定時(shí)器 clearTimeout(timerId); ---------------------------------- body、document對(duì)象的事件 onload（頁(yè)面加載后觸發(fā)）、onclick（單擊）、ondblclick（雙擊）、onkeydown（按鍵按下）、onkeypress（點(diǎn)擊按鍵）、onkeyup（按鍵釋放）、onmousedown（鼠標(biāo)按下）、onmousemove（鼠標(biāo)移動(dòng)）、onmouseout（鼠標(biāo)離開(kāi)元素范圍）、onmouseover（鼠標(biāo)移動(dòng)到元素范圍）、onmouseup（鼠標(biāo)按鍵釋放）、oncontextmenu（在瀏覽器中單擊鼠標(biāo)右鍵顯示”右鍵菜單”時(shí)觸發(fā)）等。 ---------------------------------- window對(duì)象屬性 1. window.location對(duì)象 window.location.href="";//重新導(dǎo)航到新頁(yè)面 2. window.event 是IE下非常重要的屬性，用來(lái)獲得發(fā)生事件時(shí)的信息。 clientX、clientY 發(fā)生事件時(shí)鼠標(biāo)在客戶區(qū)的坐標(biāo)； --兼容的寫法-- <scripttype="text/javascript"> ??????? document.body.οnmοusemοve=function () { ??????????? if (window.event) { ??????????????? document.title='('+window.event.clientX+','+window.event.clientY+')'; ??????????? } else { ??????????????? document.title='('+arguments[0].clientX+','+arguments[0].clientY+')'; ??????????? } ??????? } ??? </script> screenX、screenY 發(fā)生事件時(shí)鼠標(biāo)在屏幕上的坐標(biāo)； offsetX、offsetY 發(fā)生事件時(shí)鼠標(biāo)相對(duì)于事件源（比如點(diǎn)擊按鈕時(shí)觸發(fā)onclick）的坐標(biāo)； returnValue:如果將returnValue設(shè)置為false，就會(huì)取消默認(rèn)行為的處理。window.event.returnValue不兼容火狐瀏覽器，FireFox:e. preventDefault();取消事件的默認(rèn)動(dòng)作。 srcElement：獲得事件源對(duì)象。FF下用e.target； screen對(duì)象：獲取屏幕的信息。 alert("分辨率：" + screen.width + "*" + screen.height); if (screen.width < 1024 || screen.height < 768) { alert("分辨率太低！"); } clipboardData對(duì)象，對(duì)粘貼板的操作。 setData("Text",val),設(shè)置粘貼板中的值； getData("Text"),讀取粘貼板的值 clearData("Text"),清空粘貼板； 案例：復(fù)制地址給友好 <input type="button" value="推薦給好友" οnclick="clipboardData.setData('Text','推薦給你一個(gè)網(wǎng)站，很好玩'+location.href);alert('已經(jīng)將網(wǎng)址放到粘貼板中，發(fā)給你的好友即可');"/> 案例：禁止粘貼帳號(hào) 帳號(hào)：<input type="text" /><br /> 重復(fù)帳號(hào)：<input type="text" οnpaste="alert('為保證帳號(hào)的正確，請(qǐng)勿粘貼帳號(hào)');return false;" /> 修改粘貼板中的內(nèi)容 function modifyClipboard() { clipboardData.setData('Text', clipboardData.getData('Text') + '本文來(lái)自**技術(shù)專區(qū)，轉(zhuǎn)載請(qǐng)注明來(lái)源。' + location.href); } οncοpy="setTimeout('modifyClipboard()',100);“ 用戶復(fù)制動(dòng)作發(fā)生0.1秒以后再去改粘貼板中的內(nèi)容。 history操作歷史記錄 ?window.history.back()后退；window.history.forward()前進(jìn)。 ?window.history.go(-1)后退、window.history.go(1)前進(jìn)。 document getElementById(), getElementsByName()， getElementsByTagName()， -------------------------- 事件冒泡 事件冒泡：如果元素A嵌套在元素B中，那么A被點(diǎn)擊不僅A的onclick事件會(huì)被觸發(fā)，B的onclick也會(huì)被觸發(fā)。觸發(fā)的順序是“由內(nèi)而外”。 取消事件冒泡： window.event.cancelBubble=true;//IE下的寫法。 -------------------------- 動(dòng)態(tài)創(chuàng)建dom document.write只能在頁(yè)面加載過(guò)程中才能動(dòng)態(tài)創(chuàng)建。 document的createElement方法來(lái)創(chuàng)建具有指定標(biāo)簽的DOM對(duì)象，然后通過(guò)調(diào)用某個(gè)元素的appendChild();方法將新創(chuàng)建元素添加到相應(yīng)的元素下。//父元素對(duì)象.removeChild(子元素對(duì)象);刪除元素。 function showIt() { var divMain = document.getElementById("divMain"); var btn = document.createElement("input"); btn.type = "button"; btn.value = "我是動(dòng)態(tài)的！"; divMain.appendChild(btn); } <div id="divMain"></div> <input type="button" value="ok" οnclick="showit()" /> 幾乎所有DOM元素都有innerText、innerHTML屬性,分別是元素標(biāo)簽內(nèi)內(nèi)容的文本表示形式和HTML源代碼. //FF不支持innerText,在FF下用textContent屬性。也可以用innerHTML設(shè)置普通文本。 用innerHTML也可以替代createElement，屬于簡(jiǎn)單、粗放型、后果自負(fù)的創(chuàng)建。 示例： function createlink() { var divMain = document.getElementById("divMain"); divMain.innerHTML = "<a href='http://www.baidu.com'>百度</a>"; } 瀏覽器兼容性的例子：ie6，ie7對(duì)table.appendChild("tr")的支持和IE8不一樣，用insertRow、insertCell來(lái)代替。 ?<script type="text/javascript"> function?AddComment() { var txtContent = document.getElementById('txtArea1').value; //獲得評(píng)論文字 var txtNickname = document.getElementById('txtNickname').value; ; //獲得昵稱 var tableObj = document.getElementById('tabComment'); var trTag = tableObj.insertRow(-1); var tdTag1 = trTag.insertCell(-1); tdTag1.innerHTML = txtNickname; var tdTag2 = trTag.insertCell(-1); tdTag2.innerHTML = txtContent;???????????? } </script>
刪除節(jié)點(diǎn)： divObj While(divObj.firstChild){ ????? divObj.removeChild(divObj.firstChild); } 與 divObj.innerHTML=‘’;的區(qū)別 后一種方式來(lái)刪除節(jié)點(diǎn)，在某些情況下會(huì)存在內(nèi)存問(wèn)題。 例如divObj下面有很多其他元素，每個(gè)元素都綁定有事件處理程序。此時(shí)，innerHTML只是把當(dāng)前元素從節(jié)點(diǎn)樹(shù)上移除了，但是那些事件處理程序依然占用內(nèi)存。 ----------------------------------------- js動(dòng)態(tài)修改樣式 注意在css中屬性名與在JavaScript中操作的時(shí)候?qū)傩悦赡懿灰粯?#xff0c;主要集中在那些屬性名中含有-的屬性，因?yàn)镴avaScript中-是不能做屬性、類名的。 所以CSS中背景顏色是background-color，而JavaScript則是style. backgroundColor；元素樣式名是class，在JavaScript中是className屬性； font-size→style.fontSize；margin-top→style.marginTop //駝峰命名法。 操作float樣式的時(shí)候，IE與其他瀏覽器不太一樣。IE：obj.style.styleFloat=‘right’;其他瀏覽器：obj.style.cssFloat=‘right’; //通用代碼： var vv=document.getElementById('dv1'); ??????????? if (typeof (vv.style.styleFloat) =='string') { ??????????????? vv.style.styleFloat='right'; ??????????? } else { ??????????????? vv.style.cssFloat='right'; ??????????? } ------------------------------------- javascript去掉字符串兩端空格 <script type="text/javascript">
　　function trim(str){ //刪除左右兩端的空格
　　?????return str.replace(/(^\s*)|(\s*$)/g, "");
　　}
　　function ltrim(str){ //刪除左邊的空格
　　?????return str.replace(/(^\s*)/g,"");
　　}
　　?function rtrim(str){ //刪除右邊的空格
　　?????return str.replace(/(\s*$)/g,"");
　　}
</script> -------------------------------------------------- js中的正則表達(dá)式 JavaScript中創(chuàng)建正則表達(dá)式類的方法： 1.var regex = new RegExp("\\d{5}") 或者 2.var regex = / \d{5} / /表達(dá)式/是JavaScript中專門為簡(jiǎn)化正則表達(dá)式編寫而提供的語(yǔ)法，寫在//中的正則表達(dá)式就不用管轉(zhuǎn)義符了。 RegExp對(duì)象的方法： （1）test(str)判斷字符串str是否匹配正則表達(dá)式，相當(dāng)于IsMatch var regex = /.+@.+/; alert(regex.test(a@b.com)); （2）exec(str)進(jìn)行搜索匹配，返回值為匹配結(jié)果(*)，相當(dāng)于c#中match()和matches()。 ?如果 exec() 找到了匹配的文本，則返回一個(gè)結(jié)果數(shù)組（完全匹配的字符串以及提取組的結(jié)果。）。否則，返回 null。 要提取多個(gè)需要反復(fù)調(diào)用exec()類似于matches()方法。//注意全局模式/…../g ?在非全局模式下，調(diào)用一次exec()相當(dāng)于match()；在全局模式下連續(xù)多次調(diào)用相當(dāng)于matches() 2.string的正則表達(dá)式方法 （1）match(regexp)，非全局模式下相當(dāng)于調(diào)用exec(),全局模式下相當(dāng)于調(diào)用c#的matches()。 var s = "aaa@163.com"; var regex = /(.+)@(.+)/; var match = s.match(regex); （2）replace方法，字符串.replace(/正則/g,”要替換的字符串$1”); ???????var str="Welcome to Microsoft!We are proud to announce that Microsoft has"; ??????? str.replace(/Microsoft/g, "W3School")); ----------------------------------- 常用keyCode 8：退格鍵 9： Tab 13：回車 46：delete 37-40：方向鍵 48-57：小鍵盤區(qū)的數(shù)字 96-105：主鍵盤區(qū)的數(shù)字 110、190：小鍵盤區(qū)和主鍵盤區(qū)的小數(shù)點(diǎn) 189、109：小鍵盤區(qū)和主鍵盤區(qū)的負(fù)號(hào) <body οnkeydοwn="if(window.event.keyCode==13){window.event.keyCode=9;}">

?

轉(zhuǎn)載于:https://www.cnblogs.com/chay1227/archive/2013/01/05/2845070.html

總結(jié)

以上是生活随笔為你收集整理的javascript - dom的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。