4.JavaScript核心BOM操作学习（界面交互功能）——节点的知识点，通过JavaScript完成简单留言版的实现

最新推荐文章于 2022-11-25 14:41:31 发布

愿时间能学会宽恕

最新推荐文章于 2022-11-25 14:41:31 发布

阅读量230

点赞数

分类专栏：网页前端开发js,vue等知识文章标签： js css javascript html

尊重版权，转载需指明

本文链接：https://blog.csdn.net/getture/article/details/107959374

版权

网页前端开发js,vue等知识专栏收录该内容

24 篇文章 0 订阅

订阅专栏

进行JavaScriptDOMBOM操作的学习，第四天了
进度有些小慢
兄弟节点
下一个兄弟节点：node.nextSibling
上一个兄弟节点：node.previousSibling

下一个元素节点：node.nextElementSibling
上一个元素节点：node.previousElementSibling
（有兼容性问题IE9以上）

<body>
	<div>刘备</div>
	<span>关羽</span>
	<table>张飞</table>
	<script> 
		var firdiv = document.querySelector('div');
		var firtable = document.querySelector('table');
		console.log(firdiv.nextSibling);
		console.log(firdiv.previousSibling);
		//输出是#test
		//nextSibing 下一个节点，包含元素节点和文本节点
		//previousSibling 上一个节点，包含元素节点和文本节点

		console.log(firdiv.nextElementSibling);
		//输出的是<span>关羽<span>
		console.log(firtable.previousElementSibling);
		//输出的是<span>关羽</span>
	</script>
</body>

案例：下拉菜单

颜色的改变也可以通过hover来实现，具体hover使用方法可以百度搜索，用hover方法可以很简单来实现
本例中采用循环方法来实现是为了练习子节点的使用

<style>
	*{
		padding:0px;
	}
	.main_tab{
		width:350px;
	}
	.ul_sty{
		width:100px;
		height:30px;
		float:left;
		display:block;
		cursor:pointer;
		font-size:15px;
		text-align:center;
		list-style:none;
	}
	.hide_sty{
		display:none;
	}
	.red_bgc{
		background-color:red;
	}
	.nav{
	}
</style>
<body>
	<div class="main_tab">
		<ul class="ul_sty">
 			<div>
 				大写
  			</div>
  			<div class="hide_sty">
 				<li>A</li>
				<li>B</li>
				<li>C</li>
			</div>
		</ul>
		<ul class="ul_sty">
			<div>
				小写
     			</div> 
     			<div class="hide_sty">
   				<li>a</li>
   				<li>b</li>
   				<li>c</li>
   			</div>
  		</ul>
  		<ul class="ul_sty">	
  			<div>
  				数字
  			</div>
  			<div class="hide_sty">
   				<li>1</li>
   				<li>2</li>
   				<li>3</li>
   			</div>
  		</ul>
	</div>
	<script>
		var nav = document.querySelector('.main_tab').querySelectorAll('ul');
		for(var i = 0 ;i < nav.length;i++){
			nav[i].setAttribute('index',i)
			nav[i].onmousemove= function(){
			    	var mds = this.getAttribute('index');
				for(var j =0;j<nav.length;j++){
					nav[j].children[0].style.background='';
					nav[j].children[1].style.display='none';
				}
				this.children[0].style.background='red';
				this.children[1].style.display='block';
				for(var j = 0;j< nav[mds].children[1].children.length;j++){
					nav[mds].children[1].children[j].onmousemove=function(){
						for(var n =0 ; n<nav[mds].children[1].children.length;n++){
							nav[mds].children[1].children[n].style.backgroundColor='';
						}
						this.style.backgroundColor='pink';
					}
				}
			}
		}
	</script>
</body>

但好像将JavaScript代码修改为下方代码，更加美观

<script>
  var nav = document.querySelector('.main_tab').querySelectorAll('ul');
  for(var i = 0 ;i < nav.length;i++){
   nav[i].setAttribute('index',i)
   nav[i].onmouseover= function(){
       var mds = this.getAttribute('index');
    this.children[0].style.background='red';
    this.children[1].style.display='block';
    for(var j = 0;j< nav[mds].children[1].children.length;j++){
     nav[mds].children[1].children[j].onmousemove=function(){
      for(var n =0 ; n<nav[mds].children[1].children.length;n++){
       nav[mds].children[1].children[n].style.backgroundColor='';
      }
      this.style.backgroundColor='pink';
     }
    }
   }
   nav[i].onmouseout=function(){
     this.children[0].style.background='';
     this.children[1].style.display='none';
   }
  }
 </script>

