動态建立DOM

document.write隻能在頁面加載過程中才能動态建立。

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

<head>

window.onload = function() {undefined

var div = document.getElementById("d1");

//傳回dom對象在記憶體中建立

var btn = document.createElement("input");

btn.type = "button";

btn.id = "btn1";

btn.value = "我是動态建立的";

btn.onclick = function() {undefined

alert("i'm a super button");

var txt = document.getElementById("t");

div.removeChild(txt);

}

div.appendChild(btn);

}

</script>

</head>

<body>

<div>

as<b></b>dfasdf</div>

aasdf<input id="t" type="text" />

</div>

</body>

</html>

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

innerText innerHTML value

value 擷取表單元素的值

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

示例： innerText與innerHTML差別。

<title>北京歡迎你</title>

function showInfo() {undefined

var aObj = document.getElementById('a1');

alert(aObj.innerHTML);

alert(aObj.innerText);

<a id="a1" href="#"><font color="red">傳</font>智<font color="green">播</font>客.net教育訓練</a>

<br />

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

function createlink() {undefined

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

divMain.innerHTML = "<a href='http://www.rupeng.com'>如鵬網</a>";

}

案例：點選按鈕動态增加網站清單，分兩列，第一列為網站的名字，第二列為帶網站超連結的網站名。增加三行常見網站。浏覽器相容性問題，見備注。動态産生的元素，檢視源代碼是看不到的。通過DebugBar→Dom→文檔→HTML可以看到。

var json = [{ "name": "cnblogs", "site": "http://www.cnblogs.com" },

{ "name": "cnbeta", "site": "http://www.cnbeta.com" },

{ "name": "qiushibaike", "site": "http://www.qiushibaike.com" }

];

var table = document.createElement("table");

table.border = "1";

table.width = "400px";

div.appendChild(table);

for (var i = 0; i < json.length; i++) {undefined

var site = json[i];

var row = document.createElement("tr"); //建立行

table.appendChild(row); //添加到table中

var td = document.createElement("td"); //建立td

td.innerHTML = "<a href='" + site.site + "'>" + site.name + "</a>";

row.appendChild(td);

td = document.createElement("td");

td.innerText = site.site;

}

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

function f1() {undefined

var num = document.getElementById("txt").value;

div.innerHTML = "";

for (var i = 1; i <= parseInt(num); i++) {undefined

var t = document.createElement("input");

t.type = "text";

t.value = i;

t.id = "t" + i;

div.appendChild(t);

if (i % 3 == 0) {undefined

var bt = document.createElement("br");

div.appendChild(bt);

}

<div id="d1">fdhiusahfdoiuhwiohfoi</div>

練習：無重新整理評論。

var name = document.getElementById("txtName").value;

var content = document.getElementById("txtContent").value;

var row = document.createElement("tr");

document.getElementById("tb").appendChild(row);

var td = document.createElement("td");

td.innerText = name;

row.appendChild(td);

td = document.createElement("td");

td.innerText = content;

</table>

昵稱：<input id="txtName" type="text"/><br />

浏覽器相容性問題

和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 = "<a href='" + value + "'>" + value + "</a>";

或者：（不建議）

<table id="tableLinks"><tbody></tbody></table>，然後tableLinks. tBodies[0].appendChild(tr);

例：動态建立表格

<html>

window.onload = function () {undefined

{ "name": "qiushibaike", "site": "http://www.qiushibaike.com" }];

var tb = document.createElement("table");

document.getElementById("d1").appendChild(tb);

tb.border = "1";

var row = tb.insertRow(-1);

var td = row.insertCell(-1);

td.innerHTML = site.name;

td = row.insertCell(-1);

td.innerHTML = site.site;

<body >

innerHTML還是操作Dom節點

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

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

先将頁面的HTML代碼寫好，然後調用一次innerHTML,而不要反複調用innerHTML.

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

代碼是否需要放置到onload中

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

如果js代碼中沒有操作頁面元素的語句，則可以将該代碼直接寫在<script>标簽中，

//例如：聲明變量，相加求和等操作。

//寫在這裡的代碼，由于已經是頁面的底部，在執行該代碼時，頁面的元素已經都加載完畢，是以可以不放到onload裡面也可以操作頁面上的元素。

//建議将操作頁面元素的代碼都放到onload裡面。

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 //駝峰命名法。

單獨修改控件的樣式<input type=“button” value=“AAA” οnclick=“this.style.color=‘red’” />。技巧，沒有文檔的情況下的值屬性名，随便給一個元素設定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。

var inputs = document.getElementsByTagName("input");

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

{undefined

if (inputs[i].type == "text")

{undefined

inputs[i].onblur = function () {undefined

if (this.value.length == 0) {undefined

this.style.backgroundColor = "red";

}

else {this.style.backgroundColor = "white";}

}

inputs[i].onfocus = function ()

this.style.backgroundColor = "white";

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

<title>評分控件好看版</title>

function getCurrentIndex(curTd) {

var tdArr = document.getElementById('tblVote').getElementsByTagName('td');

for (var i = 0; i < tdArr.length; i++) {

if (curTd == tdArr[i]) {

return i;

return -1;

function initialEvent() {

//為每個td設定分數

tdArr[i].setAttribute("curScore", 10 * (i + 1));

//綁定onmouseover事件

tdArr[i].onmouseover = function () {

//設定滑鼠指針為:手形

this.style.cursor = 'hand';

var tdArr = document.getElementById('tblVote').getElementsByTagName('td');

var curIndex = getCurrentIndex(this); //這裡隻能傳this參數，不能傳tdArr[i]

//将curIndex之前的五角星設定為：★

for (var j = 0; j <= curIndex; j++) {

tdArr[j].innerHTML = '★';

//将curIndex之後的五角星設定為：☆

for (var j = curIndex + 1; j < tdArr.length; j++) {

tdArr[j].innerHTML = '☆';

tdArr[i].onclick = function () { //綁定onclick事件

alert('您目前的評分為：'+this.getAttribute('curScore'));

<table id="tblVote" border="0" cellpadding="0" cellspacing="0" style="font-size: 40px;

color: Blue">

<tr>

</tr>

</table>

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

var div = document.getElementById("mv");

var links = div.getElementsByTagName("a");

for (var i = 0; i < links.length; i++) {undefined

links[i].onclick = function() {undefined

for (var i = 0; i < links.length; i++) {undefined

links[i].style.backgroundColor = "white";

this.style.backgroundColor = "red";

return false;

</div>

練習2：點選按鈕，表格隔行變色：偶數行為黃色背景，奇數行為預設顔色。通過table的getElementsByTagName取得所有的tr，依次周遊，如果是偶數就…………。

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

var rows = tb.getElementsByTagName("tr");

for (var i = 0; i < rows.length; i++) {undefined

if (i % 2 == 0) {undefined

rows[i].style.backgroundColor = "red";

else {undefined

rows[i].style.backgroundColor = "white";

var bgColor;

rows[i].onmouseover = function() {undefined

bgColor = this.style.backgroundColor;

this.style.backgroundColor = "yellow";

rows[i].onmouseout = function() {undefined

this.style.backgroundColor = bgColor;

<td>joijioijoijoijoij</td>

<td>huihoiuhihiuh</td>

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

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

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

練習5：圖檔浏覽器。動态建立控件

var json = [{ "name": "美女1", "url": "images/1.jpg" },

{ "name": "美女2", "url": "images/2.jpg" },

{ "name": "美女3", "url": "images/3.jpg" },

{ "name": "美女4", "url": "images/4.jpg" }

var div = document.getElementById("imgs");

if (json.length > 0) {undefined

var ul = document.createElement("ul");

div.appendChild(ul);

for (var i = 0; i < json.length; i++) {undefined

var li = document.createElement("li"); //生成li

ul.appendChild(li);

var link = document.createElement("a");//動态建立a

link.href = json[i].url;

link.innerHTML = json[i].name;

link.onclick = function () {undefined

var href = this.href; //擷取href

img.src = href; //擷取img标簽設定src屬性

return false; //取消後續内容的執行

li.appendChild(link);

var img = document.createElement("img");//動态生成img

div.appendChild(img);

設定div透明度

function setOpacity(ID,VALUE){undefined

E=document.getElementById(ID);

if ("\v"=="v") E.filters.alpha.opacity=1*VALUE;

else E.style.opacity=0.01*VALUE;

</script>

body{background:url(http://www.newxing.com/img/450/1.jpg) no-repeat;}

#div1{undefined

background-color:red;

color:#fff;

height:200px;

width:300px;

filter:alpha(opacity=100);/*IE*/

opacity:1;/*Mozilla*/

</style>

<div id="div1">透明層測試</div>

控制層的顯示

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

function togglediv() {undefined

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

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

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

else {undefined

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

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

案例：注冊頁面，點選“進階”CheckBox，則顯示進階選項，否則隐藏。//動态建立層，移除。

<title></title>、

div

{undefined

width:200px;

height:200px;

background-color:Red;

}

</style>

function f1(btn) {undefined

var div = document.getElementById("d");

if (div.style.display == "") {undefined

div.style.display = "none";

btn.value = "顯示";

} else {undefined

div.style.display = "";

btn.value = "隐藏";

案例：滑鼠放到超連結上的時候顯示一個圖檔或文字（放到div中。）

#d1 {undefined

width: 200px;

height: 300px;

border: solid 1px red;

display: none;

position: absolute;

var links = document.getElementsByTagName("a");

links[i].onmouseover = function () {undefined

var div = document.getElementById("d1");

div.style.top = event.clientY + "px";

div.style.left = event.clientX + "px";

div.style.display = "block";

links[i].onmouseout = function () {undefined

div.style.display = "none";

<a href="javascript:void(0)">cnbeta</a><br /><br /><br /><br />

動态設定元素的位置、大小

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

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

/*display: none;*/

var width = div.style.width;

var height = div.style.height;

div.style.width = parseInt(width) + 20 + "px";

div.style.height = parseInt(height) + 20 + "px";

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

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

window.onload = function () {

var tbObj = document.getElementById('tb');

var trObj = tbObj.insertRow(1);

var td1 = trObj.insertCell(-1);

td1.innerHTML = 'T1';

var td2 = trObj.insertCell(0);

td2.innerHTML = 't2';

document.getElementById('btn1').onclick = function () {

var iid = setInterval(function () {

var h = document.getElementById('dv1').style.height;

h = parseInt(h) - 2;

if (h < 0) {

clearInterval(iid);

document.getElementById('dv1').style.display = 'none';

} else {

document.getElementById('dv1').style.height = h + 'px';

document.getElementById('dv1').style.overflow = 'hidden';

}, 10);

};

<tr>

</tr>

</table>

IE中body的事件範圍

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

document.body.οnmοusedοwn=function(){}

document.οnmοusedοwn=function(){}

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

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

層的操作

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

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

img

position:absolute;

document.onmousemove = function () {undefined

var img = document.getElementById("i1");

img.style.top = event.clientY - 20 + "px";

img.style.left = event.clientX - 10 + "px";

//擷取标簽的自定義屬性在ie中可以直接 img.aa 但是其他浏覽器不支援

//alert(img.getAttribute("aa"));

}

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

.cls

height:300px;

border:1px solid red;

var div = document.createElement("div");

div.id = "d1";

div.className = "cls";

div.innerHTML = "詳細内容";

document.body.appendChild(div);

};

if (div) {undefined

document.body.removeChild(div);

<a href="">baidu</a>

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

var slideShowIntervalId;

function slideShow() {undefined

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

var hasChange = false;

var oldWidth = parseInt(testDiv.style.width, 10);

var oldHeight = parseInt(testDiv.style.height, 10);

if (oldWidth <= 200) {undefined

testDiv.style.width = (oldWidth + 10) + "px";

hasChange = true;

if (oldHeight <= 20) {undefined

testDiv.style.height = (oldHeight + 1) + "px";

if (!hasChange) {undefined

clearInterval(slideShowIntervalId);

<div id="testDiv" style="position:absolute;width:0px;height:0px;top:100px;height:100px;border-color:Green;border-style:dotted;border-width:1px;">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈愛好哈哈哈哈哈哈哈哈哈哈哈哈哈</div>

問題

易錯：不要寫成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(“<input type=‘button’ value=‘hello’/>”)快速建立元素，并且指派，但是注意設定的inner部分不會被設定var link = document.createElement(“<a href=‘

http://www.baidu.com

’>百度</a>”)（“百度”二字寫不進去）

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

案例練習

練習1：點選【登入】按鈕，彈出一個顯示使用者名、密碼等的層。将使用者名、密碼等寫到一個層中，層預設是隐藏的，點選【登入】超連結以後将層顯示出來，如果點選層中的關閉按鈕，則隐藏層。絕對定位，顯示到中間位置。document.body.clientWidth(擷取頁面的width)//高度，注意body的預設範圍。（去掉<doc type）；margin:0 auto;。

#login {undefined

width:300px;

height:150px;

border:1px solid red;

position:absolute;

display:none;

function show()

var div = document.getElementById("login");

div.style.display = "block";

var x = (document.documentElement.clientWidth - div.clientWidth) / 2;

var y = (document.documentElement.clientHeight - div.clientHeight) / 2;

div.style.top = y + 'px';

div.style.left = x + "px";

function hide()

var div =document.getElementById("login");

if (div)

div.style.display="none";

function f1()

if (div && div.style.display == "block")

show();

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

#tooltip

width:500px;

height:600px;

border:solid 1px red;

var json = { "1.jpg": { "name": "西施", "height": 170, "weight": 50 },"2.jpg": { "name": "蒼老師", "height": 156, "weight": 60 },"4.jpg": { "name": "郭老師", "height": 160, "weight": 100 }

for (var key in json) {undefined

//動态生成小圖檔

var img = document.createElement("img");

img.src = "images/" + key;

img.setAttribute("width", 100);

//img動态生成的時候預設把圖檔原始的高寬設定了。

//移除 img标簽的height屬性

img.removeAttribute("height");

img.style.marginLeft = "10px";

img.setAttribute("name", json[key].name);

img.setAttribute("a1", json[key].height);

img.setAttribute("weight", json[key].weight);

//注冊小圖的事件

img.onmouseover = function () {undefined

//滑鼠放上建立詳細層

div.id = "tooltip";

document.body.appendChild(div);

var img = document.createElement("img");

img.src = this.src;

img.setAttribute("width", 200);

//img動态生成的時候預設把圖檔原始的高寬設定了

//移除 img标簽的height屬性

img.removeAttribute("height");

div.appendChild(img);

var p = document.createElement("p");

p.innerHTML = "姓名:" + this.getAttribute("name") + "<br />";

p.innerHTML += "身高:" + this.getAttribute("a1") + "<br />";

p.innerHTML += "體重:" + this.getAttribute("weight") + "<br />";

div.appendChild(p);

img.onmouseout = function () {undefined

var div = document.getElementById("tooltip");

作業：評分控件V2。用一個單行5列的Table，td中預設都是starEmpty.jpg這個圖檔。監聽td的mouseover事件，滑鼠在一個td的時候将這個td及之前的td的内容換成starFill.jpg這個圖檔。滑鼠在評分控件上的時候顯示超連結形式的滑鼠圖示。擷取td中的img見備注3。

var tb = document.getElementById("rating");

//找的是所有td。子td 子子td 。。。。

var tds = tb.getElementsByTagName("td");

for (var i = 0; i < tds.length; i++) {undefined

//children 擷取元素節點（标簽）

tds[i].children[0].src = "starFill.jpg";

//alert(tds[i].childNodes[0].nodeType);

//如果是其它浏覽器childNodes會擷取空白節點，ie會忽略空白節點

//tds[i].childNodes[0].src = "starFill.jpg";

案例：注冊頁面，點選“進階”CheckBox，則顯示進階選項，否則隐藏

練習：界面上有幾個球隊名字的清單，将滑鼠放到球隊名字上就變為紅色背景，其他球隊背景顔色為白色，點選一個球隊的時候就将點選的球隊變為fontSize=30字型(fontSize=‘’回到預設)。Ul→li

var ul = document.getElementById("mv");

var lists = ul.getElementsByTagName("li");

for (var i = 0; i < lists.length; i++) {undefined

lists[i].style.cursor = "pointer";

lists[i].onclick = function ()

for (var j= 0; j < lists.length; j++)

{undefined

lists[j].style.fontSize = "";

lists[j].style.backgroundColor = "white";

this.style.fontSize = "30px";

</ul>

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

setInterval(function () {undefined

var date = new Date();

var hour = date.getHours();

var minute = date.getMinutes();

var sec = date.getSeconds();

div.innerHTML = check(hour) +":"+ check(minute) +":"+ check(sec);

},1000

);

function check(num)

return num<10?"0"+num:num;

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

var t = document.getElementById("txt");

t.onfocus = function () {undefined

if (this.value == "請輸入搜尋關鍵字") {undefined

this.value = "";

this.style.color = "black";

t.onblur = function () {undefined

if (this.value.length == 0 || this.value == "請輸入搜尋關鍵字") {undefined

this.value = "請輸入搜尋關鍵字";

this.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即可取消送出

例：

//btn.click();

//winform中類似的操作

//btn.performClick();

//表單自動送出form.submit();

var form = document.getElementById("f1");

//判斷文本框的值是否為空

if (checkInput()) {undefined

form.submit();

function checkInput() {undefined

var name = document.getElementById("txt").value;

if (name.length == 0) {undefined

alert("請輸入使用者名");

document.getElementById("txt").focus();

return false;

return true;

//onsubmit 隻有當點選submit按鈕的時候才會觸發

// 調用表單的submit()方法不會觸發表單的onsubmit事件

</form>

不同浏覽器的差異

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

不同浏覽器中對DOM支援的方法不一樣

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

使用Dom擷取和更改網頁标簽元素内文本：在IE裡使用innerText ；在FireFox裡使用textContent

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

http://www.360doc.com/content/09/0319/12/16915_2855107.shtml

。

不同浏覽器中對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("[email protected]"));

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 = "[email protected]";

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位址框顔色為白色，啟用注冊按鈕。

var t = document.getElementById("txtMail");

var reg = /\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;

if (!reg.test(this.value)) {undefined

document.getElementById("btn").disabled = true;

this.style.backgroundColor = "white";

document.getElementById("btn").disabled = false;

練習：模拟Trim()方法

var str = ' aaaaaaaaaaa ';

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

function exTrim(s) {undefined

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

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

String.prototype.trim = function () {undefined

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

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

練習：評估密碼強度。

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

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

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

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

.left

width:80px;

text-align:right;

#pwdStrong td

width:30px;

background-color:Gray;

text-align:center;

var txt = document.getElementById("txtPwd");

txt.onkeyup = function () {undefined

var t = this.value;

var table = document.getElementById("pwdStrong");

var tds = table.getElementsByTagName("td");

var num = getLevel(t);

if (num == 1 || num ==0) {undefined

//弱密碼

tds[0].style.backgroundColor = "red";

tds[1].style.backgroundColor = "gray";

tds[2].style.backgroundColor = "gray";

else if (num == 2) {undefined

tds[1].style.backgroundColor = "red";

else if (num == 3) {undefined

tds[2].style.backgroundColor = "red";

tds[0].style.backgroundColor = "gray";

///擷取密碼強度

function getLevel(v) {undefined

var num = 0;

var reg = /\d/;

if (reg.test(v)) {undefined

num++;

reg = /[a-zA-Z]/;

reg = /[^0-9a-zA-Z]/;

if (v.length < 6) {undefined

num--;

return num;

<table>

<tr>

<td>

<tr>

</tr>

</table>

</td>

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<xxx.length而要用一個變量來代替，i<len。因為循環條件每次都會執行，這樣的話每次都會計算xxx.length。

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：小鍵盤區和主鍵盤區的負号

document.onkeydown = function () {undefined

if (event.keyCode == 13) {undefined

event.keyCode = 9;

}

</body>

按下Enter鍵，觸發click事件

if (event.keyCode == 13) {undefined

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

btn.click();

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

var data = { "山東": ["濟南", "青島", "濰坊"], "河北": ["石家莊", "廊坊", "保定"], "河南": ["鄭州", "南陽", "三門峽"] };

loadProv();

prov_change()

function loadProv() {undefined

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

for (var key in data) {undefined

var option = document.createElement("option");

option.value = key;

option.innerText = key;

prov.appendChild(option);

function prov_change() {undefined

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

//清除舊資料

for (var i = city.childNodes.length - 1; i >= 0; i--) {undefined

city.removeChild(city.childNodes[i]);

var cities = data[prov.value];

for (var i = 0; i < cities.length; i++) {undefined

option.innerText = cities[i];

city.appendChild(option);

練習：歌曲清單（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)解決順序問題。

function move(all,sel) {

//選中的option

for (var i = all.children.length-1; i>=0 ; i--) {undefined

if (all.children[i].selected) {undefined

//appendChild 把頁面上的元素進行移動

var op = all.children[i];

op.selected = false;

//把op插入到select 中的第一個元素之前

sel.insertBefore(op, sel.firstChild);

</select>

<input type="button" value=">" οnclick="move(document.getElementById('all'),document.getElementById('sel'))" />

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

function sAlert(str) {undefined

var msgw, msgh, bordercolor;

msgw = 300; //提示視窗的寬度

msgh = 200; //提示視窗的高度

titleheight = 25 //提示視窗标題高度

bordercolor = "#FF3C00"; //提示視窗的邊框顔色

titlecolor = "#D2CECE"; //提示視窗的标題顔色

var sWidth, sHeight;

//sWidth=document.body.offsetWidth; //得出目前螢幕的寬

sWidth = document.body.clientWidth; //BODY對象寬度

//sHeight=screen.height;//得到目前螢幕的高

//sHeight=document.body.clientHeight;//BODY對象高度

if (window.innerHeight && window.scrollMaxY) {undefined

sHeight = window.innerHeight + window.scrollMaxY;

else if (document.body.scrollHeight > document.body.offsetHeight) {undefined

sHeight = document.body.scrollHeight;

else {undefined

sHeight = document.body.offsetHeight;

} //以上得到整個螢幕的高

var bgObj = document.createElement("div"); //建立一個div對象

bgObj.setAttribute('id', 'bgDiv'); //可以用bgObj.id="bgDiv"的方法，是為div指定屬性值

bgObj.style.position = "absolute"; //把bgDiv這個div絕對定位

bgObj.style.top = "0"; //頂部為0

bgObj.style.background = "#777"; //背景顔色

bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)"; //ie浏覽器透明度設定

bgObj.style.opacity = "0.6"; //透明度(火狐浏覽器中)

bgObj.style.left = "0"; //左邊為0

bgObj.style.width = sWidth + "px"; //寬(上面得到的螢幕寬度)

bgObj.style.height = sHeight + "px"; //高(上面得到的螢幕高度)

bgObj.style.zIndex = "100"; //層的z軸位置

document.body.appendChild(bgObj);

var msgObj = document.createElement("div")//建立一個div對象

msgObj.setAttribute("id", "msgDiv"); //可以用bgObj.id="msgDiv"的方法，是為div指定屬性值

msgObj.setAttribute("align", "center"); //為div的align指派

msgObj.style.background = "white"; //背景顔色為白色

msgObj.style.border = "1px solid " + bordercolor; //邊框屬性，顔色在上面已經指派

msgObj.style.position = "absolute"; //絕對定位

msgObj.style.left = "35%"; //從左側開始位置

msgObj.style.top = "30%"; //從上部開始位置

msgObj.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif"; //字型屬性

//msgObj.style.marginLeft = "-225px";//左外邊距

//msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";//上外邊距

msgObj.style.width = msgw + "px"; //提示框的寬(上面定義過)

msgObj.style.height = msgh + "px"; //提示框的高(上面定義過)

msgObj.style.textAlign = "center"; //文本位置屬性，居中。

msgObj.style.lineHeight = "25px"; //行間距

msgObj.style.zIndex = "101"; //層的z軸位置

var title = document.createElement("h4"); //建立一個h4對象

title.setAttribute("id", "msgTitle"); //為h4對象填加标題

title.setAttribute("align", "right"); //文字對齊方式

title.style.margin = "0"; //浮動

title.style.padding = "3px"; //浮動

title.style.background = titlecolor; //背景顔色

title.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";

title.style.opacity = "0.75"; //透明

//title.style.border="1px solid " + bordercolor;//邊框

title.style.height = "25px"; //高度

title.style.font = "12px Verdana, Geneva, Arial, Helvetica, sans-serif"; //字型屬性

title.style.color = "white"; //文字顔色

title.style.cursor = "pointer"; //滑鼠樣式

title.innerHTML = "<a href=\"#\">關閉</a>"; //顯示的文字

title.onclick = function () {undefined

document.body.removeChild(bgObj); //移除遮罩層

document.getElementById("msgDiv").removeChild(title); //在提示框中移除标題

document.body.removeChild(msgObj); //移除提示框

document.body.appendChild(msgObj); //在body中畫出提示框層

document.getElementById("msgDiv").appendChild(title); //在提示框中增加标題

var txt = document.createElement("p");

txt.style.margin = "1em 0"; //文本浮動

txt.setAttribute("id", "msgTxt"); //為p屬性增加id屬性

txt.innerHTML = str; //把傳進來的值賦給p屬性

document.getElementById("msgDiv").appendChild(txt); //把p屬性增加到提示框裡

}

</script>

<a href="#" οnclick="sAlert('<a href=http://www.it300.net>測試效果</a>');return false;">點選測試</a>

</html

JavaScript動态建立DOM（七）動态建立DOM

動态建立DOM

繼續閱讀

if(a==1 && a==2 && a==3) 結果為 true，怎麼做到的？打破你的認知！

谷歌浏覽器開啟JavaScript

網站安全防護之被惡意跳轉博彩木馬排查

如何修改vue項目運作的端口号配置檔案修改端口号啟動指令設定端口号（存疑）

JavaScript中==和===的差別嚴格運算符的運算規則相等運算符的運算規則不相等運算符的缺點

在終端裡停止vue-cli項目

JavaScript優化

vue中的better-scroll橫向滾動案例

用vue腳手架寫的簡易留言闆

關于vue腳手架的介紹、安裝及建立項目

ToDolist案例源碼

vue元件傳值的概括圖

vue元件寫的簡易移動頁面

vue中$refs、$emit、$on的使用場景

vue中拆分封裝axios

js中本人對于四種資料類型判斷的了解