JavaScript動態創建DOM（七）

動態創建DOM

document.write只能在頁面加載過程中才能動態創建。

可以調用document的createElement方法來創建具有指定標簽的DOM對象，然后通過調用某個元素的appendChild();方法將新創建元素添加到相應的元素下。//父元素對象.removeChild(子元素對象);刪除元素。

注：通過js動態創建的元素，直接? 右鍵→查看源碼是看不到的，需要通過“開發人員工具”才能看到。動態創建的控件，如果沒有添加到文檔中，則不能使用get...byid獲取

innerText? innerHTML? value

value 獲取表單元素的值

幾乎所有DOM元素都有innerText、innerHTML屬性（注意大小寫），分別是元素標簽內內容的文本表示形式和HTML源代碼，這兩個屬性是可讀可寫的。//FF不支持innerText,在FF下用textContent屬性。也可以用innerHTML設置普通文本。

示例： innerText與innerHTML區別。

傳智播客.net培訓

用innerHTML也可以替代createElement，屬于簡單、粗放型、后果自負的創建。示例：

function createlink() {

var divMain = document.getElementById("divMain");

divMain.innerHTML = "如鵬網";

}

案例：點擊按鈕動態增加網站列表，分兩列，第一列為網站的名字，第二列為帶網站超鏈接的網站名。增加三行常見網站。瀏覽器兼容性問題，見備注。動態產生的元素，查看源代碼是看不到的。通過DebugBar→Dom→文檔→HTML可以看到。

練習：動態生成n個文本框

練習：無刷新評論。

昵稱：

瀏覽器兼容性問題

和IE8不一樣，用insertRow、insertCell來代替或者為表格添加tbody，然后向tbody中添加tr。FF不支持innerText。

所以動態加載網站列表的程序修改為：

var tr = tableLinks.insertRow(-1);//FF必須加-1這個參數,表追加。如果不是負數，則表示在某個索引之前插入。

var td1 = tr.insertCell(-1);

td1.innerText = key;

var td2 = tr.insertCell(-1);

td2.innerHTML = "" + value + "";

或者：（不建議）

例：動態創建表格

innerHTML還是操作Dom節點

操作頁面的元素的時候是用innerHTML的方式還是createElement()、appendChild()與removeChild()的方式？

1.對于大量進行節點操作時，使用innerHTML的方式性能要好于頻繁的Dom操作。

先將頁面的HTML代碼寫好，然后調用一次innerHTML,而不要反復調用innerHTML.

2.對于使用innerHTML=‘’的方式來刪除節點，在某些情況下會存在內存問題。比如：div下面有很多其他元素，每個元素都綁定有事件處理程序。此時，innerHTML只是把當前元素從節點樹上移除了，但是那些事件處理程序依然占用內存。

代碼是否需要放置到onload中

如果js代碼需要操作頁面上的元素，則將該代碼放到onload里面。因為當頁面加載完畢之后頁面上才會有相關的元素

如果js代碼中沒有操作頁面元素的語句，則可以將該代碼直接寫在

Js操作頁面樣式，其他

易錯：修改元素的樣式不是設置class屬性，而是className屬性。。(class是javaScript的一個保留字，屬性不能用關鍵字、保留字所以就變成className了)案例：網頁開關燈的效果。

修改元素的樣式不能this.style="background-color:Red"。

易錯：單獨修改樣式的屬性使用“style.屬性名”。注意在css中屬性名在javaScript中操作的時候屬性名可能不一樣，主要集中在那些屬性名中含有-的屬性，因為JavaScript中-是不能做屬性、類名的。所以CSS中背景顏色是background-color，而JavaScript則是style. backgroundColor；元素樣式名是class，在JavaScript中是className屬性；font-size→style.fontSize；margin-top→style.marginTop //駝峰命名法。

單獨修改控件的樣式。技巧，沒有文檔的情況下的值屬性名，隨便給一個元素設定id，然后在js中就能id.style.出來能用的屬性。

