笔记11-DOM2

最新推荐文章于 2024-10-10 14:39:11 发布

鲨鱼灬辣椒

最新推荐文章于 2024-10-10 14:39:11 发布

阅读量126

点赞数 1

分类专栏：前端文章标签： js javascript

本文链接：https://blog.csdn.net/qq_42061122/article/details/112794052

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

笔记11-DOM2

一、节点的操作

父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）

//一般不使用
childNodes 获取当前元素节点的所有子节点

firstChild 获取当前元素节点的第一个子节点

lastChild 获取当前元素节点的最后一个子节点

previousSibling 获取当前节点的前一个同级节点 -(678不支持)

nextSibling 获取当前节点的后一个同级节点 -(678不支持)

以上五中方法都包含空白文本节点

//元素节点的操作方法 
firstElementChild   获取当前元素节点的第一个元素子节点

lastElementChild  获取当前元素节点的最后一个元素子节点

previousElementSibling 查找当前元素的上一个元素

nextElementSibling  查找当前元素的下一个元素  都是兄弟关系

parentNode 获取当前节点的父元素

children 获取所有的子节点  不返回其他节点

二、DOM尺寸和位置

DOM尺寸

box.style.width
box.style.height
只能获取到内联style属性的CSS样式中的宽和高，如果有，获取;如果没有，则返回空

box.clientWidth
box.clientHeight
返回了元素大小，但没有单位，默认单位是px，如果设置了其他的单位，比如100em之类，返回出来的结果还会转换为px像素（不含边框） width + padding值（设置成怪异盒模型同样会将border排除）

box.clientLeft
box.clientTop    获取左边框和上边框的宽度

box.scrollWidth
box.scrollHeight
获取滚动内容的元素大小（当元素出现滚动条时，此属性指全部滚动内容的宽高）返回了元素大小，默认单位是px。如果没有设置任何CSS的宽和高度，它会得到计算后的宽度和高度  整个内容的

box.offsetWidth
box.offsetHeight
返回了元素大小，默认单位是px。如果没有设置任何CSS的宽和高度，他会得到计算后的宽度和高度
包含盒模型中除margin以外的宽高（包含边框）最稳定，使用最频繁

box.offsetLeft    需要定位参照  

box.offsetTop     获取元素当前相对于offsetParent父元素的位置

getComputedStyle().样式名方法用于获取指定元素的 CSS 样式。获取的样式是元素在浏览器中最终渲染效果的样式。

参数1表示元素，不能设置引号。参数2表示伪对象（一般设置为空）

语法：getComputedStyle(元素名称).属性；

currentStyle.样式名只有IE浏览器支持，其他浏览器都不支持如果当前元素没有设置样式，则返回它的默认属性

获取非行内样式（兼容问题）

function getStyle(obj, name){
    if(window.getComputedStyle){
        //非IE浏览器
        return getComputedStyle(obj, null)[name];
    }else{
        //针对IE浏览器
        return obj.currentStyle[name];
    }
}

三、简单认识this对象

1、核心一句话 - 哪个对象调用函数，函数里面的this指向哪个对象。

2、浏览器解析器在调用函数时每次都会向函数内部传递一个隐含的参数，这个隐含的参数就是this,this指向的是一个对象，这个对象我们称之为函数执行的上下文对象。

3、根据函数的调用方式的不同，this会指向不同的对象，这也是this的存在的意义所在。

每个函数都有自己的执行环境，也叫执行上下文（Execution Context）

函数里面的this是谁？

函数调用圆括号时，函数的this是window对象
函数作为一个对象的方法，对象打点调用，函数的this就是这个对象
函数是事件处理函数时，函数的this就是触发这个this的对象
定时器调用函数时，this是window对象
数组中存放的函数，被数组索引之后加圆括号调用，this就是这个数组

练习

1、选项卡

