Dom常用属性兄弟属性节点操作发布评论效果删除节点

最新推荐文章于 2024-08-13 16:15:07 发布

敲代码的皮皮

最新推荐文章于 2024-08-13 16:15:07 发布

阅读量154

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/cc12345_10/article/details/116275341

版权

1.Dom常用属性


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul class="list">
			<li>哪吒</li>
			<li>金吒</li>
			<li>木吒</li>
			<li class="far">李靖</li>
		</ul>
	</body>
</html>
<script type="text/javascript">
	/*
	一.父子关系操作
	1.childNodes 和 children
	2.firstChild 和 firstElementChild
	  firstChild 获取元素的第一个子节点，等价于 childNodes[0]
	  firstElementChild 获取元素的第一个子元素，等价于 children[0],ie6 7 8 不支持
	3. lastChild 和 lastElementChild
	   lastChild 获取元素的最后一个子节点
	   lastElementChild 获取元素的最后一个子元素，ie6 7 8 不支持
	4. parentNode 和 parentElement 获取父元素
	   效果一样，但是parentNode的兼容性更好
	*/ 
   var list = document.querySelector('.list');
   console.log(list.childNodes);
   console.log(list.children);
   console.log(list.firstChild);
   console.log(list.firstElementChild);
   
   console.log(list.lastChild);
   console.log(list.lastElementChild);
   
   console.log(list.parentNode);
   console.log(list.parentElement);
   
   var far = document.querySelector('.far');
   far.onclick = function(){
	   // this.parentElement.style.display = 'none';
	   this.parentNode.style.display = 'none';
   };
</script>

2.兄弟属性


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>兄弟属性</title>
	</head>
	<body>
		<ul id="list">
			<li>宋江</li>
			<li>卢俊义</li>
			<li class="sun" id="sun">公孙胜</li>
			<li>吴用</li>
			<li>鲁智深</li>
			<li>林冲</li>
		</ul>
		<p id="bai">
			赵钱孙李
			周吴郑王
			冯陈褚卫
			蒋沈韩杨
		</p>
	</body>
</html>
<script type="text/javascript">
	/*
	二.兄弟关系
	1.nextSibling 和 nextElementSibling
	  nextSibling 下一个兄弟节点,高版本浏览器会把换行符作为text节点
	  nextElementSibling 下一个兄弟元素，ie6 7 8 不支持
	2.previousSibling 和 previousElementSibling 
	  previousSibling 上一个兄弟节点,高版本浏览器会把换行符作为text节点
	  previousElementSibling 上一个兄弟元素，ie6 7 8 不支持
	*/
   // var sun = document.querySelector('.sun');
	var sun = document.getElementById("sun");
   console.log(sun.nextSibling);
   console.log(sun.nextElementSibling);
   console.log(sun.previousSibling);
   console.log(sun.previousElementSibling);
   
   //封装一个firstElementChild,要求是兼容ie和标准浏览器
	function getFirstElementChild(ele){
		// 如果参数不存在
		if(!ele){
			return null;
		}
		
		//参数存在
		var f = ele.firstChild;
		while(f.nodeType!=1){
			f = f.nextSibling;
			// 如果子节点全部遍历一遍，仍然没有元素节点
			if(f==null){
				return null;
			}
		}
		return f;
	}
	var list = document.getElementById("list");
	console.log(getFirstElementChild(list));
	var p = document.getElementById("bai");
	console.log(getFirstElementChild(p));
	
	var s = 1;
	for(var i=1;i<6;i++){
		s*=i;
	}
	console.log('5的阶乘是'+s);
	// 使用递归算法，注意递归一定要有结束时机
	// 递归：函数中调用该函数自己，一定要有结束时机
	function digui(n){
		if(n==1){
			return 1;
		}
		return n*digui(n-1);
	}
	
	console.log('10的阶乘是'+digui(10));
	
	// 采用递归的方式，获取上一个兄弟元素，要求兼容 ie低版本
	function getPrev(ele){
		if(!ele){
			return null;
		}
		//获取元素的上一个节点
		var p = ele.previousSibling;
		// 判断p是否存在
		if(!p){
			return null;
		}
		return p.nodeType==1?p:getPrev(p);
	}
	
	console.log(getPrev(sun));
	var node = p.childNodes[0];
	 console.log(getPrev(node));
	 
	 // 获取第一个子元素
	 function getFirst(ele){
	 	if(!ele){
	 		return null;
	 	}
	 	
	 	//参数存在
	 	var f = ele.firstChild;
	 	if(f.nodeType==1){
			return f;
		}else{
			return getNext(f);
		}
	 }
	 function getNext(ele){
	 	if(!ele){
	 		return null;
	 	}
	 	//获取元素的下一个节点
	 	var p = ele.nextSibling;
	 	// 判断p是否存在
	 	if(!p){
	 		return null;
	 	}
	 	return p.nodeType==1?p:getNext(p);
	 }
	</script>