操作float樣式的時候，IE與其他瀏覽器不太一樣。IE：obj.style.styleFloat=‘right’;其他瀏覽器：obj.style.cssFloat=‘right’;//通用代碼見備注1.

========================備注1==========================

var vv = document.getElementById('dv1');

if (typeof (vv.style.styleFloat) == 'string') {

vv.style.styleFloat = 'right';

} else {

vv.style.cssFloat = 'right';

}

案例1：創建三個輸入文本框，當光標離開文本框的時候如果文本框為空，則將文本框背景色設置為紅色，如果不為空則為白色。提示：焦點進入控件的事件是onfocus，焦點離開控件的事件是onblur。

案例2：個td的時候，將這個td及之前的td背景變為紅色，之后評分控件V1，用一個單行5列的Table做評分控件，監聽td的click事件，點擊一的td背景變為白色。鼠標在評分控件上的時候顯示超鏈接形式的鼠標圖標。。

練習1：超鏈接的單選效果。頁還原為白色。參考：點擊變“嗚嗚”。頁面上若干個超鏈接，點擊一個超鏈接的時候被點擊的超鏈接變為紅色背景，其他超鏈接背景沒有變。window.event.returnValue=false;。難點“this”

練習2：點擊按鈕，表格隔行變色：偶數行為黃色背景，奇數行為默認顏色。通過table的getElementsByTagName取得所有的tr，依次遍歷，如果是偶數就…………。

練習3：放若干文本框，獲得焦點的文本框黃色背景，其他控件背景顏色是白色

思路1：監聽所有input的onfocus事件→將背景設置為黃色，監聽所有input的onblur事件→將背景設置為白色。思路2：只監聽onfocus和練習1一樣。

練習4：點擊表格行，被點擊的行高亮顯示（背景是黃色），其他行白色背景。監聽每個tr的onclick事件，將點擊的背景設置為黃色，其他的設置為白色背景。//對于table、div、span這類型元素沒有onfocus（獲取焦點的事件（無法觸發這些事件。））

練習5：圖片瀏覽器。動態創建控件

設置div透明度

控制層的顯示

修改style.display，例子：切換層的顯示

function togglediv() {

var div1 = document.getElementById('div1');

if (div1.style.display == '') {

div1.style.display = 'none';//不顯示

}

else {

div1.style.display = '';//顯示

}

}//與元素對象.enabled=true或readonly=true等不一樣，這里是樣式，不是元素的直接屬性，不能用true或false。

案例：注冊頁面，點擊“高級”CheckBox，則顯示高級選項，否則隱藏。//動態創建層，移除。

、

案例：鼠標放到超鏈接上的時候顯示一個圖片或文字（放到div中。）

百度

谷歌

cnbeta

動態設置元素的位置、大小

通過dom讀取元素的top、left、width、height等取到的值不是數字，而是“10px”這樣的字符串；為這些屬性設值的時候IE可以是80、90這樣的數字，FF、Chrome必須是“80px”、“90%”等這樣的字符串形式，為了兼容統一用字符串形式。left/top需要設置position

易錯：不要寫成div1.style.width=80px，而是div1.style.width=‘80px’;例：

如果要修改元素的大小（寬度加1），則首先要取出元素的寬度，然后用parseInt將寬度轉換為數字（parseInt可以將“20px”這樣數字開頭的包含其他內容的字符串解析為20，parseInt(‘22px’,10)，也就是解析盡可能多的部分）；然后加上一個值，再加上px賦值回去。

案例：層的動態改變大小。setInterval();

IE中body的事件范圍

IE中如果在body上添加onclick、onmousemove等事件響應，那么如果頁面沒有滿，則 “body 中最后一個元素以下（橫向不限制）” 的部分是無法響應事件的，必須使用代碼在document上監聽那些事件，比如document.onmousemove = movePic

