JS之 Dom操作

js的Dom操作

Dom操作获取元素

doucment.getElementById()

通过ID获取

		<div id="time">
			2021-1-1
		</div>
		<script type="text/javascript">
			var timer = document.getElementById('time');
			console.log(timer);		//返回的是  <div id="time"> 2021-1-1 </div>
			console.log(typeof timer);		//查看timer的数据类型， 返回的是一个对象  object
			console.dir(timer);			// console.dir()    打印返回的元素对象 方便更好查看里面的属性和方法
		</script>

document.getElementByTagName()

通过标签获取

		<ul>
			<li>我是好人1</li>
			<li>我是好人2</li>
			<li>我是好人3</li>
			<li>我是好人4</li>
			<li>我是好人5</li>
		</ul>
		<script type="text/javascript">
			var list = document.getElementsByTagName('li');
			console.log(list);	//返回的是一个数组(伪数组)
			console.log(list[0].innerHTML);		//打印出数组的第一个 Li标签里面的文本。
		</script>

element(父元素标签).getElementByTagName(‘标签名’)

注意：父元素必须是单个元素（指明是哪个元素对象），获取的时候不包括父元素自己

		<ol>
			<li>我是警察1</li>
			<li>我是警察2</li>
			<li>我是警察3</li>
			<li>我是警察4</li>
			<li>我是警察5</li>
		</ol>
		<script type="text/javascript">
			var ol = document.getElementsByTagName('ol');
			console.log(ol[0].getElementsByTagName('li'));	//这里需要注意  ol[0] 因为返回的是伪数组的形式
		</script>

同时也可以给ol标签加一个id，这样就不用知名是哪一个元素对象

		<ol id='select'>
			<li>我是警察1</li>
			<li>我是警察2</li>
			<li>我是警察3</li>
			<li>我是警察4</li>
			<li>我是警察5</li>
		</ol>
		<script type="text/javascript">
			var ol = document.getElementById('select');
			console.log(ol.getElementsByTagName('li'));
		</script>

H5新增的类选择器接口

getElementByClassName()

根据类名获得某个元素的集合

querySelector()

返回选择器的第一个对象

切记：里面的选择器一定要加符号 .box #demo

querySelectorAll()

返回指定选择器的所有元素对象的集合

获取body元素

var bodyEle = doucument.body;

获取html元素

var htmlEle = document.documentElement;

事件绑定触发

事件三要素：事件源 事件类型 事件处理程序

		<button type="button" id="btn">快来点我</button>
		<script type="text/javascript">
			//事件源  谁被绑定了  事件被触发的对象
			var btn = document.getElementById('btn');
			//事件类型， 比如说鼠标悬停触发   还是点击触发
			//事件处理程序  也就是说通过函数赋值方式
			btn.onclick = function(){
				alert('好爽');
			}
		</script>

改变元素的标签

		<button type="button">点击显示</button>
		<div>
			这里会被改变
		</div>
		<button type="button" id="btn1">
			百度
		</button>
		<button type="button" id="btn2">
			淘宝
		</button>
		<a href="https://www.taobao.com">lianjie</a>
		<script type="text/javascript">
			var btn = document.querySelector('button');
			var div = document.querySelector('div');
			btn.onclick = function(){
				div.innerText = '真的变了';
			}
			
			var btn1 = document.getElementById('btn1');
			var btn2 = document.getElementById('btn2');
			var src = document.querySelector('a');
            //先绑定事件对象
			btn1.onclick = function(){		//通过什么条件触发
				src.href = 'https://www.baidu.com'		//触发之后要干什么
			}
			btn2.onclick = function(){
				src.href = 'https://www.taobao.com'
			}
		</script>

通过js修改css类的样式

如果要修改的样式不多，可以直接通过【this.style.样式 = ’‘ 】就可以修改样式了

这只能修改单个样式 代码所示

		<style type="text/css">
			.fri{
				font-size: 20px;
				color: #FF0000;
			}
			.las{
				font-size: 200px;
				color: aquamarine;
				margin: auto;
			}
		</style>
		<div class="fri">
			请把我变走把吧哈哈哈哈哈哈哈哈
		</div>
		<script type="text/javascript">
			var text = document.querySelector('.fri');
			text.onclick = function(){
				//当需要修改样式的数量少的时候		可以用这种方法
				//this.style.color = 'blue';		//this直想这个函数返回的对象
				
				//当需要修改的样式多的时候，可以用这种方法
				this.className = 'fri las';
			}
		</script>

排他思想

先循环出要注册的元素

接着再写上事件

运用排他思想清除掉所有的样式

再加上自己要的样式

		<style type="text/css">
			.color{
				background-color: #FF0000;
			}
		</style>
		<button type="button">btn1</button>
		<button type="button">btn2</button>
		<button type="button">btn3</button>
		<button type="button">btn4</button>
		<button type="button">btn5</button>
		<script type="text/javascript">
			//获取元素
			var btns = document.querySelectorAll('button');
			//循环注册事件
			for(var i = 0;i < btns.length;i++){
				btns[i].onclick = function(){
					//先将所有样式清除
					for(var i = 0;i < btns.length;i++){
						btns[i].style.background = '';
					}
					//再给点击的事件加上样式
					this.style.background = 'red';
				}
			}
		</script>

