Web-Day7笔记

一、DOM

1.常用的方法

a.创建

​ createElement():创建标签节点

​ createTextNode():创建文本节点

​ createAttribute():创建属性节点

b.增

​ appendChild():将新的子节点添加到指定节点的末尾

​ insertBefore():在某个子节点的前面插入指定节点

c.删

​ removeChild():删除子节点

​ removeAttribute():删除属性节点

d.改

​ repalceChild():替换子节点

​ setAttribute():将指定属性设置或者修改为指定的值

e.查

​ getElementByXxxx:获取节点对象

​ getAttribute():返回指定的属性值

f.克隆

​ cloneNode():复制一个新的指定节点


<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
	head>
	<body>
		<ul>
			<li>111li>
			<li>222li>
			<li>333li>
			<li>444li>
			
		ul>
		
		<input type="button" value="add" onclick="func1();" />
		
		
		<script type="text/javascript">
             //父节点对象.appendChild(子节点对象)
			function func1(){
				//1.创建标签节点li
				var liEle = document.createElement("li");
			
			
				//2.创建文本节点555
				var liText  = document.createTextNode("555");
				
				
				//3.将文本节点添加为标签节点的子节点
				liEle.appendChild(liText);
				
				
				//4.获取父节点对象
				var ulEle = document.getElementsByTagName("ul")[0];
				
				
				//5.将li子节点添加为ul的子节点
				ulEle.appendChild(liEle);
			}
		script>
	body>
html>

<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
	head>
	<body>
		<ul>
			<li>111li>
			<li>222li>
			
			<li id="li3">333li>
			<li>444li>
			
		ul>
		
		<input type="button" value="insert" onclick="func1();" />
		
		
		<script type="text/javascript">
			
			
			//父节点对象.insertBefore(新的节点,旧的节点)
			
			function func1(){
				//1.创建标签节点li
				var liEle = document.createElement("li");
			
			
				//2.创建文本节点555
				var liText  = document.createTextNode("555");
				
				
				//3.将文本节点添加为标签节点的子节点
				liEle.appendChild(liText);
				
				
				//4.获取父节点对象
				var ulEle = document.getElementsByTagName("ul")[0];
				
				
				//5.获取指定节点对象
				var li3 = document.getElementById("li3");
				
				
				//6.插入
				ulEle.insertBefore(liEle,li3);
				
			}
			
		script>
	body>
html>

<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
	head>
	<body>
		<ul>
			<li>111li>
			<li>222li>
			<li id="li3">333li>
			<li>444li>
			<li>555li>
			
		ul>
		
		<input type="button" value="remove" onclick="func1();" />
		
		
		<script type="text/javascript">
			
			
			//父节点对象.removeChild(被删除的节点对象)
			
			function func1(){
				
				
				//1.获取父节点对象
				var ulEle = document.getElementsByTagName("ul")[0];
				
				
				//2.获取需要被删除的节点对象
				var li3 = document.getElementById("li3");
				
				
				//3.删除
				ulEle.removeChild(li3);
				
			}
			
		script>
	body>
html>

<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
	head>
	<body>
		<ul>
			<li>111li>
			<li>222li>
			<li id="li3">333li>    
			<li>444li>
			<li>555li>
			
		ul>
		
		<input type="button" value="replace" onclick="func1();" />
		
		
		<script type="text/javascript">
			
			
			//父节点对象.replaceChild(new,old)
			
			function func1(){
				
				
				//1.获取父节点对象
				var ulEle = document.getElementsByTagName("ul")[0];
				
				
				//2.获取需要被替换的节点对象
				var li3 = document.getElementById("li3");
				
				
				//3.创建标签节点li
				var liEle = document.createElement("li");
			
			
				//4.创建文本节点666
				var liText  = document.createTextNode("666");
				
				
				//5.将文本节点添加为标签节点的子节点
				liEle.appendChild(liText);
				
				//6.替换
				ulEle.replaceChild(liEle,li3);
				
			}
			
		script>
	body>
html>

