web前端javaScript笔记——（11）DOM

Komorebi_9999

已于 2024-01-15 22:42:14 修改

阅读量560

点赞数 9

文章标签：前端 javascript 笔记

于 2024-01-14 23:11:33 首次发布

本文链接：https://blog.csdn.net/JLY19970726/article/details/135590671

版权

一、DOM简介

DOM简介
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>
       
    </title>
    <style>
    
    </style>
    <script type="text/javascript">
        /*宿主对象，由浏览器，运行环境为我们提供的对象，BOM对象 和 DOM对象
         DOM   document object model  文档对象模型
         JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面
                     文档
			-文档表示的就是整个的HTML网页文档，一个HTML网页就是一个文档
		 对象
			- 对象表示将网页中的每一个部分，各种标签、属性、文本都转换为了一个对象
		 模型
			-使用模型来表示对象之间的关系，这样方便我们获取对象
         
                     转换为对象之后，可以以纯面向对象的方法操作网页
         *模型
         * 
         * 节点Node，是构成我们网页的最基本的组成部分，
         * 网页中的每一个部分都可以称为是一个节点。
         * 比如:html标签、属性、文本、注释、整个文档等都是一个节点。
		   虽然都是节点，但是实际上他们的具体类型是不同的。
		   比如:标签我们称为元素节点、属性称为属性节点、文本称为文本节点、文档称为文档节点。
		   节点的类型不同，属性和方法也都不尽相同
		 网页中的每个部分都是一个节点
		
		 节点：Node——构成HTML文档最基本的单元
		 常用节点分为四类：
		 文档节点：整个HTML文档
		 元素节点：HTML文档中的标签
		 属性节点：元素的属性
		 文本节点：HTML标签中的文本内容
		 
		 节点的属性：nodeName nodeType  nodeValue是每个节点都有的属性
		 文档节点的nodeName是一个固定值 #document    
		 				nodeName    nodeType        nodeValue
         * 文档节点 		#document   9 				null
         * 元素节点       		标签名                  1				null
         * 属性节点		属性名		2				null
         * 文本节点		#text		3				文本内容
         * 通过nodeType的值可以判断类型
         * 
         * */
        
         
    </script>
   
</head>
<body>
       <button id="btn">我是一个按钮</button>
       <script type="text/javascript">
       	  /*浏览器已经为我们提供了文档节点对象，这个对象是window属性
       	   可以在页面中直接使用，文档节点代表的是整个网页*/
       	  console.log(document);    //[object HTMLDocument]
       	  /*document就是文档节点，它代表的是整个网页，通过document可以获取到网页中的
       	   任意一个对象*/
       	  //获取到button对象
       	  var btn=document.getElementById("btn");   //通过id获取元素
       	  console.log(btn);  //[object HTMLButtonElement]
       	  /*<button id="btn">我是一个按钮</button>*/
       	 /*DOM中的对象都是和网页中的对象是一一对应的，这个btn现在就是按钮，它两是一回事*/
       	   //修改按钮的文字
       	   console.log(btn.innerHTML);        //我是一个按钮
       	   btn.innerHTML="T'm a Button";     //直接赋值修改
       	   //DOM中的btn就是网页中的按钮
       </script>
    
</body>
</html>

二、事件简介

属性此事件发生在何时

onabort 图像的加载被中断。

onblur 元素失去焦点。

anchange 域的内容被改变

onclick 当用户点击某个对象时调用的事件句柄。

ondblclick 当用户双击某个对象时调用的事件句柄。

onerror 在加载文档或图像时发生错误。

onfocus 元素获取焦点。

onkeydown 某个键盘按键被按下

onkeypress 某个健盘按健被按下并松开。

onkeyup 某个键盘按键被松开。

onload 张页面或一幅图像完成加载。

onmousedown 鼠标按钮被挤下。

onmousemove 鼠标被移动。

onmouseout 鼠标从某元素移开。

onmouseover 鼠标移到某元素之上。

onmouseup 鼠标按键被松开。

onreset 重置按纽被点击·

onresize 商口或框架被重新调整大小

onselect 文本选中。

onsubmit 确认按钮被点击。

onunload 用户退出页面。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>
       
    </title>
    <style>
    
    </style>
    <script type="text/javascript"> 
    </script>
   
</head>
<body>
    
     <button id="btn">点我一下</button>
     <script type="text/javascript"> 
     /*浏览器加载页面的时候，是从上到下一行一行记载，
      * 所以这里的<script>标签对写在body中的元素标签下下面，这样按钮会先出来，在页面加载完毕之后
      * 然后再执行Js代码
      * 如果写在<head>标签对里面会报错，代码会先执行，然后页面再加载，然后按钮会后出来
      * 想要把js代码写在<head>标签里面，然后等body中的页面加载完毕之后再执行的解决方法：
      * onload事件会在整个页面加载完毕之后再触发
      * 为window绑定一个onload事件
      * 
      * 下面的代码不会立即执行，会在整个页面加载完之后再执行
      * window.onload=function(){
      * 	
      *    //将js代码写在这里，然后将这个大的整体写在<head>里面的<script>标签里面
      * }
      * */
     
    </script> 
</body>
</html>

三、文档加载

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>
       
    </title>
    <style>
    
    </style>
    <script type="text/javascript"> 
    	/*想要把代码写在<head>标签里面，就统一把代码写在window.onload对应的函数里面
    	 这样可以保证我们的js代码在页面加载完毕之后再执行
    	 onload事件会在整个页面加载完成之后才触发
                     为window绑定一个onload事件
                     该事件对应的响应函数将会在页面加载完成之后执行，
                     这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了，
                     这样就不会出现获取不到DOM对象的情况
                     
                     写上面的话会影响页面加载速度，所以推荐写到下面，但是差别不大。
                     写下面最大的好处就是好管理，方便管理
    	 * */
    	window.onload=function(){
    		//获取id为btn的按钮
    		var btn=document.getElementById("btn");
    		//为按钮绑定一个单击响应函数
    		btn.onclick=function(){
    			alert("hello");
    		};
    	};
    </script>
   