<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.tab{
				width: 500px;
				height: 300px;
				border: 1px solid red;
				margin: 50px auto;
			}
			.tab .btn{
				height: 40px;
				background-color: yellow;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.tab .btn span{
				width: 20%;
				height: 100%;
				font-size: 14px;
				text-align: center;
				line-height: 40px;
				cursor: pointer;
			}
			.bg{
	background-color: greenyellow !important;
			}
			.tab .content{
				height: 260px;
				background-color: gold;
				
			}
			.tab .content>div{
				width: 100%;
				height: 100%;
				font-size: 30px;
				text-align: center;
				line-height: 260px;
				display: none;
			}
</style>
<body>
		<div class="tab">
			<div class="btn">
				<span class="bg">按钮1</span>
				<span>按钮2</span>
				<span>按钮3</span>
				<span>按钮4</span>
				<span>按钮5</span>
			</div>
			<div class="content">
				<div style="display: block;">内容区域1</div>
				<div>内容区域2</div>
				<div>内容区域3</div>
				<div>内容区域4</div>
				<div>内容区域5</div>
			</div>
		</div>
<script type="text/javascript">
			//先获取元素
var aBtn = document.querySelectorAll('.btn>span');
var aLi = document.querySelectorAll('.content>div');
			
//遍历，给每一个按钮设置点击事件
   for(var i = 0 ; i<aBtn.length ; i++){
	  //自定义变量
	  aBtn[i].index = i;
	  aBtn[i].onclick = function(){	  
		//先将每一个按钮颜色先清空
	  for (var j = 0;j<aBtn.length;j++) {
		  	aBtn[j].className= '';
          //隐藏所有的内容区域
			aLi[j].style.display = 'none';
 }
	 this.className = 'bg';
	aLi[this.index].style.display = 'block';		       }
}
   </script>
</body>

2、简易微博发送

<style type="text/css">
			*{
			padding: 0;
			margin:0 ;
			}
			.wb{
				width: 600px;
				min-height: 400px;
				margin: 50px auto;
				/* border: 1px solid; */
			}
			.wb textarea{
				width: 600px;
				min-height:100px;
				resize: none;
				outline: none;
			}
			.wb div{
				height: 30px;
			}
			.wb div button{
				width: 55px;
				height: 25px;
				margin-top:2.5px ;
				font-size: 14px;
				float: right;
			}
			ul{
				width: 100%;
				min-height:50px;
			}
			ul li {
				width: 100%;
				list-style: none;
				height: 30px;
				line-height: 30px;
				border-bottom: 1px dashed ;
			}
			ul li span{
				float: right;
				color: red;
				font-size: 12px;
				cursor: pointer;
		 }
	</style>
</head>
<body>
   <div class="wb">
	  <textarea></textarea>
		  <div>
			<button type="button">发送</button>
		  </div>
			
	<ul>
				
	</ul>
		</div>
<script type="text/javascript">
    //获取元素
	var txt = document.querySelector('.wb>textarea');
	var bnt = document.querySelector('.wb>div>button');
	var  ul = document.querySelector('.wb>ul');
  //给button设置点击事件
			bnt.onclick =function(){
                //判定输入框中是否为空？是弹出警告并结束事件
				if (txt.value == '') {
					alert('不能为空！请重新输入！')
					return false;
				}
	
	//创建一个Li 标签
	var li = document.createElement('li');
	//向li中添加内容
	li.innerHTML = txt.value + '<span>删除</span>';
	//将LI添加到UL中 但是需要保证每个都在上一个的前面
	//获取之前所有li的第一个,并找到第一个
	var frist = document.querySelectorAll('li')[0];
	//将其放在ul中的当前li之前
	ul.insertBefore(li,frist);
	//传值完成，清空txt
	txt.value = '';

	//删除操作 获取所有span
	var aSpan = document.querySelectorAll('span');
    //遍历并添加事件
	  for (var i=0; i<aSpan.length; i++) {
		aSpan[i].onclick = function(){
            //删除当前节点的父节点
			this.parentNode.remove();
			}
		}
	}
	</script>
</body>

3.表格添加信息

<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	.info{
		width: 900px;
		min-height: 300px;
		border: 1px solid red;
		margin: 50px auto;
	}
	.info .up{
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.info .up input{
		height: 25px;
		border: 1px solid #ccc;
		outline: none;
	}
	.info .up input:last-child{
		width: 100px;
		box-sizing: content-box;
		cursor: pointer;
	}
	.info table{
		width: 100%;
		border: 1px solid red;
		text-align: center;
	}
	.info table thead tr th{
		border: 1px solid red;
		height: 30px;
	}
	.info table tbody tr td{
		border: 1px solid red;
	}
	.info table tbody tr td span{
		cursor: pointer;
	}
  </style>
</head>
<body>
	<div class="info">
		<div class="up">
			<input type="text" value="" />
			<input type="text" value="" />
			<input type="text" value="" />
			<input type="text" value="" />
			<input type="button" value="添加" />
		</div>
		<table>
			<thead>
				<tr>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
					<th>专业</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody></tbody>
		</table>
	</div>
<script type="text/javascript">
			//获取元素
var aInput = document.querySelectorAll('.info>.up>input');
var tab = document.querySelector('table>tbody');
	//绑定事件 给最后一个input标记绑定事件
		aInput[aInput.length-1].onclick = function(){
				//判断input的value为空，结束事件
				for(var i=0; i<aInput.length-1; i++){
					if(aInput[i].value == ''){
						alert('请重新输入');
						return false;
					}
				}
				
	//创建tr
var tr = document.createElement('tr');
	//创建td
     for(var i=0; i<aInput.length; i++){
		var td = document.createElement('td');
			td.innerHTML = aInput[i].value;
			 if(i==aInput.lengt-1){
				td.innerHTML = '<span>删除</span>';
				}
				tr.appendChild(td);//将td加入tr
			}
		//添加到tbody里面
			tab.appendChild(tr);
//点击span标记进行删除操作
            //获取spn
var span = document.querySelectorAll('span');
		//遍历
	for(var j=0; j<span.length; j++){
		 span[j].onclick = function(){
			this.parentNode.parentNode.remove();
			}
		}		
		//清空input的value值操作
		clear();
}
 function clear(){
   for(var i=0; i<aInput.length-1; i++){
	 aInput[i].value = '';
   }
 }
 </script>
</body>