[JavaScript知识库] Web基础—

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Web基础——JavaScript之DOM -> 正文阅读

[JavaScript知识库]Web基础——JavaScript之DOM

1.DOM：Document Object Model 文档对象模型

概念：将标记语言文档的各个组成部分 封装为对象
组成：
			Document：文档对象
			Element:元素对象
			Attribute：属性对象
			Text：文本对象
			Comment：注释对象
			Node：节点对象

2. Document：文档对象

获取：window.document

			document 中 body属性 可以获取body标签对象
			document.body.bgColor = "red";
			
			title 属性获取文档标题
			var bt = document.title;
			
			获取文档最后一次修改时间
			var rq=document.lastModified;
			
			URL 属性 获取地址栏中的地址

方法：

 获取Element对象
					getElementById():通过id属性值获取唯一的元素
					getElementsByTagName():通过标签名称获取元素对象数组
					getElementsByName():通过name属性值获取元素对象数组
					getElementsByClassName():通过class属性值获取元素对象数组
					
					根据css的选择器语法来选择的,获取的是第一个是个单数。
					var aa=document.querySelector(".myclass");
					alert(aa);
					
					//根据css的选择器语法来选择的,获取的是多个
					var arr=document.querySelectorAll(".myclass");
					alert(arr.length);

创建其他对象
				createElement:创建元素对象
				createAttribute：创建属性对象
				createComment：创建注释对象
				createTextNode：创建文本对象
				
				给属性对象设置值
				font1.setAttribute('color','yellow');
				
				bd.remove(); 删除自己
                bd.removeChild(div); //移除子元素
                
				//根据属性名来移除标签上的属性
				//div.removeAttribute("align");
				
				//移除属性对象。你传入的是一个属性对象
				//div.removeAttributeNode(attr);

				//站在父元素的角度，替换子元素，值1：新的元素，值2：是要替换的旧元素。
				bd.replaceChild(h4,h);
				
				//站在父标签的角度，在这个h1标签对象的前面插入h5这个标签对象。
				bd.insertBefore(h5,h1);

例子：
var div4 = window.document.createElement(“div”);
var text1 = window.document.createTextNode(“我是第四个div”);
var v = div4.appendChild(text1);
document.getElementsByTagName(“body”)[0].appendChild(div4);

Element:元素对象
* innerHTML属性：获取或设置元素的子内容
*innerTEXT属性:获取标签之间的文本内容

js中注册监听的方式：

事件
概念：
事件：一件事
事件源：事件发生的组件。
监听器：一个对象。当事件源上发生了事件，就执行对象中的某些方法
注册监听：将监听器绑定到事件源上，监听事件的发生
1. 在定义标签时，添加事件名称属性。属性值是js代码
js代码会被自动封装到一个function函数的方法体中
例子：

hehe

2. 通过js获取元素对象，再添加事件。

				例子：
				//1.获取元素对象
				var input = document.getElementById("username");
				//2.注册监听
				input.onclick = function(){
					//alert("hehe");
				}
				3. 通过 addEventListener() 方法 来添加事件
 					
          语法：document.getElementById("myBtn").addEventListener("click",事件处理函数);
          //移除事件 值1：事件名 值2：事件处理函数
              document.getElementById("myBtn").removeEventListener('click',show);

js中事件的种类：

				焦点事件：针对表单
					onfocus 元素获得焦点。 
					onblur  元素失去焦点
				
				点击事件：
					onclick 当用户点击某个对象时调用的事件句柄。 
					ondblclick 当用户双击某个对象时调用的事件句柄。 
					
				键盘事件：
					onkeydown 某个键盘按键被按下。
					onkeyup 某个键盘按键被松开。 
					onkeypress 某个键盘按键被按下并松开。 
					通过事件对象event中的keyCode属性，可以获取键盘某个键的键码  其实就是ASCII码表中对按键的编码
                                                                                 e.keyCode	
				鼠标事件：
					onmousedown 鼠标按钮被按下。 
					onmouseup 鼠标按键被松开。 
					onmouseover 鼠标移到某元素之上。 
					onmouseout 鼠标从某元素移开。 
					onmousemove 鼠标被移动。 
					鼠标按下时，通过事件对象 event中的属性  button 或 which 可以获取鼠标按键的编号。
					 e.button 事件对象中的 button属性可以获取鼠标按键的编号
			                                 e.which 也可以获取鼠标的按键编号 1 左键  2滚轮   3右键
 					 e.button 也可以获取鼠标的按键编号 0 左键  1滚轮   2右键
				
				表单事件：
					onsubmit 确认按钮被点击。 
					onreset 重置按钮被点击。 
					oninput 事件 当你往表单中输入内容时就触发 
					
				加载与卸载事件
					onload 一张页面或一幅图像完成加载。 
					onunload 用户退出页面。 其他浏览器不支持 IE支持
				
				其他事件：
					针对表单
					onchange 域的内容被改变。 比如下拉框
					onselect 文本被选中。