</head>
<body>
	<button id="btn">我是一个按钮</button>
</body>
</html>

四、DOM查询

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>
       
    </title>
    <style>
    
    </style>
    <script type="text/javascript"> 
    	/*获取元素节点
    	 通过document对象调用
    	 1.getElementById()
    	   通过id属性获取一个元素节点的对象
    	 2.getElementsByTagName()
    	   通过标签名获取一组元素节点对象
    	 3.getElementsByName()
    	  通过name属性来获取一组元素节点对象,（复数）主要获取表单项，
    	  
    	  获取元素节点的子节点；
    	  通过具体的元素节点调用（缩小了选择范围）
    	  1.getElementsByTagName()
    	  -方法，返回当前节点的指定标签名后代节点
    	  2.childNodes
    	  -属性，表示当前节点的所有子节点，都包括空白的文本节点
    	  3.firstChild
    	  -属性，表示当前节点的第一个子节点
    	  4.lastChild
    	  -属性，表示当前节点的最后一个子节点
    	  
    	  获取父节点和兄弟节点
    	  通过具体的节点调用
    	  1.parentNode
    	  -属性，表示当前节点的父节点
    	  2.previousSibling
    	  -属性，表示当前节点的前一个兄弟节点
    	  3.nextSibling
    	  -属性，表弟当前节点的后一个兄弟节点
    	  
    	 */
    	 //查找#bj节点
    	 
    	 /*遇到大量重复性代码，可以尝试将其提取为一个函数
    	  * 
    	  * 定义一个函数，专门用来为指定元素绑定单击响应函数
    	  * 参数idStr  要绑定单击响应函数的对象
    	  * fun事件的回调函数，当单击元素时，该函数将会被触发
    	  * 函数也是对象，是对象就可以作为参数*/
    	 
    	 function myClick(idStr,fun){
    	 	var btn=document.getElementById(idStr);
    	 	btn.onclick=fun;
    	 }
    	 window.onload=function(){
    	 	//为id为btn01的按钮绑定一个单击响应函数
    	 	var btn01=document.getElementById("btn01");
    	 	btn01.onclick=function(){
    	 		//查找id为北京的节点
    	 		var bj=document.getElementById("bj");//这里写#bj就会报错，就什么都打印不出来
    	 		//打印bj
    	 		//innerHTML 通过这个属性可以获取到元素内部的html代码
    	 		alert(bj.innerHTML);  //打印出“北京”
    	 	};
    	 	//查找所有的li节点
    	 	//为id为btn02的按钮绑定一个单击响应事件
    	 	var btn02=document.getElementById("btn02");
    	 	btn02.onclick=function(){
    	 		//查找所有li节点
    	 		//getElementsByTagName通过标签名来获取一组节点对象，Element有s
    	 		//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
    	 		//即使查询到的元素只有一个，也会封装到数组中
    	 		var lis=document.getElementsByTagName("li");
    	 		//打印lis
    	 	//	alert(lis.length);  //10
    	 	//遍历lis
    	 	for(var i=0;i<lis.length;i++){
    	 		alert(lis[i].innerHTML);  //innerHTML可以获得标签上的内容
    	 	}		
    	 	};
    	 
    	     //为id为btn03的按钮绑定一个单击响应函数
    	 var btn03=document.getElementById("btn03");
    	 btn03.onclick=function(){
    	 	//查找name=gender的所有节点
    	 	var inputs=document.getElementsByName("gender");
    	 //	alert(inputs.length);  //2
    	  for(var i=0;i<inputs.length;i++){
    	  	/*innerHTML用于获取元素内部的HTML代码的
    	  	 input就是一个单标签,获取不到innerHTML 
    	  	 对于自结束标签，这个属性没有意义
    	  	 如果需要读取元素节点属性。
    	  	 直接使用元素.属性名
    	  	 所有的属性都适合这个
    	  	 例子：元素.id  元素.name  元素.value
    	  	    注意：class属性不能采用这种方式  class是保留字
    	  	    读取class属性时需要使用元素.className
    	  	    getElementById（）返回的是一个元素，尽量用这个
    	  	    getElementsByTagName()、getElementsByName（）返回的是一个数组
    	  	    这三个都是非常常用的方法
    	  	 */
    	  	alert(inputs[i].className);
    	  };
    	 };
    	 //为id为btn04的按钮绑定一个单击响应函数
    	 //查找#city下所有li节点
    	 var btn04=document.getElementById("btn04");
    	 btn04.onclick=function(){
    	 	获取id为city的元素
    	 	var city=document.getElementById("city");
    	 	//查找#city下所有的li节点，缩小了查找返回
    	 	var lis=city.getElementsByTagName("li");
    	 	//alert(lis.length);  //4
    	 	for(var i=0;i<lis.length;i++){
    	 		alert(lis[i].innerHTML);
    	 	}
    	 };
    	 //返回city下的所有子节点
    	 var btn05=document.getElementById("btn05");
    	 btn05.onclick=function(){
    	 	//获取city节点
    	 	var city=document.getElementById("city");
    	// 	alert(city.childNodes.length); //9
    	//返回#city的所有子节点
    	//Nodes包括所有的，文本，注释，元素都算nodes,
    	//childNodes属性会获取包括文本节点在内的所有节点
    	//根据DOM标签标签间空白也会被当成文本节点
    	//但是IE8没有完全实现这个标准
    	/*注意：在IE8及以下的浏览器中，不会将空白文本当成子节点
    	 所以该属性在IE8中会返回4个子元素而不是其他浏览器是9个*/
    	    var cns=city.childNodes;   
    	//   alert(cns.length);//9，包括了代码书写时候的五个换行的空白内容当成了文本节点
    	 
    	 /*   for(var i=0;i<cns.length;i++){
    	    	alert(cns[i]);  
    	    }
    	*/	/*children属性可以获取当前元素的所有子元素,这个属性只包括子元素，不包括文本节点
    	，这个属性是所有浏览器都兼容的，推荐使用！！！*/
    	    var cns2=city.children;
    	 	alert(cns2.length);  //4
    	 };
    	 
    	 //返回#phone的第一个子节点
    	 var btn06=document.getElementById("btn06");
    	 btn06.onclick=function(){
    	 	//获取id为phone的节点
    	 	var phone=document.getElementById("phone");
    	    //返回phone的第一个子节点
    	   // phone.childNodes[0];
    	   //firstChild可以获取到当前元素的第一个子节点，包括空白文本节点
    	    //	var fir=phone.firstChild;
    	 	//firstElements可以获取到当前元素的第一个子元素节点，不包括文本，元素就是标签
    	 	//这个方法不建议使用，IE8及以下浏览器不兼容
    	 	var fir=phone.firstElementChild;
    	 	alert(fir.innerHTML);
    	 	
    	 };
    	 
    	 //为id为btn07的按钮绑定一个单击响应函数
    	 myClick("btn07",function(){
    	 	//获取id为bj的父节点
    	 	var bj=document.getElementById("bj");
    	 	//返回#bj的父节点
    	 	var pn=bj.parentNode;
    	 	/*innerText
    	 	该属性可以获取到元素内部的文本内容，它和innerHTML 类似，单不同的是
    	 	它会自动将html的标签去掉，只返回文本*/
    	 	alert(pn);
    	 });
    	 //返回#android的前一个兄弟节点
    	 /*如果写两个myClick("btn08",function(){.....});
    	  * 绑定的按钮一样，方法不一样，后面的会把前面的覆盖掉*/
    	 myClick("btn08",function(){
    	 	
    	 	var and=document.getElementById("android");
    	 	var ps=and.previousSibling;//也可能获取到空白的文本
    	 	//previousElementSibling获取前一个兄弟元素，不包括空白文本，IE8及以下不支持
    	 	//var pe=and.previousElementSiblin;
    	 	alert(ps.innerHTML);
    	 });
    	 
    	 
    	 //读取#username的value属性值
    	 myClick("btn09",function(){
    	 	//获取id为username的元素
    	 	var um=document.getElementById("username");
    	 	//读取um的value属性值
    	 	//文本框中的value属性值，就是文本框中填写的内容
    	 	alert(um.value);
    	 	
    	 });
    	 
    	  myClick("btn10",function(){
    	 	//获取id为username的元素
    	 	var um=document.getElementById("username");
    	 	//设置#username的value属性值
    	 	//设置的话直接写，属性名=属性值
    	     um.value="你好，今天天气真不错";
    	 });
    	 //获取#bj的文本值
    	 myClick("btn11",function(){
    	 	 //获取id为北京的元素
    	 	 var bj=document.getElementById("bj");
    	 	// alert(bj.innerText);
    	 	 // alert(bj.innerHTML);如果没标签的话，这两个没什么区别
    	 	 /*获取bj中的文本节点，*/
    	 	//文本节点上的文字可以用属性名nodeValue获取
    	 	alert(bj.firstChild.nodeValue);  //这个方法更麻烦
    	 	
    	 });
    	 
    	 };
  
    </script>
   
