JavaScript —— DOM模型

1.DOM节点

2. DOM方法和属性

2.1 方法

DOM模型，即文档对象模型，允许成需和脚本动态的访问和更新文档的内容、结构和样式。

定义了所有HTML元素的对象、属性以及访问他们的方法。

是关于如何获取、修改、添加或删除HTML元素的标准。

1.DOM节点

DOM是被视为节点树的HTML

DOM中的所有事物都是节点
- HTML 文档中的所有内容都是节点
  - 整个文档是一个文档节点
  - 每个 HTML 元素是元素节点
  - HTML 元素内的文本是文本节点
  - 每个 HTML 属性是属性节点
  - 注释是注释节点
HTML DOM将HTML文档视为树结构 —— 节点树
- 节点树种的节点拥有层级关系（parent、child、sibling等）
- 顶端节点称为根
- 除了根，其余节点都有父节点

2. DOM方法和属性

2.1 方法

能够执行的动作（添加、修改元素）

常用方法
- getElementById(id) - 获取带有指定 id 的节点（元素）
- appendChild(node) - 插入新的子节点（元素）
- removeChild(node) - 删除子节点（元素）
2.2 属性

能够获取或设置的值

常用属性
- innerHTML - 节点（元素）的文本值
- parentNode - 节点（元素）的父节点
- childNodes - 节点（元素）的子节点
- attributes - 节点（元素）的属性节点
- first/lastChild - 第一个/最后一个子节点
- next/previousSibling - 下一个/上一个兄弟节点
2.2.1 innerHTML属性

用于获取或替换任意HTML元素的内容

2.2.2 nodeName属性

规定节点的名称

注意
- nodeName 是只读的
- 元素节点的 nodeName 与标签名相同
- 属性节点的 nodeName 与属性名相同
- 文本节点的 nodeName 始终是 #text
- 文档节点的 nodeName 始终是 #document
2.2.3 nodeValue属性

规定节点的值

注意
- 元素节点的 nodeValue 是 undeﬁned 或 null
- 文本节点的 nodeValue 是文本本身
- 属性节点的 nodeValue 是属性值
2.2.4 nodeType属性

返回节点的类型，是只读的。

节点类型
- html标签对象：nodeType=1
- 属性：nodeType=2
- 文本（空格、换行等）：nodeType=3
- html注释：nodeType=8
- 文档：nodeType=9

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form>
			<a href="#">超链接</a><!--comments--><input type="text" />
			<input type="button" />
		</form>
		<form>	
			<a href="#">超链接</a><input type="button" /><br />
			<input type="button" value="添加" />
		</form>
	</body>
	<script>
		var aitem=document.links[0];
		alert(aitem.nodeName);
		//获取父节点
		var pareitem=aitem.parentNode;
		alert(pareitem.nodeName);
		//获取所有子节点
		var childitems=pareitem.childNodes;
		for(var i=0;i<childitems.length;i++){
			if(childitems[i].nodeType==1){
				document.write(childitems[i].nodeName+",节点类型是:"
				+childitems[i].nodeType+"<br />") ;
			}
		}
		//需求：获取第一个字节点对象
		var a  = aitem.firstChild ;
		alert(a.nodeName) ;
		//获取最后一个子节点
		var input = aitem.lastChild ;
		alert(input.nodeName) ;

		//获取当前页面中的第二个a标签对象
		var aNode = document.links[1] ;
		alert(aNode.nodeName) ;
		//获取他的下一个兄弟节点
		var broNode=aNode.nextSibling;
		alert(broNode.nodeName) ;
		//通过broNode对象获取上一个兄弟节点
		var pre=broNode.previousSibling;
		alert(pre.nodeName) ;
	</script>
</html>

3. DOM访问

即查找HTML元素，等同于访问节点。

