JavaScript day05 DOM程式設計3
阿新 • • 發佈：2018-11-19
二、HTML DOM
1.選取物件
Element document.getElementById(string id)
說明:根據ID獲取文件中唯一的HTML元素
NodeList document.getElementsByTagName(string tagName)
說明:獲取文件中由指定的標記組成的集合(陣列)
NodeList Element.getElementsByTagName(string tagName)
說明:獲取元素中由指定的標記組成的集合(陣列)
NodeList document.getElementsByName(string name)
說明:獲取文件中由name屬性相同的標記組成的集合(陣列) – 針對表單元素使用
2.屬性控制
A.對於單個單詞的HTML標記屬性即HTML DOM物件屬性;
B.對於合成詞的HTML標記屬性(如table標記的cellpading、cellspacing屬性)在HTML DOM程式設計時,採用"駝峰標記法"命名(如cellPadding、cellSpacing)
C.對於HTML標記的class屬性,在HTML DOM程式設計時使用className取代;
(因為class是ECMAScript中的關鍵字)
D.對於HTML標記的布林屬性(如單/複選框的checked、列表項的selected屬性)在HTML DOM程式設計時採用boolean型別表示;
E.在HTML DOM程式設計時,某些HTMLDOM物件有自己特有的屬性/方法;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML DOM</title> <script> function validateForm(){ //1.使用者名稱為必填項 //1.1獲取"使用者名稱文字框"物件 var usernameEle = document.getElementById('username'); //1.2獲取"使用者名稱文字框"物件的值 var usernameEleVal = entities(usernameEle.value); //1.3根據"使用者名稱文字框"物件的值的長度來判斷是否已進行填寫 if(usernameEleVal.length == 0){ window.alert('使用者名稱為必填項'); //讓"使用者名稱文字框"物件獲取焦點 usernameEle.focus(); return false; } //2.密碼為必填項 var passwordEle = document.getElementById('password'); var passwordEleVal = entities(passwordEle.value); if(passwordEleVal.length == 0){ window.alert('密碼為必填項'); passwordEle.focus(); return false; } //3.兩次密碼必須一致 //3.1獲取"確認密碼"物件 var passwordEle2 = document.getElementById('password2') ; //"確認密碼"的值 var passwordEleVal2 = entities(passwordEle2.value); //如果兩次密碼不一致 if(passwordEleVal != passwordEleVal2){ window.alert('兩次密碼不一致'); passwordEle2.focus(); return false; } } //將使用者名稱/密碼/確認密碼中的特殊符號替換為對應的HTML實體 //以防止SQL注入的產生 function entities(str){ str = str.replace(/&/g,'&'); str = str.replace(/'/g,'''); str = str.replace(/"/g,'"'); str = str.replace(/>/g,'>'); str = str.replace(/</g,'<'); str = str.replace(/ /g,' '); return str; } </script> </head> <body> <form action="11.php" method="post" onsubmit="return validateForm()"> <table width="600" border="1" cellpadding="10" cellspacing="0"> <tr> <td>使用者名稱</td> <td><input type="text" name="username" id="username"></td> </tr> <tr> <td>密碼</td> <td><input type="password" name="password" id="password"></td> </tr> <tr> <td>確認密碼</td> <td><input type="password" name="password2" id="password2"></td> </tr> <tr> <td> </td> <td><input type="submit" value="免費註冊"></td> </tr> </table> </form> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML DOM</title>
<script>
//全國的省份形成的陣列
var proArr = [];
//北京的區/市形成的陣列
proArr[0] = ['東城區','西城區','朝陽區','豐臺區','石景山區','海淀區','門頭溝區','房山區','通州區','順義區','昌平區','大興區'];
//上海的區/市形成的陣列
proArr[1] = ['虹口區','普陀區','靜安區','長寧區','徐彙區','黃浦區','金山區','浦東新區','嘉定區','寶山區','閔行區','楊浦區'];
//天津的區/市形成的陣列
proArr[2] = ['寶坻區','武清區','北辰區','津南區','西青區','東麗區','紅橋區','河北區','南開區','河西區','河東區','和平區'];
//河北的區/市形成的陣列
proArr[3] = ['廊坊市','滄州市','承德市','張家口市','保定市','邢臺市','邯鄲市','秦皇島市','唐山市','石家莊市'];
//河南的區/市形成的陣列
proArr[4] = ['鄭州市 ','開封市','洛陽市','平頂山市'];
function changeCity(){
//1.獲取省份列表框物件
var proEle = document.getElementById('provinces');
//2.獲取被選定的省份的值
var proVal =proEle.value;
//3.獲取城市列表框物件
var cityEle = document.getElementById('cities');
//4.在每次新增option物件前,"清空"以前的option列表
cityEle.length = 1;
//5.根據省份的值，然後動態的在城市列表框中新增選項(option)
proArr[proVal].forEach(function(value,index){
//建立option物件
var optEle = new Option(value,index);
//將option物件新增到城市列表框物件內
cityEle.add(optEle);
});
}
</script>
</head>
<body onload="changeCity()">
<form action="" method="post">
<table width="600" border="1" cellpadding="10" cellspacing="0">
<tr>
<td width="120">省份</td>
<td>
<select name="provinces" id="provinces" onchange="changeCity()">
<option value="0">北京市</option>
<option value="1">上海市</option>
<option value="2">天津市</option>
<option value="3">河北省</option>
<option value="4">河南省</option>
</select>
</td>
</tr>
<tr>
<td>城市</td>
<td>
<select name="cities" id="cities">
<option value="0">請選擇...</option>
</select>
</td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="確認"></td>
</tr>
</table>
</form>
</body>
</html>
F.HTML標記的style屬性在HTML DOM程式設計時形成CSSStyleDeclaration/CSS2Properties物件;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML DOM</title>
<script>
function getStyle(){
var pEle = document.getElementById('p');
window.alert(pEle.style);
}
</script>
</head>
<body>
<p style="color:red" id="p">中國</p>
<input type="button" value="單擊我,獲取段落物件的style屬性" onclick="getStyle()">
</body>
</html>
控制HTMLDOM物件的行內樣式的語法是:
object.style.CSS屬性名稱
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML DOM</title>
<script>
function setInlineStyle(){
//獲取DIV物件
var divEle = document.getElementById('wrapper');
//設定DIV物件的行內樣式(單個單詞)
divEle.style.width = '300px';
divEle.style.height = '200px';
divEle.style.margin = '0 auto';
divEle.style.border ='1px solid #000';
//設定DIV物件的行內樣式
divEle.style.fontSize = '24px';
divEle.style.textAlign = 'center';
divEle.style.fontFamily = 'Microsoft Yahei';
}
</script>
</head>
<body>
<div id="wrapper">中國</div>
<input type="button" value="單擊我,控制DIV的行內樣式" onclick="setInlineStyle()">
</body>
</html>