隔行变色案例

		<style type="text/css">
			.activ{
				background-color: antiquewhite;
			}
		</style>
		<table border="1px" cellspacing="" cellpadding="">
			<thead>
				<tr>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
				</tr>
			</thead>
			<tbody>
				<tr class="activ">
					<td>廖大侠</td>
					<td>男</td>
					<td>20</td>
				</tr>
				<tr>
					<td>李大侠</td>
					<td>女</td>
					<td>19</td>
				</tr>a
			</tbody>
		</table>
		<script type="text/javascript">
			var trs = document.querySelector('tbody').querySelectorAll('tr');
			for(var i = 0; i < trs.length;i++){
				trs[i].onmouseover = function(){
					this.className = 'active';
					console.log(this);
				}
				trs[i].onmouseout = function(){
					this.className = '';
					console.log('22');
				}
			}
		</script>

表单全选取消全选

		<table border="" cellspacing="" cellpadding="" style="margin: auto;">
			<thead>
				<tr>
					<th><input type="checkbox" id="cbAll" /></th>
					<th>商品</th>
					<th>价格</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th><input type="checkbox" id="cb" /></th>
					<th>iphone6</th>
					<th>111</th>
				</tr>
				<tr>
					<th><input type="checkbox" id="cb" /></th>
					<th>iphone7</th>
					<th>22</th>
				</tr>
				<tr>
					<th><input type="checkbox" id="cb" /></th>
					<th>iphone8</th>
					<th>333</th>
				</tr>
				<tr>
					<th><input type="checkbox" id="cb" /></th>
					<th>iphone x</th>
					<th>444
					</th>
				</tr>
			</tbody>
		</table>
		<script type="text/javascript">
			var cba = document.getElementById('cbAll');		//获取全选按钮
			var cbs = document.querySelector('tbody').querySelectorAll('input');	//获取所有单选按钮
			cba.onclick = function(){
				console.log(this.checked);		//如果选中就是ture  如果没有选中就是false
				for(var i = 0;i < cbs.length;i++){
					cbs[i].checked = this.checked;		//把全选的状态赋值给每一个按钮的checked属性
				}
			}
			for(var i = 0; i < cbs.length;i++){		//将所有的单选按钮遍历出来
				cbs[i].onclick = function(){
					var flag = true;		//flag控制全选按钮
					for(var i = 0;i < cbs.length;i++){		//每次点击的时候都循环一遍
						if(!cbs[i].checked){		//如果有单选按钮未被选上，则执行代码
							flag = false;			//只要有一个按钮未被选上，flag都是为false
                            break;			//推出for循环，只要有一个未被选中，则无需继续循环判断。
						}
					}
					cba.checked = flag;		//把flag的状态赋值给全选按钮
				}
			}
		</script>

tab导航栏切换（重点）

		<style type="text/css">
			.box{
				height: 300px;
				width: 600px;
				border: 3px solid black;
				margin: auto;
			}
			.top{
				list-style: none;
				height: 80px;
				width: 100%;
				border: 1px solid #FF0000;

			}
			.top ul{
				list-style: none;
			}
			.top li{
				float: left;
				height: 70px;
				line-height: 70px;
				padding: 0 20px;
				text-align: center;
				cursor: pointer;
			}
			.content{
				height: 200px;
				width: 100%;
			}
			.activ{
				background-color: aqua;
			}
			.item{
				display: none;
			}
		</style>
		<div class="box">
			<div class="top">
				<ul>
					<li>我是1</li>
					<li>我是2</li>
					<li>我是3</li>
					<li>我是4</li>
				</ul>
			</div>
			<hr >
			<div class="content">
				<div class="item">啦啦啦1</div>
				<div class="item">啦啦啦2</div>
				<div class="item">啦啦啦3</div>
				<div class="item">啦啦啦4</div>
			</div>
		</div>
		<script type="text/javascript">
			//选择顶部导航 排他思想，选择当前变色  其余不变
			var lists = document.querySelector('.top');
			var list = lists.querySelectorAll('li');
			var items = document.querySelectorAll('.item');
			console.log(items);
			for(var i = 0;i < list.length;i++){
				list[i].setAttribute('index',i);	//自定义属性值
				list[i].onclick = function(){
					//将li的所有样式清空
					for(var i = 0; i < list.length;i++){
						list[i].className = '';
					}
					//再将class值赋给自己
					this.className = 'activ';
					var index = this.getAttribute('index');		//获取自定义的属性值
					console.log(index);
					//给top上面的所有小li添加自定义属性，属性值从0开始
					//依旧使用排他思想
					for(var i = 0 ;i < items.length;i++){
						items[i].style.display = 'none';
					}
					items[index].style.display = 'block';
				}
			}
		</script>

H5自定义属性

自定义属性 元素.seAtrribute(‘属性名’ , ‘属性值’)

这些数据可以直接保存在前端，不必要到数据库去取得，提高了页面加载效率

自定义属性不能直接通过元素去获取 不然会打印undefined

H5规定自定义属性 data- 作为开头的都是自定义属性

获取自定义属性 getAtrribute(‘属性名’)

H5新增获取自定义属性方法【只能获取data-开头的自定义属性】

element.dataset.index 或者 element.dataset[‘index’]

console.log(div.dataset.index);
console,log(div.dataset['index']);

如果自定义属性有多个 - 连接的单词，获取的时候采取 驼峰命名法