</head>
<body>
	<div id="total">
		<div class="inner">
			<p>你喜欢哪个城市？</p>
			<ul id="city">
				<li id="bj">北京</li>
				<li >上海</li>
				<li >东京</li>
				<li >首尔</li>
			</ul>
			<br/>
			<br/>
			<p>你喜欢哪款单机游戏？</p>
			<ul id="game">
				<li id="rl">红警</li>
				<li>实况</li>
				<li>极品飞车</li>
			</ul>
			<br/>
			<br/>
			<p>你的手机操作系统是？</p>
			<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
		</div>
		<div class="inner">
		     gender:
		     <input type="radio" name="gender" value="male"/>male
		     <input type="radio" name="gender" value="female"/>female
		     <br />
		     <br />
		     name:
		     <input type="text" name="name" id="username" value="abcde" />
	    </div>
	</div>
	<div id="btnList">
		<div><button id="btn01">查找#bj节点</button></div>
		<div><button id="btn02">查找所有li节点</button></div>
		<div><button id="btn03">查找name=gender的所有节点</button></div>
		<div><button id="btn04">查找#city下所有li节点</button></div>
		<div><button id="btn05">查找#city下的所有子节点</button></div>
		<div><button id="btn06">返回#phone的第一个子节点</button></div>
		<div><button id="btn07">返回#bj的父节点</button></div>
		<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
		<div><button id="btn09">返回#username的value属性值</button></div>
		<div><button id="btn10">设置#username的value属性值</button></div>
		<div><button id="btn11">返回#bj的文本值</button></div>
		
	</div>
	
</body>
</html>