访问方式
- getElementById("id属性值")：返回带有指定ID的元素（id属性值必须在同一个页面中唯一）
- getElementsByName("name属性值") ：返回带有指定标签名的所有标签对象集合（ name属性值可以同名）
- getElementsByClassName("class属性值") ：返回带有相同类型的所有HTML元素（class属性值可以同名）
- getElementsByTagName("元素名称") ：返回带有指定名称的节点列表（当一个标签没有id、name、class属性时使用）
- 通过document集合属性获取标签对象
  - document.all：获取当前页面中的所有的标签对象
  - document.images：获取当前页面中所有的img标签对象
  - document.links：通常如果没有指定area标签,都是获取当前页面的a标签对象
  - document.forms：获取当前页面中所有的form标签对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>document访问标签对象</title>
	</head>
	<body>
		<a href="#">超链接</a>
		<img src="img/2.jpg "/>
		<form>
			<input id="aid"  type="text" onblur="getTextValue()" /><br />
			<input class="inp"  type="text" onblur="getTextValue1()" /><br />
			<input name="in" type="text" onblur="getTextValue2()" /><br />
			<input type="text" onblur="getTextValue3()" />
		</form>
	</body>
	<script>
		function getTextValue(){
			alert(document.getElementById("aid").value);//.value 获取文本框输入的内容
		}
		function getTextValue1(){
			alert(document.getElementsByClassName("inp")[0].value);
		}
		function getTextValue2(){
			alert(document.getElementsByName("in")[0].value);
		}
			function getTextValue3(){
			alert(document.getElementsByTagName("input")[3].value);
		}
		var itemlist=document.all;
		var itemlist1=document.images;
		var itemlist2=document.links;
		var itemlist3=document.forms;
		for(var i=0;i<itemlist.length;i++){
			alert(itemlist[i].nodeName);
		}
		alert("document.images");
		for(var i=0;i<itemlist1.length;i++){
			alert(itemlist1[i].nodeName);
		}
		alert("document.links");
		for(var i=0;i<itemlist2.length;i++){
			alert(itemlist2[i].nodeName);
		}
		alert("document.forms");
		for(var i=0;i<itemlist3.length;i++){
			alert(itemlist3[i].nodeName);
		}
	</script>
</html>

4. DOM修改

使用childNodes和nodeValue属性来获取元素的内容
使用innerHTML属性改变HTML内容
通过DOM访问HTML元素的样式对象以及属性，并进行修改（setAttribute("属性名称","属性值")）
创建一个元素节点（createElement() ）并将其追加（appendChild()）到已有的元素上
再父元素前添加子元素（ insertBefore()）
通过remove()删除一个元素
替换DOM中的元素（replaceChild()）
删除父节点对象中的最后一个子节点（removeChild()）

属性更改：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>属性更改</title>
	</head>
	<body>
		<!--使用innerHTML替换内容-->
		<span id="vocu">bonjour</span><br />
		
		<!--图片的切换-->
		<img src="img/2.jpg" />
		<input type="button" value="切换" onclick="change()" /><br />
		<!--
			图片的隐藏与复现
				none 隐藏  block 显示
		-->
		<input type="button" value="隐藏" onclick="hide()"/><br />
		<input type="button" value="复现" onclick="show()"/><br />
		
		<!--
			复选框
			checked记录是否选中
				true、false记录状态
		-->
		<input type="checkbox" value="全选" onclick="selectAll(this)" />全选<br />
		<input type="checkbox" value="英语" name="language">英语<br />
		<input type="checkbox" value="中文" name="language">中文<br />
		<input type="checkbox" value="法语" name="language">法语<br />
	</body>
	<script>
		var vocu=document.getElementById("vocu");
		vocu.innerHTML="<h2>替换后为:amour</h2>";
	
		var item=document.getElementsByTagName("img")[0];
		function change(){
			item.src="img/3.jpg"
		}
		function hide(){
			item.style.display="none";
		}
		function show(){
			item.style.display="block";
		}
	
		function selectAll(obj){
			var statement=obj.checked;
			var itemlists=document.getElementsByName("language");
			for(var i=0;i<itemlists.length;i++){
				itemlists[i].checked=statement;
			}
		}
	</script>
</html>

获取并添加元素：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>获取并添加</title>
	</head>
	<body>
		<input type="button" value="向后追加按钮"  onclick="addItem()"/>
		<input type="button" value="按钮前插入"  onclick="insert()"/>
		<input type="button" value="从后删除" onclick="delItem()" /><br />
		<input type="button" id="btn" value="按钮" />
	</body>
	<script>
		function addItem(){
			var input=document.createElement("input");
			input.setAttribute("type","button");
			input.setAttribute("value","新按钮");
			input.setAttribute("name","button")
			var item=document.getElementsByTagName("body")[0];
			item.appendChild(input);
		}
		function insert(){
			var input=document.createElement("input");
			input.setAttribute("type","button");
			input.setAttribute("value","新按钮");
			var item=document.getElementById("btn");
			var bodyNode=document.getElementsByTagName("body")[0]
			bodyNode.insertBefore(input,item);
		}
		function delItem(){
			var bodyNode=document.getElementsByTagName("body")[0]
			var last=bodyNode.lastChild;
			bodyNode.removeChild(last);
		}
	</script>