document.body.onmousedown=function(){}

document.onmousedown=function(){}

注意加文檔定義與不加文檔定義的也不一樣。

如果為整個文檔注冊事件可以使用：document.onxxxx事件。

層的操作

元素的position 樣式值：static（無定位，顯示在默認位置）、absolute（絕對定位）、fixed（相對于窗口的固定定位，位置不會隨著瀏覽器的滾動而變化，IE6不支持）、relative（相對元素默認位置的定位）。如果要通過代碼修改元素的坐標則一般使用absolute，然后修改元素的top（上邊緣距離）、左邊緣距離）兩個樣式值。left、top都是指的層的左上角的坐標left（

案例：跟著鼠標飛的圖片。提示：鼠標移動的事件是onmousemove（一邊移動事件一邊觸發，而不是移動開始或者移動完成才觸發），通過window.event的clientX、clientY屬性獲得鼠標的位置。

案例：鼠標放到一個超鏈接的時候，在鼠標的位置顯示一個黃色背景，帶圖片的懸浮提示，鼠標離開就消失。提示：鼠標進入控件的事件是onmouseover，離開的事件是onmouseout。

baidu

案例：點擊按鈕層動態變大。提示：英文字母連續單詞不會在中間自動換行的陷阱overflow、word-break: break-all;(查手冊。)

問題

易錯：不要寫成div1.style.width=80px，而是div1.style.width='80px'

修改元素的樣式不能this.style="background-color:Red"，哪怕可以的話也是把以前所有樣式都沖掉了。單獨修改控件的樣式this.style. background='red'，只修改要修改的樣式。技巧，沒有文檔的情況下的值屬性名，隨便給一個元素設定id，然后在js中就能id.style.出來能用的屬性。

createElement的兩種用法，注意innerText的問題

var input = document.createElement(“”)快速創建元素，并且賦值，但是注意設置的inner部分不會被設置var link = document.createElement(“百度”)（“百度”二字寫不進去）

label.setAttribute(“for”, “username”); //設定一些Dom元素屬性名特殊的屬性,label.for = “username”會有問題。label.setAttribute(“xuehao”,“33333”)//getAttribute(“name”)

案例練習

練習1：點擊【登錄】按鈕，彈出一個顯示用戶名、密碼等的層。將用戶名、密碼等寫到一個層中，層默認是隱藏的，點擊【登錄】超鏈接以后將層顯示出來，如果點擊層中的關閉按鈕，則隱藏層。絕對定位，顯示到中間位置。document.body.clientWidth(獲取頁面的width)//高度，注意body的默認范圍。（去掉

練習2：一幅圖片。點擊小圖，彈出一個層在點擊的位置顯示小圖對應的大圖，并且顯示姓名、、身高等信息，點擊層中的關閉按鈕關閉層。進階：元素的額外屬性。動畫效果的顯示出來。兩種：靜態；動態載入數據。

作業：評分控件V2。用一個單行5列的Table，td中默認都是http://m.bai1xia.com/news/zb_users/upload/2022/05/20220529095118_85206.jpg這個圖片。監聽td的mouseover事件，鼠標在一個td的時候將這個td及之前的td的內容換成starFill.jpg這個圖片。鼠標在評分控件上的時候顯示超鏈接形式的鼠標圖標。獲取td中的img見備注3。

案例：注冊頁面，點擊“高級”CheckBox，則顯示高級選項，否則隱藏

練習：界面上有幾個球隊名字的列表，將鼠標放到球隊名字上就變為紅色背景，其他球隊背景顏色為白色，點擊一個球隊的時候就將點擊的球隊變為fontSize=30字體(fontSize=‘’回到默認)。Ul→li

• 西施
• 貴妃
• 貂蟬
• 昭君

練習：顯示數字時鐘，時間顯示到一個div中。思路：setInterval()\innerHTMl