五、图片切换的练习

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>
       
    </title>
    <!--难点：
    	1.把图片的路径存在一个数组当中
    	首先获取到图片数组的第一个元素，否则用document.getElementsByTagName获取到的是一个数组。
    	因为只能操作元素，不能操作数组。
    	var imgArr=["img/","img/","img/"];
    	2.通过用img.src的属性值来修改要显示的图片
    	var index
    	index++;/index--;
    	img.src=imgAtrr[index];
    	3.灵活设置当前图片的总张数，和当前显示的第几张图片数
    	获取到id为info的元素
    	info.innerHTML=做一个拼串，可以灵活显示。
    	
    	开发思路：
    	功能要绑定函数，什么时候开要始功能
    	要绑定的按钮
    -->
    <style>
       *{
       	margin:0px;
       	padding:0px;
       }
       #outer{
       	width:500px;
       	
       	margin:50px auto;
       	padding:10px;
       	background-color: greenyellow;
       	/*设置内敛样式文本的居中*/
        text-align: center;
        background-size:cover;
        
       }
       img{
       	width:500px;
       	height:400px;
       	
       }
    </style>
    <script type="text/javascript"> 
    	
    	 window.onload=function(){
    	 
    	 	//获取img标签
    	// 	var img=document.getElementsByTagName("img");//这样获取到的是数组
    	//哪怕只有一个元素，上面这种写法获取到的也是数组
    	 	
    	 	//是要获取数组的元素，而不是数组。
    	 	//下面这样的写法获取到的就是元素
    	 	var img=document.getElementsByTagName("img")[0];
    	 	//创建一个数组，用来保存图片路径
    	 	var imgArr=["img/0vfvn55rfey0vfvn55rfey.jpg","img/011b915f101bf8a801206621f7be55.jpg@3000w_1l_0o_100sh.jpg","img/u=1654698843,1250978122&fm=253&fmt=auto&app=120&f=JPEG.webp"
    	 	,"img/u=3784956362,763614624&fm=253&fmt=auto&app=120&f=JPEG.webp","img/u=4076188782,4102717595&fm=253&fmt=auto&app=138&f=JPEG.webp","img/u=2419341326,3742894269&fm=253&fmt=auto&app=120&f=JPEG.webp"];
    	   //创建一个变量，来保存当前正在显示的图片的索引。
    	   var index=0;
    	   
    	   //设置提示文字
    	   //获取id为info的标签
    	   var info=document.getElementById("info");
    	   
    	   	/*点击按钮，切换图片*/
    	 	//获取两个按钮
    	 	var prev=document.getElementById("prev");
    	 	var next=document.getElementById("next");
    	 	//分别为两个按钮绑定单击响应函数
    	 	prev.onclick=function(){
    	 		if(index>0){
    	 			 index--;
    	 		}else{
    	 			index=imgArr.length-1;
    	 		}
             
              img.src=imgArr[index];
              每次点击按钮的时候，都重新设置信息
              info.innerHTML="一共有"+imgArr.length+"张图片，现在是第"+(index+1)+"张图片";
    	 	};
    	 	next.onclick=function(){
    	 		
    	 		//切换图片就是修改imgd的src属性
    	 		//修改的的方法就是属性名=属性值
    	 		if(index<imgArr.length-1){
    	 			index++;
    	 		}else{
    	 			index=0;
    	 		}
    	 	
    	 		img.src=imgArr[index];
    	 		//每次点击按钮的时候，都重新设置信息
    	 		info.innerHTML="一共有"+imgArr.length+"张图片，现在是第"+(index+1)+"张图片";
    	 		
    	 	};
    	 	//切换图片就是修改img标签的src属性
    	 	
    	 };
  
    </script>
   
</head>
<body>
	<div id="outer">
		<p id="info"></p>
		<img src="img/011b915f101bf8a801206621f7be55.jpg@3000w_1l_0o_100sh.jpg" alt="猫">
		<button id="prev">上一张</button>
		<button id="next">下一张</button>
	</div>	
</body>
</html>

六、全选练习

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>
       
    </title>
    <style>
    
    </style>
    <script type="text/javascript"> 
    	window.onload=function(){
    		var items=document.getElementsByName("items");
    		//全选/全不选按钮
    		var checkedAllBox=document.getElementById("checkedAllBox");
    		/*全选按钮
    		 -点击按钮以后，四个多选框全都被选中*/
    		var checkedAllBtn=document.getElementById("checkedAllBtn");
    		checkedAllBtn.onclick=function(){
    			//获取四个多选框items
    			
    		
    			//设置四个多选框变成选中状态
    			//通过多选框的checked属性可以来获取或设置多选框的选中状态
    			for(var i=0;i<items.length;i++){
    				items[i].checked=true;
    			}
    			
    			checkedAllBox.checked=true;
    			
    		};
    		var checkedNoBtn=document.getElementById("checkedNoBtn");
    		checkedNoBtn.onclick=function(){

    			//设置四个多选框变成不选中状态
    			for(var i=0;i<items.length;i++){
    				items[i].checked=false;
    			}
    			
    			checkedAllBox.checked=false;
    		};
    		//反选
    		var checkedRevBtn=document.getElementById("checkedRevBtn");
    		checkedRevBtn.onclick=function(){
    				//将checkedAllBox设置为选中状态
    			checkedAllBox.checked=true;
    			for(var i=0;i<items.length;i++){
    				items[i].checked=!items[i].checked;
    				//判断四个多选框是否全选
    	   			//只要有一个没选中就不是
    	   			if(!items[i].checked){
    	   				//一旦进入判断，则证明不是全选状态
    	   				//将checkedAllBox设置为没选中状态
    	   				checkedAllBox.checked=false;
    	   				
    	   			}
    			}
    			//在反选时也需要判断四个多选框是否全都选中
    		
    			
    		}; 
    		/*提交按钮：
    		 点击按钮之后，将所有选中的多选框弹出*/
    		var sendBtn=document.getElementById("sendBtn");
    		sendBtn.onclick=function(){
    			//遍历items
    			for(var i=0;i<items.length;i++){
    				
    				if(items[i].checked){
    					alert(items[i].value);
    				}
    			}
    		};
    		//全选/全不选
    		//当它选中时候,其余的也选中，当它取消时其余的也取消
    	
    		checkedAllBox.onclick=function(){
    			//this===checkedAllBox
    			//在事件的响应函数中，响应函数是给谁绑定的this就是谁
    			for(var i=0;i<items.length;i++){
    				items[i].checked=this.checked;
    			}
    		};
    
    	   //6.items
    	   /*如果四个多选框都选中，则checkedAllBox也可以选中
    	    如果四个多选框都没选中，则checkedBox也不应该选中*/
    	   for(var i=0;i<items.length;i++){
    	   	items[i].onclick=function(){
    	   		//将checkedAllBox设置为选中状态
    	   		checkedAllBox.checked=true;
    	   		//判断四个多选框是否全选
    	   		for(var j=0;j<items.length;j++){
    	   			//判断四个多选框是否全选
    	   			//只要有一个没选中就不是
    	   			if(!items[j].checked){
    	   				//一旦进入判断，则证明不是全选状态
    	   				//将checkedAllBox设置为没选中状态
    	   				checkedAllBox.checked=false;
    	   				//一旦进入判断，则已经得出结果，不用再继续执行循环
    	   				break;
    	   			}
    	   		}
    	   	};
    	   }
    	
    	};
  
    </script>
   