JS事件对象 event中的属性和功能

				属性：     currentTarget:   获取的是绑定了该事件的元素对象
				           target :  获取的是触发了该事件的元素对象 
				           type: 获取事件类型
				           keyCode 当绑定了键盘事件，可以从事件对象中获取按键的键码（ASCII码）
				           which/button  当绑定了鼠标事件，可以从事件对象中获取鼠标按键的键码 0 左键 1滚轮 2右键

				方法：
                       e.stopPropagation() 阻止事件冒泡
				       e.preventDefault(); 阻止元素的默认行为

document文档对象中的方法和属性代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的网页</title>
	</head>
	<body>
	</body>
</html>
<!-- 当我们操作DOM时， script标签放在文档下面，防止，DOM元素因为加载顺序，而获取不到 -->
<script type="text/javascript">
	// Document 对象
	// 每个载入浏览器的 HTML 文档都会成为 Document 对象。
	//获取文档对象，通过 window对象的document属性来获取文档对象
	var doc = window.document;
	//文档对象中的属性和方法
	//获取body标签对象
	var bd = doc.body;
	alert(bd);
	//获取文档的修改时间
	var time = window.document.lastModified;
	alert(time);
	//设置或获取网页的标题
	document.title = "我的新标题";
	var t = document.title;
	alert(t);
	//location.href
	//获取或设置地址栏中的内容
	var url=document.URL;
	alert(url);
</script>

文档对象中的方法代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
	//文档对象中的方法
	//write() 向文档写 HTML 表达式 或 JavaScript 代码。 
	document.write("aaaa");
	document.write("<h1>阿三发射点发射点发</h1>")
	//获取body标签对象
	var bd=document.body;
	//设置标签的自带属性值
	//bd.bgColor="red";
	document.onclick=function(){
		//随机换背景颜色
		var a=Math.floor(Math.random()*255);
		var b=Math.floor(Math.random()*255);
		var c=Math.floor(Math.random()*255);
		//设置标签的自带属性值
		//bd.bgColor="rgb("+a+","+b+","+c+")";
		//设置标签的css样式
		bd.style.backgroundColor="rgb("+a+","+b+","+c+")";
	}
	</script>
</html>

获取标签对象代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body id="bd">
		<h1 id="myh1">asdfasdfasdfasdfasdfasdf</h1>
		<h2 class="myh2">2222222</h2>
		<h2 class="myh2">2222222</h2>
		<h2 class="myh2">2222222</h2>
		<h2 class="myh2">2222222</h2>
		<h2 class="myh2">2222222</h2>
		<h2 class="myh2">2222222</h2>
		<h2 class="myh2">2222222</h2>
		<h2 class="myh2">2222222</h2>
		<h2 class="myh2">2222222</h2>
		<h2 class="myh2">2222222</h2>
	</body>
	<!-- DOM操作时，script放到文档下面，防止标签对象获取不到 -->
	<script type="text/javascript">
		//通过id获取单个的标签对象
		var myh1 = window.document.getElementById("myh1");
		alert(myh1);
		//获取body标签对象
		var bd = document.body;
		var mybd = document.getElementById("bd");
		alert(bd);
		alert(mybd);
		alert(bd == mybd);
		//通过class属性值，获取多个标签对象的数组
		var h2Arr = document.getElementsByClassName("myh2");
		for (let i = 0; i < h2Arr.length; i++) {
			if (i % 2 == 0) {
				h2Arr[i].style.background = "red";
			} else {
				h2Arr[i].style.background = "yellow";
			}
		}
	</script>
</html>