<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<body>
		<input type="text" name="tex" id="inputid" value="aaa" />
		<script type="text/javascript">
			//1.获取input标签对象
			var input = document.getElementById("inputid");
			
			//2.获取属性值
//			alert(input.value);


			//使用getAttribute(),了解,直接通过对象.属性的方式常用
//			alert(input.getAttribute("value"));
			
			
			//alert(input.getAttribute("class")); //null
			
			
			//3.setAttribute(属性,值):给某个属性设置具体的值
			input.setAttribute("class","cls");
			//alert(input.getAttribute("class"));
			
			
			//4.removeAttribute(属性):删除属性
			alert(input.getAttribute("name"));
			input.removeAttribute("name");
			alert(input.getAttribute("name"));
				
		script>
	body>
html>

2.常用的属性

a.innerHTML:几乎所有的浏览器都支持该属性,但是,不属于DOM的组成部分

​ 作用:获取文本内容,给标签对象设置文本内容【内容包括纯文本和html代码】


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<body>
		<span id="spanid">哈哈哈哈哈span>
		<div id="box">div>
		
		
		
		
		
		<script type="text/javascript">
			//1.获取span标签的节点对象
			var span = document.getElementById("spanid");
			
			//作用一:获取文本内容
			//alert(span.innerHTML);
			
			
			//2.作用二:设置文本内容
			
			
			//2.1设置纯文本
			/*
			 * var a = createTextNode("aaaa")
			 * div.appendChild(a)
			 */
			var div = document.getElementById("box");
			//div.innerHTML = "aaaaa";
			
			//2.2设置html内容
			/*
			 * var a = createTextNode("aaaa")
			 * var h = createElement("h1");
			 * h.appendChild(a);
			 * div.appendChild(h)
			 */
			
			//div.innerHTML = "

aaaa

";
div.innerHTML = "
aaaabbbb
tttthyj
"
;
script> body> html>

b.节点属性

​ nodeName:节点的名称

​ 元素节点:标签名称【大写】

​ 属性节点:属性名称

​ 文本节点:#text

​ 文档节点:#document

​ nodeValue:节点值

​ 元素节点:undefined / null

​ 属性节点:属性的值

​ 文本节点:文本本身

​ nodeType:节点类型

​ 元素节点:1

​ 属性节点:2

​ 文本节点:3

​ 文档节点:9

​ 注释:8


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<body>
		<span id="spanid">hahahahh span>
		<br />
		<script type="text/javascript">
			
			//1.标签节点
			var span = document.getElementById("spanid");
			
			document.write(span.nodeName);   //SPAN
			document.write(span.nodeValue);	//null  undefined
			document.write(span.nodeType);	  //1
			
			document.write("
"
); //2.属性节点 var id = span.getAttributeNode("id"); document.write(id.nodeName); //id document.write(id.nodeValue); //spanid document.write(id.nodeType); //2 document.write("
"
); //3.文本节点 //文本节点排列在属性节点的前面 var text1 = span.firstChild; document.write(text1.nodeName); //#text document.write(text1.nodeValue); //hahahahh document.write(text1.nodeType); //3
script> body> html>

c.父子节点,兄弟节点

​ childNodes:通过父节点获取子节点,注意:子节点可能有多少个【注意:html标签中的空白符】

​ parentNode:通过子节点获取父节点 ,注意:document没有父节点

​ firstChild/lastChild

​ nextSibling:获取同辈节点,获取指定节点的下一个同辈节点

​ previousSibling:获取同辈节点,获取指定节点的上一个同辈节点


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<body>
		<ul id="ulid"><li>111li><li id="li2">222li><li id="li3">333li><li id="li4">444li><li>555li>ul>
		
		<script type="text/javascript">
			//1.通过父节点获取子节点
			//注意:考虑空白符的存在,空白符会被识别为文本节点
			var ulEle = document.getElementById("ulid");
			var result1 = ulEle.childNodes;
			document.write(result1);
			document.write(result1.length);  //11
			
			document.write("
"
); var child1 = ulEle.firstChild; var child2 = ulEle.lastChild; document.write(child1.nodeName); document.write("
"
); document.write(child2.nodeName); //2.通过子节点获取父节点 var li3 = document.getElementById("li3"); var ulEle2 = li3.parentNode; //3.获取同辈节点 var li3 = document.getElementById("li3"); var subli1 = li3.nextSibling; var subli2 = li3.previousSibling; document.write(subli1.id); document.write("
"
); document.write(subli2.id);
script> body> html>