</head>
<body>
	<form method="post" action="">
		你爱好的运动是？<input type="checkbox"  id="checkedAllBox"/>全选/全不选
		<br />
		<input type="checkbox" name="items" value="足球"/>足球
		<input type="checkbox" name="items" value="篮球"/>篮球
		<input type="checkbox" name="items" value="羽毛球"/>羽毛球
		<input type="checkbox" name="items" value="乒乓球"/>乒乓球
		<br />
		<input type="button"  id="checkedAllBtn" value="全  选"/>
		<input type="button"  id="checkedNoBtn" value="全不选"/>
		<input type="button"  id="checkedRevBtn" value="反选"/>
		<input type="button"  id="sendBtn" value="提交"/>
	</form>
</body>
</html>

七、DOM查询的剩余方法

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>
       
    </title>
    <style>
    
    </style>
    <script type="text/javascript"> 
    	window.onload=function(){
    		/*document的属性
    		 -body
    		 	-写法一：document.body
    		 	-写法二：document.getElementsByTagName("body")[0]
    		 -documentElement
    		 	-document.documentElement保存的是html根标签
    		 -all
    		 	-写法一：document.all
    		 	-写法二：document.getElementsByTagName("*")
    		 document.getElementsByClassName()  不支持IE8及以下
    		 document.querySelector()     只查第一个    支持IE8及以下
    		 document.querySelectorAll()  即便有多个，也会封装到数组中返回 支持IE8及以下
    		 
    		 * 
    		 * */
    		//获取body标签
    		//不写[0]获取到的是一个数组，因为<body>标签只有一个，所以写[0]
    		//方法一
    		//var body=document.getElementsByTagName("body")[0];
    		/*方法二：
    		 * 在document中有一个属性body,它保存的是body的引用
    		 */
    		var body=document.body;//想要获取body，可以直接document.body
    		//documentElement 文本元素
    		//document.documentElement保存的是html根标签
    		var html=document.documentElement;  //html是根标签
    		console.log(html);
    		/*document.all代表的是页面所有的元素(标签)*/
    		//方法一（更简单）
    		var all=document.all;
    		//console.log(all);   //undefined
    		//console.log(typeof all);   //undefined
    		console.log(all.length);    //7
    		for(var i=0;i<all.length;i++){
    			console.log(all[i]);
    		}
    		/* [object HTMLHtmlElement]
    		 * [object HTMLHeadElement]
    		 * [object HTMLMetaElement]
    		 * [object HTMLTitleElement]
    		 * [object HTMLStyleElement]
    		 * [object HTMLScriptElement]
    		 * [object HTMLBodyElement]
    		 */
    		//方法二
    		all=document.getElementsByTagName("*"); *表示所有元素
    		console.log(all.length);    //7
    		console.log(all);            //[object HTMLCollection]
    		
    		/*根据元素的class属性值查询一组元素节点对象
    		 * document.getElementsByClassName()可以根据class属性值获取一组元素节点对象
    		 * 但是该方法不支持IE8及以下的浏览器
    		 */
    		var box1=document.getElementsByClassName("box1");
    		console.log(box1.length);//1
    		
    		var div=document.getElementsByTagName("div");
    		console.log(div.length);//3
    		
    		//获取class为box1中的所有div
    		//.box1 div
    		/*document.querySelector()这个方法是很强强大的
    		 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询你一个元素节点对象
    		 虽然IE8中没有getElementsByClassName()，但是可以使用querySelector()代替
    		 这个方法很灵活，也可以根据id，标签名来查询
    		 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
    		 */
    		var div=document.querySelector(".box1 div");
    		console.log(div.length);
    		console.log(div);                 //[object HTMLDivElement]
    		console.log(div.innerHTML);  //我是box1中的div
    		
    		var box1=document.querySelector(".box1");
    		console.log(box1);    //[object HTMLDivElement]
    		console.log(box1.innerHTML); 
    		/*我是第一个box1
	         	<div>我是box1中的div</div>*/
	         	//必须写.  .box1,否则获取的长度为0
	         	/*document.querySelectorAll()
	         	 * 该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
	         	 * document.querySelectorAll()查询到的是多个
	         	 * document.querySelector()查询到的是一个
	         	 */
    		var box1=document.querySelectorAll(".box1");  //支持IE8以上的浏览器
    		console.log(box1.length); //3
    		console.log(box1);   //[object NodeList]
    		
    		var box2=document.querySelectorAll("#box2");  //支持IE8以上的浏览器
    		console.log(box2.length); //1
    		console.log(box2);   //[object NodeList]
    		//document.querySelectorAll根据id查询，只有唯一的一个，返回的也是数组
    		
    	};
    </script>
   