获取标签对象的方法代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>111111</h1>
		<h1>111111</h1>
		<h1>111111</h1>
		<h1>111111</h1>
		<h1>111111</h1>
		<h1>111111</h1>
		<h1>111111</h1>
		<h1>111111</h1>
		<h1>111111</h1>
		<h1>111111</h1>
		<input type="" name="username" id="" value="" />
		<input type="" name="password" id="" value="" />
		<input type="radio" name="sex" id="" value="1" />
		<input type="radio" name="sex" id="" value="0" />
	</body>
	<script type="text/javascript">
		//通过标签名来获取标签对象的数组
		var myh1=document.getElementsByTagName("h1");
		for(let i=0;i<myh1.length;i++){
			if(i%2==0){
				myh1[i].style.background="red";
			}else{
				myh1[i].style.background="blue";
			}
		}
		//针对input标签的获取方法，根据input标签的 name属性值获取，返回的是数组
		var objArr=document.getElementsByName("username");
		var obj=objArr[0];
		alert(obj);
		var objArr2=document.getElementsByName("sex");
		var obj3=objArr2[0];
		var obj4=objArr2[1];
		alert(obj3);
		alert(obj4);
	</script>
</html>

获取标签对象新增方法代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1 id="myh1">11111111111111111111111111</h1>
		<h2 class="myh2">2222</h2>
		<h2 class="myh2">2222</h2>
		<h2 class="myh2">2222</h2>
		<h2 class="myh2">2222</h2>
		<h2 class="myh2">2222</h2>
		<h2 class="myh2">2222</h2>
		<h2 class="myh2">2222</h2>
		<h2 class="myh2">2222</h2>
		<h2 class="myh2">2222</h2>
		<h2 class="myh2">2222</h2>
	</body>
	<script type="text/javascript">
		//h5 新增的获取标签对象的方法
		var h1=document.querySelector("#myh1"); //根据css选择器来获取
		h1.style.color="red";
		//.querySelector()即便你通过类选择器，默认选择的是第一个  .myh2
		var myh2=document.querySelector(".myh2");
		myh2.style.color="blue";
		//通过类选择器选择多个，使用下面的
		var myh2s=document.querySelectorAll(".myh2");
		myh2s[1].style.color="red";
		myh2s[2].style.color="blue";
		myh2s[myh2s.length-1].style.color="pink";
	</script>
</html>

标签对象的两个属性代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1 id="myh1">
			标签之间的文本
		</h1>
		<h2  id="myh2">
			<span>标签啊手动阀手动阀十分</span>
		</h2>
	</body>
	<script type="text/javascript">
		var myh1 = document.getElementById("myh1");
		//设置标签之间的文本
		myh1.innerText += "新的文本" //+= 追加设置
		//获取标签之间的文本
		var text = myh1.innerText;
		alert(text);
		/* //innerHTML 设置或获取标签之间的内容，包括子标签
		var myh2 = document.getElementById("myh2");
		//innerHTML 会转义HTML标签
		myh2.innerHTML="<s>阿三发射点发色</s>"
		//var text2 = myh2.innerHTML;
		//alert(text2); */
	</script>
</html>

动态的创建DOM元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		//动态的创建Dom元素
		//创建标签对象
		var myDiv=document.createElement("div");
		//获取body标签对象
		var bd=document.body;
		//站在父标签的角度设置子元素
		bd.appendChild(myDiv);
		//创建文本对象
		var text=document.createTextNode("这是一行文本");
		myDiv.appendChild(text);
		//创建属性对象
		var attr=document.createAttribute("style");
		//设置属性的值
		attr.value="color:red;font-size:25px";
		//给标签设置属性读写
		myDiv.setAttributeNode(attr);
		//给标签设置属性，另一个方法 参数，属性名 属性值
		myDiv.setAttribute("id","d1");
		//创建注释对象
		var comm=document.createComment("这是一行注释");
		bd.appendChild(comm);
		//移除属性 ,根据属性名来移除
		myDiv.removeAttribute("id");
		//移除属性对象
		myDiv.removeAttributeNode(attr); //传入的是属性对象，不是属性
		//站在父元素的角度，删除子元素
		bd.removeChild(myDiv);
		//myDiv.remove();
		//站在自身的角度删除自己
		comm.remove();
	</script>
</html>