3.节点操作


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>节点操作</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			#wp {
				width:200px;
				height: 200px;
				background: #04BE02;
				border: 1px #f00 solid;
				margin:20px auto 0;
			}
			#cont {
				width:100px;
				height: 100px;
				background: #ff0;
			}
			#content {
				width:400px;
				border: 1px #f00 solid;
				margin: 30px auto;
				display: flex;
				flex-wrap: wrap;
			}
			.son,.child {
				width:100px;
				height:100px;
				margin:10px;
				background: #04BE02;
				color: #fff;
				font-size:50px;
			}
			.child {
				background: #f00;
			}
			.aa {
				width:200px;
				height:200px;
			}
		</style>
	</head>
	<body>
		<div id="wp"></div>
		<ul id="list">
		</ul>
		<div id="content"></div>
		<button id="btn">点击添加</button>
		<button id="btn1">点击插入元素</button>
		<button id="btn2">点击添加图片</button>
	</body>
</html>
<script type="text/javascript">
	var wp = document.getElementById("wp");
	wp.innerHTML += '<div id="cont"></div>';
	var cont = document.getElementById("cont");
	cont.onclick = function(){
		alert(123);
	};
	console.time('运行时间');
	wp.innerHTML = '<div id="cont"></div>';
	console.timeEnd('运行时间');
	/* 
	innerHTML的问题
	 1.innerHTML会引起底层从新刷新，刷新的同时会引起内部所有元素的刷新，也就是说，刷新之后的元素，不是原来的那个元素，点击事件加载在原来的那个元素上，所以点击不会生效
	 2. innerHTML每次刷新会很耗时
	 
	 createElement(元素名) 创建一个元素
	 返回值是 创建的新元素节点
	 
	 把元素节点添加到父级
	 父级.appendChild(子元素);
	 把元素添加到父级的最后面
	*/ 
   var list = document.getElementById("list");
   var html = '';
   console.time('运行时间1');
   for(var i=0;i<2;i++){
	   // list.innerHTML +='<li>'+i+'</li>'; 1.14ms
	   // html+='<li>'+i+'</li>'; 1 ms
	   var li = document.createElement('li');
	   li.innerHTML = i;
	   list.appendChild(li);
   }
   // list.innerHTML = html;
   console.timeEnd('运行时间1');
   
   var btn = document.getElementById("btn");
   var content = document.getElementById("content");
   var n = 0;
   btn.onclick = function(){
	   n++;
	   var son = document.createElement('div');
	   son.className = 'son';
	   son.onclick = function(){
		   alert(n);
	   };
	   son.innerText = n;
	   content.appendChild(son);
   };
  /*
  2. 向父级插入一个元素
  语法： 父级元素.insertBefore(需要插入的元素，父元素中的子元素);、
  把 参数1 插入到 参数2 之前
  该函数的参数必须是两个
  如果第二个参数为null或者是undefined的时候，该函数等价于appendChild()
  */ 
	var m = 0;
	var btn1 = document.getElementById("btn1");
	btn1.onclick = function(){
		m++;
		var son2 = content.children[1];
		var div = document.createElement('div');
		div.className = 'child';
		div.innerHTML = m;
		content.insertBefore(div,son2);
	};
	var btn2 = document.getElementById("btn2");
	btn2.onclick = function(){
		var img = document.createElement('img');
		img.src = '../images/a.jpg';
		img.className = 'aa';
		var body = document.body;
		body.insertBefore(img,btn2);
	};