</head>
<body>
	<div class="box1">
		我是第一个box1
		<div>我是box1中的div</div>
	</div>
	<div class="box1">
		<div>我是box1中的div</div>
	</div>
	<div class="box1">
		<div>我是box1中的div</div>
	</div>
	<div id="box2">
		<div>我是box2中的div</div>
	</div>
</body>
</html>

八、DOM增删改

getElementById() 返回带有指定 ID 的元素。

getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。

getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。

appendChild() 把新的子节点添加到指定节点。

removeChild() 删除子节点

replaceChild() 替换子节点。

insertBefore() 在指定的子节点前面插入新的子节点。

createAttribute() 创建属性节点。

createElement() 创建元素节点。

createTextNode() 创建文本节点。

getAttribute() 返回指定的属性值。

setAttribute() 把指定属性设置或修改为指定的值。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>
       
    </title>
    <style>
    
    </style>
    <script type="text/javascript"> 
    	window.onload=function(){
    		
    		    var li=document.createElement("li");
    			//创建广州节点文本
    			/*document.createTextNode();
    			 可以用来创建一个文本节点对象
    			 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回*/
    			var gzText=document.createTextNode("广州");
    			//将gzText设置li的子节点
    			/*appendChild()
    			 向一个父节点中添加一个新的子节点
    			 用法：父元素.appendChild(子节点)*/
    			/*先创建节点，再创建文本，然后拼在一块儿*/
    			li.appendChild(gzText);
    		    //获取id为city的节点
    			var city=document.getElementById("city");
    		    var bj=document.getElementById("bj");
    		
    		//创建一个“广州”节点，添加到#city下
    		myClick("btn01",function(){
    			
    			// 创建广州节点<li>广州</li>
    			//创建li元素节点
    			/*document.createElement()
    	                         可以用于创建一个元素节点对象
    	                         它需要一个标签名作为参数，将会根据该标签名创建元素节点对象
    	                         并将创建好的对象作为返回值返回
    	         * */
    			
    		    //将广州添加到city下
    		    city.appendChild(li);
    			
    		});
    		
    		//将”广州“节点添加到#bj前面
    		myClick("btn02",function(){
    			
    			/*insertBefore()在指定的子节点前面插入新的子节点，所有是父节点来调用
    			 语法：
    			 父节点.insertBefore(新节点,旧节点)*/
    			city.insertBefore(li,bj);  //新节点在前面，旧节点在后面
    		});
    		
    		//使用”广州“节点替换北京节点
    		myClick("btn03",function(){
    			/*replaceChild()
    			 可以使用指定的子节点替换已有的子节点
    			 语法：
    			 父节点.replaceChild(新节点,旧节点)*/
    			city.replaceChild(li,bj);
    		});
    		
    		//删除北京节点
    		myClick("btn04",function(){
    			/*removeChild()可以删除一个子节点
    			 语法：父节点.removeChild(子节点)*/
    		//	city.removeChild(bj);  //这是知道父元素是什么的情况
    			
    			//如果不知道bj的父节点是什么,这种方式更方便简单一点儿
    			bj.parentNode.removeChild(bj);
  
    		});
    		
    		//读取#city内的HTML代码
    		myClick("btn05",function(){
    			alert(city.innerHTML);
    		});
    		
    		//设置#bj内的HTML代码
    		myClick("btn06",function(){
    			bj.innerHTML="海淀";
    		});
    		
    		myClick("btn07",function(){
    			//向city中添加广州，在原来的基础上增加广州
    	//		city.innerHTML+="<li>广州</li>";
    			/*使用innerHTML 也可以完成DOM的增删改的相关操作
    			 这个操作的本质是将之前的内容都删了，然后将增加广州之后的内容（都是新的）再
    			 全部写到<city>里面，如果旧的绑定事件了，这么一操作就都没有了
    			 不建议使用
    			 
    			 上面那种写法，旧的东西不改变，只是新增了”广州“这个新的
    			 
    			 一般我们会两种方式结合使用
    			 * */
    			//创建一个li
    			var li=document.createElement("li");
    			//向li中设置文本
    			li.innerHTML="广州";
    			//将li添加到city中
    			city.appendChild(li);
    		});
    		//为所有的获取按钮和绑定函数写一个可以共用的方法
    		function myClick(idStr,fun){
    			var btn=document.getElementById(idStr);
    			btn.onclick=fun;
    		}
    	};
    </script>
   
</head>
<body>
	<div class="inner">
			<p>你喜欢哪个城市？</p>
			<ul id="city">
				<li id="bj">北京</li>
				<li >上海</li>
				<li >东京</li>
				<li >首尔</li>
			</ul>
	</div>
	<button id="btn01">创建一个“广州”节点添加到#city下</button>
	<button id="btn02">将“广州”节点插入到#bj前面</button>
	<button id="btn03">使用“广州”节点替换#bj节点</button>
	<button id="btn04">删除#bj节点</button>
	<button id="btn05">读取#city内的HTML代码</button>
	<button id="btn06">设置#bj内的HTML代码</button>
	<button id="btn07">创建一个“广州”节点添加到#city下</button>