替换元素和插入元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1 id="myh1">这是原来的元素</h1>
		<div id="d1">
			  <h2 id="nei">这是原来的h2</h2>
		</div>
	</body>
	<script type="text/javascript">
		//站在父元素的角度，替换子元素，值1：新的元素，值2：是要替换的旧元素。
		//bd.replaceChild(h4, h);
		//站在父标签的角度，在这个h1标签对象的前面插入h5这个标签对象。
		//bd.insertBefore(h5, h1);
		var oldEle=document.getElementById("myh1");
		var bd=document.body;
		var myh2=document.createElement("h2");
		myh2.innerText="新的元素h2";
		bd.replaceChild(myh2,oldEle);
		var myh3=document.createElement("h3");
		myh3.innerText="333333333333333333333";
		var myd1=document.getElementById("d1");
		//myd1.appendChild(myh3);往后面追加
		//站在父标签的角度，在这个#nei标签对象的前面插入myh3这个标签对象。
		myd1.insertBefore(myh3,document.getElementById("nei"));
	</script>
</html>

事件代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" onclick="show()">一个按钮</button>
		<button type="button" id="btn">第二个按钮</button>
		<h1 class="myh1">2222222222222222222</h1>
		<h1 class="myh1">2222222222222222222</h1>
		<h1 class="myh1">2222222222222222222</h1>
		<h1 class="myh1">2222222222222222222</h1>
		<h1 class="myh1">2222222222222222222</h1>
		<h1 class="myh1">2222222222222222222</h1>
		<h1 class="myh1">2222222222222222222</h1>
		<h1 class="myh1">2222222222222222222</h1>
		<h1 class="myh1">2222222222222222222</h1>
		<h1 class="myh1">2222222222222222222</h1>
	</body>
	<script type="text/javascript">
		//事件：生活中指的就是一件事情
		//JS中的事件：指的就是用户的行为，动作，单击，双击，鼠标移动，而且你要监听用户的操作行为
		// * 事件源：事件发生的组件。比如按钮
		// * 监听器：一个对象。当事件源上发生了事件，就执行对象中的某些方法
		// * 注册监听：将监听器绑定到事件源上，监听事件的发生
		//绑定事件的方式，方式1：直接在html元素上来绑定
		//<button type="button" οnclick="show()">一个按钮</button>
		function show(){
			alert("点击了");
		}
		//方式2：使用代码绑定
		var btn=document.getElementById("btn");
		btn.onclick=function(){
			alert("点击了2222222");
		}
		var arr=document.getElementsByClassName("myh1");
		for(let i=0;i<arr.length;i++){
			arr[i].onclick=function(){
				//alert("h2点击了");
				//注意使用this,this表示你当前点击的那个对象
				//this.style.background="red";
				this.style.background="red";
			}
		}
	</script>
</html>

失去焦点和获取焦点事件代码演示（表单验证）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- οnsubmit="return ture" 表单提交事件，返回true 表单能够提交，返回false表单不能提交-->
		<form action="#" method="get" onsubmit="return checkAll()">
			用户名：<input onblur="checkUsername()" type="text" name="username" id="username" value=""
				placeholder="请输入用户名6-16个字母" />
			<span id="usp"></span>
			<br>
			密码：<input type="password" onblur="checkPassword()" name="password" id="password" value=""
				placeholder="请输入密码6-16个数字" />
			<span id="psp"></span>
			<br>
			<input type="submit" id="" name="" value="注册" />
		</form>
	</body>
	<script type="text/javascript">
		//校验所有表单项的规则
		function checkAll() {
			return checkUsername() && checkPassword(); //true&&true 
		}
		//校验用户名
		function checkUsername() {
			//定义正则
			//定义规则 6-16字母 不区分大小写
			var regx = /^[a-zA-Z]{6,16}$/;
			//获取用户输入的用户名
			var username = document.getElementById("username").value.trim();
			var flag = regx.test(username);
			var usp = document.getElementById("usp");
			if (flag) {
				usp.innerHTML = "<b style='color: green;'>用户名规则正确<b/>"
			} else {
				usp.innerHTML = "<b style='color:red;'>用户名规则错误<b/>"
			}
			return flag;
		}
		//校验密码
		function checkPassword() {
			//定义正则
			//定义规则 6-16字母 不区分大小写
			var regx = /^[1-9][0-9]{5,15}$/;
			//获取用户输入的用户名
			var password = document.getElementById("password").value.trim();
			var flag = regx.test(password);
			var psp = document.getElementById("psp");
			if (flag) {
				psp.innerHTML = "<b style='color: green;'>密码规则正确<b/>"
			} else {
				psp.innerHTML = "<b style='color:red;'>密码规则错误<b/>"
			}
			return flag;
		}
	</script>
</html>