</script>

4.发表评论效果


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>发表评论</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			#say {
				width:600px;
				height:60px;
			}
			#wp {
				width:800px;
				margin:50px auto 0;
				border:1px #f00 solid;
			}
			#wp div {
				margin:10px;
				padding:10px;
				line-height:30px;
				border-radius:20px;
				background:#f0f0f0;
			}
		</style>
	</head>
	<body>
		<textarea id="say"></textarea>
		<button type="button" id="btn">点击</button>
		<div id="wp">
		</div>
	</body>
</html>
<script type="text/javascript">
	var say = document.getElementById('say');
	var btn = document.getElementById('btn');
	var wp = document.getElementById('wp');
	btn.onclick = function(){
		// trim() 去掉左右两边的空格
		var val = say.value.trim();
		if(val==''){
			alert('请输入内容');
			return;
		}
		var son = document.createElement('div');
		son.innerHTML = val;
		// 获取第一个子元素
		var first = wp.firstElementChild;
		// 把son插入到第一个子元素之前
		wp.insertBefore(son,first);
		say.value = '';
	};
</script>

5.删除节点


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>删除节点</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			#wp {
				width:200px;
				height: 200px;
				background: #04BE02;
				border: 1px #f00 solid;
				margin:20px auto 0;
			}
			#wp div {
				width:100px;
				height:50px;
				background:#ff0;
				margin:30px auto;
			}
			#wp .col {
				background: #f60;
			}
			.abc {
				width:200px;
				height:200px;
				background: #FF6600;
				margin:30px auto;
			}
		</style>
	</head>
	<body>
		<div id="wp">
			<div>1</div>
			<div>2</div>
		</div>
		<button id="btn">点击删除</button>
		<button id="btn1">点击替换</button>
		<button id="btn2">点击克隆</button>
		
		<div class="abc">
			<ul>
				<li>
					<div>克隆</div>
				</li>
			</ul>
		</div>
		<button id="btn3">点击克隆</button>
	</body>
</html>
<script type="text/javascript">
	/*
	删除子元素
	父级元素.removeChild(要删除的元素)
	参数的必须是一个元素节点
	返回值是要删除的那个节点
	删除节点之前，必须要先找到这个节点
	*/
	var btn = document.getElementById('btn');
	var wp = document.getElementById('wp');
	btn.onclick = function(){
		var ele = wp.firstElementChild;
		var back = wp.removeChild(ele);
		console.log(back);
	};
	/*
	替换节点
	父元素.replaceChild(替换的节点元素,被替换的节点元素);
	返回值是 被替换的节点元素
	*/ 
   var btn1 = document.getElementById('btn1');
   btn1.onclick = function(){
	   var div = document.createElement('div');
	   div.className = 'col';
	   
	   //获取要被替换的元素
	   var first = wp.children[0];
	   
	   var back = wp.replaceChild(div,first);
	   console.log(back);
   };
   /*
   克隆
   被克隆的元素.cloneNode()
   如果参数为
   true：深层拷贝，会把该节点中的子级，以及子级中的内容都复制出来
   false：不复制子级节点中的任何内容(默认)
   
   该方法只会复制节点本身，不会复制节点上绑定的事件
   返回值是拷贝出来的对象
   */
   var btn2 = document.getElementById('btn2');
   btn2.onclick = function(){
	   var first = wp.children[0];
	   var ele = first.cloneNode(true);
	   console.log(ele);
   };
   
   var abc = document.querySelector('.abc');
   abc.onclick = function(){
	   alert('此处无法克隆');
   };
   
   var btn3 = document.getElementById('btn3');
   btn3.onclick = function(){
	   var body = document.body;
	   var clon = abc.cloneNode(true);
	   
	   var back = body.insertBefore(clon,btn3);
	   console.log(back);
   };
</script>

敲代码的皮皮

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Dom常用属性兄弟属性节点操作发布评论效果删除节点

1.Dom常用属性<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <ul class="list"> <li>哪吒</li> <li>金吒</li> <li>木吒</li>
复制链接

扫一扫