</body>
</html>

九、添加删除记录-删除、添加、修改

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>
       
    </title>
    <style>
    	#employeeTable{
    		border:1px solid black;	
    		margin:0 auto;
    	}
    	td,th{
    		border:1px solid black;	
    		cellspacing:0;
    	}
    	#formDiv{
    		border:1px solid black;	
    		text-align: center;
    		width:300px;
    		height:300px;
    		margin:10px auto;	
    	}
    </style>
    <script type="text/javascript"> 
    	window.onload=function(){
    		/*点击超链接。删除一个员工的信息*/
    		//获取所有的超链接
    		/*删除tr的响应函数*/
    		function delA(){
    			var allA=document.getElementsByTagName("a");  //得到的是一个数组
    		//为每个超链接都绑定一个单击响应函数
    		for(var i=0;i<allA.length;i++){
    			allA[i].onclick=function(){
    				
    				//点击超链接之后，删除超链接所在的那一行
    				//this代表的就是a,这里我们点击哪个超链接this就是谁
    				//获取当前tr
    				var tr=this.parentNode.parentNode;
    				//获取要删除的员工的名字
    			//方法一	var name=tr.getElementsByTagName("td")[0].innerHTML;
    			    var name=tr.children[0].innerHTML;
    				//删除之前弹出提示框
    				/*confirm()用于弹出一个带有确认和取消按钮的提示框
    				 需要一个字符串作为参数，该字符串将会作为提示文字显示出来
    				 如果用户点击确认则会fanhuitrue，如果点击取消则返回false*/
    				var flag=confirm("确认删除"+name+"吗?");
    				if(flag){
    					//删除tr
    				    tr.parentNode.removeChild(tr);
    				
    				}
    				/*点击超链接以后，超链接会跳转页面，这个是超链接的默认行为
    				 此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为*/
    				return false;  //取消跳转的默认行为
    			};  
    		};
    		}
    		
    		/*添加员工功能；
    		 -点击按钮以后，将员工的信息添加到表格中*/
    		//为提交按钮，绑定一个单击响应函数
    		var addEmpButton=document.getElementById("addEmpButton");
    		addEmpButton.onclick=function(){
    			//获取用户添加的员工信息
    			//获取员工的名字
    			//文本框的内容就是文本框的value属性
    			var name=document.getElementById("empName").value;
    	//		alert(name);//aaa
    			//获取员工的邮箱
    			var email=document.getElementById("email").value;
    			//获得员工的薪资
    			var salary=document.getElementById("salary").value;
    			
    			//创建一个a元素
    			var a=document.createElement("a");
    			//需要将获取到的信息保存到tr中
    			//创建一个tr
    			var tr=document.createElement("tr");
    			//创建4个td
    			var nameTd=document.createElement("td");
    			var emailTd=document.createElement("td");
    			var salaryTd=document.createElement("td");
    			var aTd=document.createElement("td");
    			
    			//创建文本节点
    			var nameText=document.createTextNode(name);
    			var emailText=document.createTextNode(email);
    			var salaryText=document.createTextNode(salary);
    			var delText=document.createTextNode("Delete");
    			
    			//把文本节点添加到td中
    			nameTd.appendChild(nameText);
    			emailTd.appendChild(emailText);
    			salaryTd.appendChild(salaryText);
    			
    			//向a中添加文本
    			a.appendChild(delText);
    			//将a添加到td中
    			aTd.appendChild(a);
    			
    			//把td添加到tr中
    			tr.appendChild(nameTd);
    			tr.appendChild(emailTd);
    			tr.appendChild(salaryTd);
    			tr.appendChild(aTd);
    			
    			//向a中添加href属性
    			a.href="javascript:;"
    			//为新添加的a再绑定一次单击响应函数
    			a.onclick=delA;
    			
    			
    			//获取table
    			var employeeTable=document.getElementById("employeeTable");
    			//获取employeeTable中的tbody
    			var tbody=employeeTable.getElementsByTagName("tbody")[0];
    			//将tr添加到tbody中
    			tbody.appendChild(tr);
    			
    		};
    		
    	};
    </script>
   
</head>
<body>
	<table id="employeeTable" cellspacing="0">
		<tr>
			<th>Name</th>
			<th>Email</th>
			<th>Salary</th>
			<th>&nbsp;</th>
		</tr>
		<tr>
			<td>Tom</td>
			<td>tom@tom.com</td>
			<td>5000</td>
			<td><a href="deleteEmp?id=001">Delete</a></td>
		</tr>
		<tr>
			<td>Jerry</td>
			<td>jerry@sohu.com</td>
			<td>8000</td>
			<td><a href="deleteEmp?id=002">Delete</a></td>
		</tr>
		<tr>
			<td>Bob</td>
			<td>bob@tom.com</td>
			<td>10000</td>
			<!--
                              也可以通过<a href="javascript:;"></a>取消默认的跳转行为
            -->
			<td><a href="javascript:;">Delete</a></td>
		</tr>
	</table>
	<div id="formDiv">
		<h4>添加新员工</h4>
		<table>
			<tr>
				<td class="word">name:</td>
				<td class="inp">
					<input type="text" name="empName" id="empName">
				</td>
			</tr>
			<tr>
				<td class="word">email:</td>
				<td class="inp">
					<input type="text" name="email" id="email">
				</td>
			</tr>
			<tr>
				<td class="word">salary:</td>
				<td class="inp">
					<input type="text" name="salary" id="salary">
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button id="addEmpButton" value="abc">
						Submit
					</button>
				</td>
			</tr>
		</table>
	</div>