4.创建节点
①创建节点
document.createElement(‘tagName’)

②添加节点
node.appendChild(child)
将一个节点添加到指定父节点的子节点列表的末尾
   参数：
      node:父节点
      child:子节点

③指定位置添加节点
node.insertBefore(child,指定元素)
在指定位置前面插入节点

<body>
	<div>
		<span>hello world</span>
	<div>
	<script>
		//创建节点
		var li = document.createElement('li');
		//添加节点
		var div=document.querySelector('div');
		div.appendChild(li);		
		//指定位置添加节点
		var li2 = document.createElement('li');
		div.insertBefore(li2,div.children[0]);
	</script>
</body>

5.删除节点
①删除节点
node.removeChild(child)
从DOM中删除一个子节点，返回删除的节点

<body>
	<ul>
		<li>关羽</li>
		<li>张飞</li>
		<li>黄忠</li>
		<li>马超</li>
		<li>赵云</li>		
	</ul>
	<button>删除</button>
	<script>
		var btn=document.querySelector('button');
		var list=document.querySelector('ul');
		btn.onclick=function(){
			if(list.children.length==0){
			//将btn禁用
				this.disabled=true;
			}
			else{
				list.removeChild(list.children[0]);
   			}
		}
	</script>
</body>

6.复制节点
node.cloneNode()
返回调用该方法的结点的一个副本，
括号为空或者里面为false，为浅拷贝：只复制标签不复制内容
括号里面为true为深拷贝，复制内容

<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
	<script>
		var ul= document.querySelector('ul');
		var lili = ul.children[0].cloneNode();
		var lili2 = ul.children[0].cloneNode('true');
		ul.insertBefore(lili,ul.children[0]);
		ul.insertBefore(lili2,ul.children[0]);
	</script>
</body>

案例：留言板

先简单说一下一些属性
属性一 margin()
margin: top, right , bottom, left;
margin: top, right-left, bottom;
margin: top-bottom, right-left;

属性二 word-wrap: break-word;
用于文字超出容器大小时进行换行

属性三 <a href=“javascript:;”
这样可以使得a标签不会跳转

<style>
	*{
		padding:0px;
	}
	.main_bgc{
		width:300px;
		height:200px;
		border-width:1px;
		border-style:solid;
		border-color:pink;
	}
	.main_bgc,.btn_sty,.center{
	  	display:block;
  		margin:0 auto;
	}
	.second_bgc{
		width:300px;
	}
	li{
		list-style:none;
		width:300px;
		height:50px;
		font-size:10px;
		border-width:1px;
		border-style:solid;
		margin-top:10px;
		word-wrap:break-word;
	}
	.btn_sty{
		border:none;
		width:100px;
		cursor:pointer;
	}
	 button:hover{
  		background-color: pink;
 	}
</style>
<body>
	<div>
		<textarea cols="8" class="main_bgc" rows="20"></textarea>
		<button class="btn_sty">提交</button>
		<div class="center second_bgc">
  			<ul>
   				<li>这是第一个留言</li>
  			</ul>
 		</div>
	</div>
	<script>
		var liuyan = document.querySelector('ul');
		var text= document.querySelector('textarea');
		var btn = document.querySelector('button');
		btn.onclick=function(){
			if(text.value==''){
				alert('请输入您的留言');
			}
			else{
			  	var lili = document.createElement('li');
			  	lili.innerHTML=text.value+"<a href='javascript:;' style='float:right'>删除</a>";
			  	liuyan.insertBefore(lili,liuyan.children[0]);
			  	text.value='';			  	
			}
			var as=document.querySelectorAll('a');
   			for(var i=0;i<as.length;i++){
    				as[i].onclick=function(){
    					liuyan.removeChild(this.parentNode);
    				}
   			}
		}
	</script>
</body>

第四天晚上0.03了，很晚了，但还是没学了多少，只是看到了47，照这个速度要十来天才能结束，但还是尽量抓紧，不得不说要一个案例一个案例掌握确实不简单，至于我为什么这么慢，因为我想多熟悉HTML和CSS所以都是现在记事本上敲，然后进行检查，然后看视频比对。这样学的也很多哦
我刚刚看了一下课程，大概是到127以后都是案例了，这样就会比较快了，但7天不是很现实了