</html>

5. DOM导航

节点列表相当于一个节点数组，可以通过下标获取特定的节点。
length属性可以来获取节点列表中节点的数量。
可以使用parentNode、firstChild以及lastChild三个节点属性在文档结构中进行导航。

6. 事件

6.1 事件编程三要素
- 事件源：点击的按钮
- 编写事件监听器：所要执行的逻辑函数
- 注册事件监听器：将事件源与函数进行绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件</title>
<script>
	//2)编写事件监听器
	function test(){
		
		alert("触发点击事件") ;
	}
</script>
	</head>
	<body>
<!--1)事件源-->
<input type="button" value="点我试试" onclick="test()" /><!--3)注册时间监听器-->
	</body>
</html>

6.2 事件分类
- 点击相关的事件
  - 单击完成：onclick
  - 双击完成：ondbclick
  - 被点击：onmousedown
  - 被松开：onmouseup
- 键盘相关的事件
  - 键盘抬起事件： onkeyup
  - 键盘按下事件：onkeypress
- 焦点相关的事件(应用场景:表单验证)
  - 获取焦点：onfocus
  - 失去焦点：onblur
- 选项卡发生变化的事件
  - 输入字段的验证：onchange
- 鼠标相关的事件
  - 鼠标经过元素：onmouseover
  - 鼠标离开元素：onmouseout
- 页面加载相关事件: (页面载入事件)
  - 用户进入页面时触发：onload（会在body内容加载完毕后立即执行）
  - 用户离开页面时触发：onunload

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件的分类</title>
		<!--显示出div区域-->
		<style>
			#div{
				width: 200px;
				height: 100px;
				border:2px solid plum;
			}
		</style>
		<script>
			function oneclick(){
				alert("单击")
			}
			function dbclick(){
				alert("双击");
			}
			function up(){
				alert("松开鼠标");
			}
			function down(){
				var mouse=document.getElementById("mouse");
				mouse.innerHTML="被点击";
			}
			//获取焦点事件
			function isFocus(){
				var input=document.getElementById("name");
				input.value="";
			}
			//失去焦点事件
			function isBlur(){
				var name=document.getElementById("name").value;
				var tip=document.getElementById("tip");
				if(name=="mary"){
					tip.innerHTML="用户名重复，请重新输入！".fontcolor("red");
				}else{
					tip.innerHTML="用户名可用".fontcolor("green");
				}
			}
			function select(){
				var country=document.getElementById("country").value;
				var city=document.getElementById("city");
				city.innerHTML="";
				
				if(country=="中国"){
					var arr=["陕西","重庆","成都","武汉"];
					for(var i=0;i<arr.length;i++){
						city.innerHTML+= "<option value='"+arr[i]+"'>"+arr[i]+"</option>"
					}
				}				
				if(country=="法国"){
					var arr=["里昂","蒙彼利埃","巴黎","尼斯"];
					for(var i=0;i<arr.length;i++){
						city.innerHTML+= "<option value='"+arr[i]+"'>"+arr[i]+"</option>"
					}
				}
				if(country=="美国"){
					var arr=["纽约","洛杉矶","费城","曼哈顿"];
					for(var i=0;i<arr.length;i++){
						city.innerHTML+= "<option value='"+arr[i]+"'>"+arr[i]+"</option>"
					}
				}
			}
			function mouseOver(){
				alert("mouseOver");
			}
			function mouseOut(){
				alert("mouseout");
			}
			function init(){
				alert("页面载入");
			}
		</script>
	</head>
	<body onload="init()">
		<input type="button" value="单击" onclick="oneclick()"  />
		<input type="button" value="点击" onmousedown="down()" onmouseup="up()" />
		<span id="mouse"></span><br />
		<input type="button" value="双击" ondblclick="dbclick()" /><br />
		用户名：<input type="text" name="username" id="name" 
				 onblur="isBlur()" value="请输入用户名" onfocus="isFocus()" />
		<span id="tip"></span><br />
		籍贯：
		<select id="country" onchange="select()">
			<option value="请选择">请选择</option>
			<option value="中国">中国</option>
			<option value="法国">法国</option>
			<option value="美国">美国</option>
		</select>
		<select id="city"></select><br /><br /><br />
		<div id="div" onmouseover="mouseOver()" onmouseout="mouseOut()">div</div>
	</body>
</html>

7. 正则表达式

