二、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>