練習：有一個搜索文本框，焦點不在文本框中的時候，如果文本框沒有值，則文本框中顯示灰色文本（Gray）的“輸入搜索關鍵詞”，否則顯示用戶輸入的值；焦點在文本框中時如果之前顯示“輸入搜索關鍵詞”則清空文本框的值，并且將文本修改為黑色。onfocus的時候如果文本框中的值為“輸入搜索關鍵詞”，則清空文本框，并且恢復文本框的顏色為Black；onblur的時候如果文本框中沒有值，則將文本框的值設置為“輸入搜索關鍵詞”并且文本框中顯示灰色文本（Gray）style.color='Gray'。（五分鐘）

form對象

document.getElementById(‘btn1’).click()。搜索引擎的，智能提示，點擊后相當于點擊了“搜索”按鈕。

常用：click(),focus(),blur();//相當于通過程序來觸發元素的單擊、獲得焦點以及失去焦點的事件。

form對象是表單的Dom對象。

方法：submit()提交表單，但是不會觸發onsubmit事件。

實現autopost，也就是焦點離開控件以后頁面立即提交，而不是只有提交submit按鈕以后才提交，當光標離開的時候觸發onblur事件，在onblur中調用form的submit方法。代碼見備注。

在點擊submit后form的onsubmit事件被觸發，在onsubmit中可以進行數據校驗，如果數據有問題，返回false即可取消提交

不同瀏覽器的差異

面試題：說說開發項目的時候不同瀏覽器的不同點，你是怎么解決的？appendChild,insertCell,px

不同瀏覽器中對DOM支持的方法不一樣

獲取網頁中那個元素觸發了事件：在IE里使用srcElement ；在FireFox里使用target

使用Dom獲取和更改網頁標簽元素內文本：在IE里使用innerText ；在FireFox里使用textContent

動態為網頁或元素綁定事件：在IE中綁定事件的方法是attachEvent ；在FireFox中綁定事件的方法是addEventListener （類似于多播委托。使用該方法是還有一些其他的注意事項）

更多

FF與IE對javascript和CSS的區別

。

不同瀏覽器中對CSS的支持不一樣，所以出現在IE中顯示正常的網頁，在FF下全部亂掉了。哀悼網頁使用的CSS只有IE支持，FF都不支持。filter:gray;

JQuery之類的框架進行了封裝，將不同瀏覽器的差異幫開發人員處理了，開發人員只要調用JQuery的方法，JQuery會幫助在不同瀏覽器中進行翻譯。用JQuery就可以解決不同瀏覽器上Dom的不同。對于CSS的不同是美工的事，IETester、FF、Chrome。

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

alert(regex.test("ab.com"));

（2）exec(str)進行搜索匹配，返回值為匹配結果(*)，相當于c#中match()和matches()

如果 exec() 找到了匹配的文本，則返回一個結果數組（完全匹配的字符串以及提取組的結果。）。否則，返回 null。 要提取多個需要反復調用exec()類似于matches()方法。//注意全局模式/…../g

在非全局模式下，調用一次exec()相當于match()；在全局模式下連續多次調用相當于matches()

注：

RegExp 對象

RegExp 對象表示正則表達式，它是對字符串執行模式匹配的強大工具。

直接量語法

/pattern/attributes 創建 RegExp 對象的語法：

new RegExp(pattern, attributes); 參數

參數 pattern 是一個字符串，指定了正則表達式的模式或其他正則表達式。

參數 attributes 是一個可選的字符串，包含屬性 “g”、“i” 和 “m”，分別用于指定全局匹配、忽略大小寫的匹配和多行匹配。ECMAScript 標準化之前，不支持 m 屬性。如果 pattern 是正則表達式，而不是字符串，則必須省略該參數。

返回值

一個新的 RegExp 對象，具有指定的模式和標志。如果參數 pattern 是正則表達式而不是字符串，那么 RegExp() 構造函數將用與指定的 RegExp 相同的模式和標志創建一個新的 RegExp 對象。