语法
- 预定义字符
  - [a-zA-Z]:大小写字母
  - [a-zA-Z0-9]:数字或者字母
  - [0-9]:数字
- 转义字符
  - \. ：表示. 必须转义
- 数量词
  - X+: X字符出现1次或多次
  - X*:X 字符出现0次或多次
  - X?:X字符出现0次或1次
  - X{n}:X字符恰好出现n次
  - X{n,}:X字符至少出现n次
  - X{n,m}:X字符至少出现n次,但不超过m次
- 正则表达式格式:
  - var reg = /正则语法/ ;
- 内置方法
  - reg.test(var str) 查看用户输入的内容是否和当前规定的正则表达式匹配
  - 返回true,匹配成功;否则,匹配失败
- JavaScript是一个弱类型语言，正则表达式中只要含有符合字符串中的部分内容就可以匹配成功（部分匹配）
  - 若想像Java中的正则表达式精确匹配，必须定义边界匹配符号
    - ^:以...开始
    - $:以...结束

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>正则表达式</title>
		<script>
			var str="123";
			var reg=/^[0-9]{3}$/
			if(reg.test(str)){
				alert("符合");
			}else{
				alert("不符合");
			}
		</script>
	</head>
	<body>
	</body>
</html>

表单验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单验证</title>
	</head>
	<!--
		定义正则规则:
		用户名:由4~14位的数字或者字母
		密码:由6~16位的数字或字母组成
		确认密码:和密码内容一致
		邮箱:数字或者字母@数字或者字母.(com.cn/.com/.cn...)
	-->
	<script>
		//校验用户名
		function checkUserName(){
			var username=document.getElementById("username").value;
			var namespan=document.getElementById("name_span");
			var reg=/^[a-zA-Z0-9]{4,14}$/;
			if(reg.test(username)){
				namespan.innerHTML="该用户名可用".fontcolor("green");
				return true;
			}else{
				namespan.innerHTML="该用户名不可用".fontcolor("red");
				return false;
			}
		}
		//校验密码
		function checkPwd(){
			var pwd=document.getElementById("pwd").value;
			var pwdspan=document.getElementById("pwd_span");
			var reg=/^[a-zA-Z0-9]{6,16}$/;
			if(reg.test(pwd)){
				pwdspan.innerHTML="密码可用".fontcolor("green");
				return true;
			}else{
				pwdspan.innerHTML="密码不可用".fontcolor("red");
				return false;
			}
		}
		//校验确认密码
		function checkRePwd(){
			var pwd=document.getElementById("pwd").value;
			var repwd=document.getElementById("repwd").value;
			var repwdspan=document.getElementById("repwd_span");
			if(pwd==repwd){
				repwdspan.innerHTML="密码校验成功".fontcolor("green");
				return true;
			}else{
				repwdspan.innerHTML="确认密码有误".fontcolor("red");
				return false;
			}
		}
		//校验邮箱
		function checkEmail(){
			var email=document.getElementById("email").value;
			var emailspan=document.getElementById("email_span");
			var reg=/^[a-zA-Z0-9]+@[a-zA-Z0-9]+(\.[a-zA-Z]{2,3}){1,2}$/;
			if(reg.test(email)){
				emailspan.innerHTML="邮箱格式正确".fontcolor("green");
				return true;
			}else{
				emailspan.innerHTML="邮箱格式有误".fontcolor("red");
				return false;
			}
		}
		function checkAll(){
			if(checkUserName() && checkPwd() && checkRePwd() && checkEmail()){
				 return true ;
			}else{
				return false ;
			}
		}
	</script>
	<body>
		<!--onsumbit:当前表单是否提交成功,true:成功/false不成功-->
		<form action="backend.html" method="post" onsubmit=" checkAll()">
		用户名:<input type="text" id="username" name="username" onblur="checkUserName()" /><span id="name_span"></span><br />
		密码:<input type="password"  id="pwd" onblur="checkPwd()" /><span id="pwd_span"></span><br />
		确认密码:<input type="password"  id="repwd" onblur="checkRePwd()" /><span id="repwd_span"></span><br />
		邮箱:<input type="text" id="email" onblur="checkEmail()" /><span id="email_span"></span><br />
		<input type="submit" value="注册" />
		</form>
	</body>
</html>

JavaScript —— DOM模型

1.DOM节点

2. DOM方法和属性

2.1 方法

2.2 属性

3. DOM访问

4. DOM修改

5. DOM导航

6. 事件

6.1 事件编程三要素

6.2 事件分类

7. 正则表达式

猜你喜欢