d.attributes:获取属性节点

e.value:标签的值【input】

3.事件【重点掌握】

3.1模式

html和js的结合方式

分类:

​ a.内联模式:在html标签中通过属性的方式给标签添加事件,例如:onclick

​ b.脚本模式:弥补了内联模式的缺点【未达到js和html的分离】


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<body>
		
		<button onclick="func1();">点击一button>
		
		
		<button onclick="alert('hhahah')">点击二button>
		
		<script type="text/javascript">
			
			
			function func1(){
				alert("hello");
			}
			
		script>
		
	body>
html>

<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<body>
		
		<button id="btn1">点击一button>
		
		
		<button id="btn2">点击二button>
		
		<script type="text/javascript">
			
			//1.获取按钮的对象
			var btn1 = document.getElementById("btn1");
			//2.添加单击事件
			btn1.onclick = function(){
				alert("hello");
			}
			
		script>
		
	body>
html>
3.2事件对象

事件对象一般称为event对象,该对象是浏览器通过函数将该对象作为参数传递过来的

默认的情况下,event对象是隐藏的,只有跟事件有关的函数才有该参数


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<body>
		<input type="button" id="inputid" value="按钮"/>
		<script type="text/javascript">
			//普通函数
			function func1(){
				//arguments:js中的全局对象,表示函数的参数
				console.log(arguments.length);
			}
			func1();
			
			
			//匿名函数:跟事件有关
			var inputObj = document.getElementById("inputid");
			
			//注意:但凡使用js中的事件,在函数中都会有一个隐藏的参数,表示事件对象,
			//如果需要使用该对象,则可以显式的写出来,只要是一个合法的标识符即可,一般采用event
			inputObj.onclick = function(event){
				console.log(arguments.length);
				//console.log(arguments[0]);
				console.log(event);
				
				//事件对象根据不同的浏览器可能不同,为了兼容不同的浏览器
				//非IE和IE之间的区别
				var e = event || window.event;
				
			}
			
		script>
	body>
html>
3.3鼠标事件

click:单击或者按下回车键

dblclick:双击

mousedown:按下鼠标

mouseup:抬起鼠标

mouseover:鼠标悬浮

mouseout:鼠标从标签上移出

mousemove:鼠标在标签上移动

submit:表单事件【当表单数据不正确的时候可以阻止表单提交】


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			#box{
				width: 300px;
				height: 300px;
				background-color: cyan;
			}
		style>
	head>
	<body>
		<div id="box">div>
		
		<script type="text/javascript">
			//获取div标签对象
			var divObj = document.getElementById("box");
			
			//绑定鼠标事件
			//单击
			/*divObj.onclick = function(){
				//js操作css
				//注意:标签对象.style.属性 = “值”;
				divObj.style.backgroundColor = "orange";
			}
			
			//双击
			divObj.ondblclick = function(){
				divObj.style.backgroundColor = "orange";
			}*/
			
			
			//悬浮
			divObj.onmouseover = function(){
				divObj.style.backgroundColor = "orange";
			}
			
			divObj.onmouseout = function(){
				divObj.style.backgroundColor = "cyan";
			}
			
		script>
	body>
html>