如果不用 new 運算符，而將 RegExp() 作為函數調用，那么它的行為與用 new 運算符調用時一樣，只是當 pattern 是正則表達式時，它只返回 pattern，而不再創建一個新的 RegExp 對象。

exec() 方法的功能非常強大，它是一個通用的方法，而且使用起來也比 test() 方法以及支持正則表達式的 String 對象的方法更為復雜。

如果 exec() 找到了匹配的文本，則返回一個結果數組。否則，返回 null。此數組的第 0 個元素是與正則表達式相匹配的文本，第 1 個元素是與 RegExpObject 的第 1 個子表達式相匹配的文本（如果有的話），第 2 個元素是與 RegExpObject 的第 2 個子表達式相匹配的文本（如果有的話），以此類推。除了數組元素和 length 屬性之外，exec() 方法還返回兩個屬性。index 屬性聲明的是匹配文本的第一個字符的位置。input 屬性則存放的是被檢索的字符串 string。我們可以看得出，在調用非全局的 RegExp 對象的 exec() 方法時，返回的數組與調用方法 String.match() 返回的數組是相同的。

但是，當 RegExpObject 是一個全局正則表達式時，exec() 的行為就稍微復雜一些。它會在 RegExpObject 的 lastIndex 屬性指定的字符處開始檢索字符串 string。當 exec() 找到了與表達式相匹配的文本時，在匹配后，它將把 RegExpObject 的 lastIndex 屬性設置為匹配文本的最后一個字符的下一個位置。這就是說，您可以通過反復調用 exec() 方法來遍歷字符串中的所有匹配文本。當 exec() 再也找不到匹配的文本時，它將返回 null，并把 lastIndex 屬性重置為 0。

string的正則表達式方法

String對象中提供了一些與正則表達式相關的方法，相當于對于RegExp類的包裝，簡化調用：

match(regexp)，非全局模式下相當于調用exec(),全局模式下相當于調用c#的matches()，返回數組中是所有的匹配結果（不包含提取組的信息）。

var s = "aaa@163.com";

var regex = /(.+)@(.+)/;

var match = s.match(regex);

alert(RegExp.$1 + "，服務器：" + RegExp.$2);

字符串.replace(/(正)則/g,”要替換的字符串$1”);//替換手機號碼，只顯示后4位。手機尾號為：*******1234

例：

var str = "15028008001";

alert(str.replace(/\d{7}/, "*******"));

練習：光標離開Email地址框的時候用正則表達式校驗是否是合法的Email地址，如果不是的話Email地址框變紅，并且注冊按鈕禁用，否則Email地址框顏色為白色，啟用注冊按鈕。

練習：模擬Trim()方法

var str = '?????????? aaaaaaaaaaa???????? ';

alert('---' + exTrim(str) + '-----');

function exTrim(s) {

return s.replace(/(^\s+)|(\s+$)/g, '');

}

=================高效===========================

String.prototype.trim = function () {

return this.replace(/^\s+/,'').replace(/\s+$/,'');

};

//不要寫一個復雜的正則表達式，尤其是帶或(|)的。盡量寫簡單的容易匹配的到的正則表達式，這樣才高效。

練習：評估密碼強度。

弱密碼：只由數字、字母或其他符號中的一種組成。

中度密碼：由數字、字母或其他字符中的兩種組成。

強密碼：由數字、字母或其他字符3種以上組成。

密碼少于6位安全級別降1級

HTML、JS的壓縮

HTML、JavaScript的壓縮和混淆。去掉空格、縮短變量名，讓js、html尺寸更小，提高下載速度。

HTML、JS壓縮、混淆有動態和靜態兩種方案。HTML壓縮器，比如HTML Compress，JavaScript壓縮工具：Google Closure Compiler、YUI Compressor 、 JsPacker等。

很多js庫都提供了.min.js、compress.js的壓縮版本。gzip