</body>
</html>

上述功能的另一种实现方式

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>
       
    </title>
    <style>
    	#employeeTable{
    		border:1px solid black;	
    		margin:0 auto;
    	}
    	td,th{
    		border:1px solid black;	
    		cellspacing:0;
    	}
    	#formDiv{
    		border:1px solid black;	
    		text-align: center;
    		width:300px;
    		height:300px;
    		margin:10px auto;	
    	}
    </style>
    <script type="text/javascript"> 
    	window.onload=function(){
    		/*点击超链接。删除一个员工的信息*/
    		//获取所有的超链接
    		/*删除tr的响应函数*/
    		function delA(){
    			var allA=document.getElementsByTagName("a");  //得到的是一个数组
    		//为每个超链接都绑定一个单击响应函数
    		for(var i=0;i<allA.length;i++){
    			allA[i].onclick=function(){
    				
    				//点击超链接之后，删除超链接所在的那一行
    				//this代表的就是a,这里我们点击哪个超链接this就是谁
    				//获取当前tr
    				var tr=this.parentNode.parentNode;
    				//获取要删除的员工的名字
    			//方法一	var name=tr.getElementsByTagName("td")[0].innerHTML;
    			    var name=tr.children[0].innerHTML;
    				//删除之前弹出提示框
    				/*confirm()用于弹出一个带有确认和取消按钮的提示框
    				 需要一个字符串作为参数，该字符串将会作为提示文字显示出来
    				 如果用户点击确认则会fanhuitrue，如果点击取消则返回false*/
    				var flag=confirm("确认删除"+name+"吗?");
    				if(flag){
    					//删除tr
    				    tr.parentNode.removeChild(tr);
    				
    				}
    				/*点击超链接以后，超链接会跳转页面，这个是超链接的默认行为
    				 此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为*/
    				return false;  //取消跳转的默认行为
    			};  
    		};
    		}
    		
    		/*添加员工功能；
    		 -点击按钮以后，将员工的信息添加到表格中*/
    		//为提交按钮，绑定一个单击响应函数
    		var addEmpButton=document.getElementById("addEmpButton");
    		addEmpButton.onclick=function(){
    			//获取用户添加的员工信息
    			//获取员工的名字
    			//文本框的内容就是文本框的value属性
    			var name=document.getElementById("empName").value;
    	//		alert(name);//aaa
    			//获取员工的邮箱
    			var email=document.getElementById("email").value;
    			//获得员工的薪资
    			var salary=document.getElementById("salary").value;
    			
    			//需要将获取到的信息保存到tr中
    			//创建一个tr
    			var tr=document.createElement("tr");
    			
    			//设置tr中的内容
    			tr.innerHTML="<td>"+name+"</td>"+
    							"<td>"+email+"</td>"+
    							"<td>"+salary+"</td>"+
    							"<td><a href='javascript:;'>Delete</a></td>";
    			a=tr.getElementsByTagName("a")[0];
    			a.onclick=delA;
    			
    			//获取table
    			var employeeTable=document.getElementById("employeeTable");
    			//获取employeeTable中的tbody
    			var tbody=employeeTable.getElementsByTagName("tbody")[0];
    			//将tr添加到tbody中
    			tbody.appendChild(tr);
    		/*这样写也可以，不过不推荐	
    		 * tbody.innerHTML+="<tr>"+
    							"<td>"+name+"</td>"+
    							"<td>"+email+"</td>"+
    							"<td>"+salary+"</td>"+
    							"<td><a href='javascript:;'>Delete</a></td>"
    							+"</tr>";
    		*/
    		};
    		
    	};
    </script>
   
</head>
<body>
	<table id="employeeTable" cellspacing="0">
		<tr>
			<th>Name</th>
			<th>Email</th>
			<th>Salary</th>
			<th>&nbsp;</th>
		</tr>
		<tr>
			<td>Tom</td>
			<td>tom@tom.com</td>
			<td>5000</td>
			<td><a href="deleteEmp?id=001">Delete</a></td>
		</tr>
		<tr>
			<td>Jerry</td>
			<td>jerry@sohu.com</td>
			<td>8000</td>
			<td><a href="deleteEmp?id=002">Delete</a></td>
		</tr>
		<tr>
			<td>Bob</td>
			<td>bob@tom.com</td>
			<td>10000</td>
			<!--
                              也可以通过<a href="javascript:;"></a>取消默认的跳转行为
            -->
			<td><a href="javascript:;">Delete</a></td>
		</tr>
	</table>
	<div id="formDiv">
		<h4>添加新员工</h4>
		<table>
			<tr>
				<td class="word">name:</td>
				<td class="inp">
					<input type="text" name="empName" id="empName">
				</td>
			</tr>
			<tr>
				<td class="word">email:</td>
				<td class="inp">
					<input type="text" name="email" id="email">
				</td>
			</tr>
			<tr>
				<td class="word">salary:</td>
				<td class="inp">
					<input type="text" name="salary" id="salary">
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button id="addEmpButton" value="abc">
						Submit
					</button>
				</td>
			</tr>
		</table>
	</div>
</body>
</html>

Komorebi_9999

关注

9
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
0
评论
web前端javaScript笔记——（11）DOM

属性此事件发生在何时onabort 图像的加载被中断。onblur 元素失去焦点。anchange 域的内容被改变onclick 当用户点击某个对象时调用的事件句柄。ondblclick 当用户双击某个对象时调用的事件句柄。
复制链接

扫一扫