<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			#msg_id{
				width: 200px;
				/*高度随着内容的多少自适应*/
				height: auto;  
				background-color: gray;
				border: 1px solid white;
				/*初始化下状态,隐藏
				 * 则表示该元素不会占用位置的,相当于该元素根本不存在
				 */
				display: none;
				
				/*定位*/
				position:absolute ;
			}
			
			#div1 a{
				/*
				 * a是典型的行内标签,不会自动换行,设置了宽高和内外边距不起作用
				 */
				margin: 30px;
				display: inline-block;
				
			}
		style>
	head>
	<body>
		<div id="div1">
			<a href="#">大娃(红娃)a><br />
			<a href="#">二娃(橙娃)a><br />
			<a href="#">三娃(黄娃)a><br />
			<a href="#">四娃(绿娃)a><br />
			<a href="#">五娃(青娃)a><br />
			<a href="#">六娃(蓝娃)a><br />
			<a href="#">七娃(紫娃)a><br />
			<a href="#">葫芦小金刚a><br />
			
			<div id="msg_id">div>
		div>
		
		<script type="text/javascript">
			//当当前html页面中所有的内容加载完毕之后,使用js操作
			window.onload = function(){
				//1.获取标签对象
				var oDiv = document.getElementById("div1");
				var msgDiv = document.getElementById("msg_id");
				var oAs = oDiv.getElementsByTagName("a");
				
				var arrMsg = ["力大无穷,巨大化。(弱点:比较鲁莽,不知随机应变)",
				"千里眼,顺风耳,灵活聪明,机敏过人,最善于谋划计策(弱点:攻击力与其兄弟相比较过于弱小了,眼睛和耳朵太脆弱)", 
				"铜头铁臂,钢筋铁骨,刀枪不入(弱点:第一部中根本就是没有弱点,但可以以柔克刚降服他。可是到了第二部就被强行加入了一个致命弱点:怕打屁股。性急骄傲)。",
				"喷火,吸火,霹雳(弱点:受不了激将法,也怕冷)", "吸水,吐水,口吐闪电产生降雨(弱点:水火不相溶,意气用事。第一部中水娃的能力也是没有弱点的,不用吸水也能喷水喷得无穷无尽。到了第二部就变得需要先吸水才能吐水,水量有限。)",
				"隐身术,透体术,来无影去无踪,聪明机灵,最善于偷盗和行动(弱点:太顽皮。在第一部里能够在被金蛇冰封的情况下透体而出,在第二部前半段能够使用透体术逃出鳄鱼头领爪子的紧紧捉拿,直到被捉的那一下透体术就使不出来了)", 
				"最小,没多大本领,倍受哥哥们的关爱,有宝葫芦,可以吸入魔法、兵器和妖怪,在第一部刚出世时蒙蔽双眼,十分听从妖精的话,把六位哥哥吸进宝葫芦。(弱点:失去宝葫芦,到第二部中宝葫芦那么容易就碎了)", 
				"葫芦娃的合体,七颗葫芦娃的心都溶在他的胸中,七个葫芦娃的本领都长在他的身上,同时也具有七个葫芦娃的弱点。他大闹妖精洞府后,闯入十八层地道,毁掉青蛇精的两件宝物。后变成一座大山,镇压了青蛇精."];
				
				//2.遍历a标签的集合,给a添加鼠标事件
				for(var i = 0;i < oAs.length;i++){
					//oAs[i]:每个超链接的标签对象
					
					//index属性:循环的时候,如果想要给每个标签对象做一个标记,方便后续取数组中对应的信息
					oAs[i].index = i;
					
					//2.1移入的时候,文字颜色变成橙色,将标签a位置对应的div显示出来
					//this代表的是当前标签对象
					oAs[i].onmouseover = function(){
						this.style.color = "orange";
						//显示出来
						msgDiv.style.display = "block";
						//设置文字简介
						msgDiv.innerHTML = arrMsg[this.index];
					}
					
					//2.2移出的时候,颜色变为蓝色,将div隐藏
					oAs[i].onmouseout = function(){
						this.style.color = "blue";
						//隐藏
						msgDiv.style.display = "none";
					}
					
					//2.3当鼠标在a上左右上下移动的时候
					oAs[i].onmousemove = function(event){
						//注意:追踪鼠标的坐标,所有的坐标和event对象有关
						
						var e = event || window.event;
						
						msgDiv.style.display = "block";
						
						//div随着鼠标的移动而移动
						//在事件对象中,clientX,clientY
						msgDiv.style.left = e.clientX + 5 + "px";
						msgDiv.style.top = e.clientY + 5 + "px";	
					}
					
				}
				
				
			}
		script>
	body>
html>