1.安裝jdk

2.配置環境變量(path)

3.開始壓縮。

Js中的一些習慣與性能問題

1.聲明變量要賦初值var n=10。

2.盡量避免直接聲明全局變量，比如要聲明全局變量name,但是它有可能與window.name沖突，所以全局變量一般都會聲明在一個全局對象中：var itcast={name:’zxh’,num:10};使用這些全局變量的時候通過itcast.name或者itcast.num，就可以減少與系統的重名了。

3.當編寫大量Js代碼的時候難免會遇到命名沖突的問題，這時可以通過模擬命名空間的方式來避免命名沖突。例如：

var itcast={};

var itcast.net={};

var itcast.net.net0405={name:’zxh’,sayHi=function(){}};

4.盡量避免使用全局變量。（搜索全局變量時，會一層一層的搜索每個作用域范圍，耗時，低效）

5.使用減值循環或者優化循環條件，不要在循環條件中寫i

var arr = [3, 6, 9];

for (var i = 0, length = arr.length; i < length; i++)

{

alert(arr[i]);

}

6.避免使用eval(“alert(10);”);或setInterval(“myFunc();”,1000);這種雙重解析的代碼。低效！

7.使用原生的方法，比如內置的join()、reverse()，使用這些本來瀏覽器就有的方法不要自己寫myJoin()之類的，性能低。原生方法都是用c或者c++寫的，性能高。

8.盡可能使用switch來代替多個if-else

9.盡量減少語句數量：

用var n1=10,m=‘hello’,n2=true;而不是var n1=10;var m=‘hello’;var n2=true;

var arr=[1,2,’a’,true];

var p1={name:’zxh’,age:18};//創建對象

10.使用文檔碎片，避免多次更新頁面。

var fragment=document.createDocumentFragment();

案例1：回車實現Tab跳轉。響應文本框的onKeyDown事件，window.event.keyCode獲得用戶點擊的keyCode。（*）keyCode和ASCII不是完全一致，主鍵盤的1和小鍵盤的1的ASCII一樣，但是keyCode不一樣。詳見備注。回車的keyCode為13，Tab的keyCode為9。if(window.event.keyCode == 13){window.event.keyCode = 9;}

只有少數的鍵才能被替換，大部分是不行的，有權限問題。

鍵盤碼與ASCII碼不一樣。

注：ascii碼說明：

8：退格鍵

46：delete

37-40： 方向鍵

48-57：小鍵盤區的數字

96-105：主鍵盤區的數字

110、190：小鍵盤區和主鍵盤區的小數點

189、109：小鍵盤區和主鍵盤區的負號

按下回車鍵，觸發click事件

案例：實現省市選擇界面。請選擇省的處理，從后向前刪。//document.getElementById(‘selCity’).innerHTML = ‘’;可刪除select中的所有option.（或者通過while+firstChild方式刪除，見備注1.）

?

練習：歌曲列表 （CheckBox+Label）全選、全不選、反選，只針對一個層中，div.getElementsByTagName("input")，再判斷type='checkbox'的項，checked="checked"。if(cb.checked==“checked”){//用調試，期望的和實際的。在js中true和false,不要用checked=“checked”或disabled=“disabled”。Js與html代碼不同。

練習：權限選擇頁面，選擇、撤回、全部選擇、全部撤回。代碼參考“實現省市選擇界面”，因為可能多選，判斷選擇項和單選的會有不同。不用寫四個方法，兩個方法就夠了。（moveAll(arg1,arg2)、moveSelected(arg1,arg2)）使用insertBefore(new,sel2.firstChilde)解決順序問題。

查找

編輯

添加

刪除

案例代碼閱讀，模擬對話框。見備注(*)先創建一個滿瀏覽器的層，設定透明度，有遮擋的效果，然后再創建一個層（ZIndex>遮擋層的ZIndex）顯示對話框內容。

點擊測試

HTML JavaScript

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。