動態設置事件：

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

2.

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

?

轉載于:https://www.cnblogs.com/chay1227/archive/2013/01/05/2845070.html

總結

以上是生活随笔為你收集整理的javascript - dom的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。