表单事件


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			span{
				display: none;
				color: red;
				font-size: 13px;
			}
		style>
	head>
	<body>
		<form id="form" action="#" method="get">
			
			<input type="text" name="username" placeholder="请输入用户名" id="user"/>
			<span id="userspan">*用户名格式不正确span>
			<br />
			<input type="password" name="pwd" placeholder="请输入密码" id="pwd" />
			<span id="pwdspan">*密码必须是六位span>
			<br />
			<input type="submit" value="提交数据" />
		form>
		
		<script type="text/javascript">
			window.onload = function(){
				//获取form标签对象
				var formObj = document.getElementById("form");
				//获取用户名和密码的标签对象,目的为了获取input的value设置
				var userInput = document.getElementById("user");
				var userSpan = document.getElementById("userspan");
				var pwdInput = document.getElementById("pwd");
				var pwdSpan = document.getElementById("pwdspan");
				
				
				//给表单标签对象添加事件 
				//submit事件:如果该事件的函数返回值为false,则表示需要阻止表单提交
				formObj.onsubmit = function(){
					
					if(userInput.value.length > 10 || userInput.value.length < 6){
						//让对应的span显示出来
						userSpan.style.display = "inline-block";
						
						//阻止表单提交
						return false;
					}else{
						
						if(pwdInput.value.length != 6){
							//让对应的span显示出来
							pwdSpan.style.display = "inline-block";
						
							//阻止表单提交
							return false;
						}else{
							alert("表单提交成功");
						}	
					}
				}
			}
		script>
		
	body>
html>
3.4键盘事件

keydown:按下键盘的任意键【连续调用】

keyup:抬起键盘的任意键【连续调用】

keypress:按下键盘的非功能键

​ 功能键:ctrl,shift,alt,enter,capslock ,numlock等

注意:键盘事件一般绑定给document对象


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<body>
		<script type="text/javascript">
			document.onkeydown = function(e){
				//
				var event = e || window.event;
				
				console.log(event);
				
				//event.altKey,event.ctrlKey,event.shiftKey的值为布尔值,如果被按下,值为true
				//keyCode:当前被按下的键对应的编码【数字和字母,keycode实质上是ASCII码】
				console.log(event.altKey,event.ctrlKey,event.shiftKey,event.keyCode);
				
			}
			
			document.onkeyup = function(e){
				//
				var event = e || window.event;
				
				console.log(event);
				
				console.log(event.altKey,event.ctrlKey,event.shiftKey,event.keyCode);
			}
			
			document.onkeypress = function(e){
				//
				var event = e || window.event;
				
				console.log(event);
				
				console.log(event.altKey,event.ctrlKey,event.shiftKey,event.keyCode);
			}
		script>
	body>
html>

<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			#box{
				width: 100px;
				height: 100px;
				background-color: cyan;
				position: absolute;
			}
		style>
	head>
	<body>
		
		<div id="box">div>
		<script type="text/javascript">
			//获取div的对象
			var div = document.getElementById("box");
			
			//添加键盘事件
			document.onkeydown = function(e){
				var event = e || window.event;
				
				if(event.shiftKey == true && event.keyCode == 70){
					//rgb(r,g,b).取值范围为0~255
					
					var r = parseInt(Math.random() * 256);
					var g = parseInt(Math.random() * 256);
					var b = parseInt(Math.random() * 256);
					
					
					div.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
				}
			}
			
			
			//添加监听事件
			document.addEventListener("keydown",func1,false);
			function func1(e){
				var event = e || window.event;
				
				switch(event.keyCode){
					//左键
					case 37:{
						div.style.left = div.offsetLeft - 5 + "px";
						break;
					}
					case 38:{
						div.style.top = div.offsetTop - 5 + "px";
						break;
					}
					case 39:{
						div.style.left = div.offsetLeft + 5 + "px";
						break;
					}
					case 40:{
						div.style.top = div.offsetTop + 5 + "px";
						break;
					}
					default:{
						
					}
					
				}
				
				
			}
			
		script>
	body>
html>

你可能感兴趣的:(Web-Day7笔记)