JavaScript day05 DOM编程3

二、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,'&amp;');
			str = str.replace(/'/g,'&#39;');
			str = str.replace(/"/g,'&quot;');
			str = str.replace(/>/g,'&gt;');
			str = str.replace(/</g,'&lt;');
			str = str.replace(/ /g,'&nbsp;');
			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>&nbsp;</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>&nbsp;</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>

JavaScript day05 DOM编程3

猜你喜欢