排他事件
如果有同一组元素，而我们想要某一个元素实现某种样式，则需要用到循环的排他思想算法：所有元素清除样式、当前元素设置样式
实例：点击更换图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
background-image: url(img/i1.jpg);
background-size: 100% 100%;
}
.img{
width: 400px;
height: 100px;
margin: 200px auto;
}
img{
width: 100px;
height: 100px;
}
.i{
float: left;
}
</style>
</head>
<body>
<div class="img">
<div class='i'><img src='img/i1.jpg' ></div>
<div class='i'><img src='img/i2.jpg' ></div>
<div class='i'><img src='img/t1.jpg' ></div>
<div class='i'><img src='img/t2.jpg' ></div>
</div>
<script>
var im=document.querySelectorAll('img');
var bo=document.querySelector('body');
var img=['img/i1.jpg','img/i2.jpg','img/t1.jpg','img/t2.jpg'];
for(var j=0;j<im.length;j++){
im[j].onclick=function(){
bo.style.backgroundImage='url('+this.src+')';
}
}
</script>
</body>
</html>
获取元素的属性值
可以直接使用元素名.属性名获取属性值，这里获取的是内置的属性
也可以使用元素名.getAttribute('属性')获取属性，这里可以获取我们自定义的属性
设置属性值
可以使用 元素名.属性名=‘新的属性值’来设置内置属性值
也可以使用元素名.setAttribute（‘属性名’，属性值）设置属性值，主要用于自定义属性
实例：tab栏切换内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.tour{
height: 50px;
width: 600px;
background-color: #D3D3D3;
}
.tb{
float: left;
height: 50px;
line-height: 50px;
width: 120px;
padding-left: 30px;
}
.btu{
width: 600px;
height: 600px;
background-color: palegoldenrod;
position: relative;
}
.bt{
width: 600px;
height: 600px;
position: absolute;
top: 0;
right: 0;
display: none;
}
.change{
background-color: palevioletred;
}
</style>
</head>
<body>
<div class="tour">
<div class='tb' id='1'>导航栏1</div>
<div class='tb' id='2'>导航栏2</div>
<div class='tb' id='3'>导航栏3</div>
<div class='tb' id='4'>导航栏4</div>
</div>
<div class="btu">
<div class='bt' id='11'>内容1</div>
<div class='bt' id='12'>内容2</div>
<div class='bt' id='13'>内容3</div>
<div class='bt' id='14'>内容4</div>
</div>
<script>
var tb=document.querySelectorAll('.tb');
var bt=document.querySelectorAll('.bt');
for(var i=0;i<tb.length;i++){
tb[i].onclick=function(){
for(var j=0;j<tb.length;j++){
tb[j].className='tb'
bt[j].style.display='none';
}
this.className='tb change';
for(var z=0;z< bt.length;z++){
var check='1'+this.id;
if(bt[z].id==check){
bt[z].style.display='block';
}
}
}
}
</script>
</body>
</html>
H5自定义属性
自定义属性是为了保存并使用数据。有些数据可以保存在页面中，而不用保存到数据中
H5中规定所有自定义属性都以data-开头
H5中新增一种获取自定义属性的方法: 元素名.dataset.index 或 元素名.dataset['index'] （假设自定义属性名为data-index）
这里dataset是一个集合，存放了所有以data-开头的自定义数据
如果自定义属性中有多个-，则获取时使用驼峰命名法。例如data-last-name，获取时使用元素名.dataset.lastName
dataset只能获取data-开头的自定义属性
节点
可以利用父子兄节点关系获取元素
网页中所有内容都是节点，在网页中节点用node表示
一般来说，节点至少有nodeType（节点类型）、nodeName（节点名称）、nodeValue（节点值）这三个基本属性
元素节点的nodeType为1，属性节点的nodeType为2，文本节点（包含文字、空格和换行等）的nodeType为3
实际开发中节点操作主要操作的是元素节点
通过节点获取元素
主要通过节点层次获取元素
节点层级
利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系
父节点
父节点是parentNode，获取某元素的父节点：元素名.parentNode
注意，得到的是离元素最近的父节点
如果找不到父节点则返回空（null）
子节点
子节点是parentNode，获取某元素的子节点：元素名.childNodes ，得到的是一个子节点的集合
注意，这里得到了所有的子节点，其中有元素节点、属性节点、文本节点
可以通过节点类型（nodeType）判断节点类型，进而筛选出元素节点，比较麻烦，所以实际情况下我们一般不使用这种方法
实际情况下，我们一般使用元素名.children来获取，虽然这不是标准方法，但其获取了各大浏览器的支持，并且日常中我们主要使用的也是这个
获取第一个子节点
可以使用元素名.firstChild获取第一个子节点，包括元素节点、属性节点、文本节点
使用元素名.firstElementChild获取第一个子元素节点（ie9以上才支持）
所以为了没有兼容性问题地获取第一个子元素节点，实际情况中我们使用元素名.children[0]来获取第一个子元素节点
获取最后一个子节点
可以使用元素名.lastChild获取最后一个子节点，包括元素节点、属性节点、文本节点
使用元素名.lastElementChild获取最后一个子元素节点（ie9以上才支持）
所以为了没有兼容性问题地获取最后一个子元素节点，实际情况中我们使用元素名.children[元素名.children.length-1]来获取最后一个子元素节点
兄弟节点
可以通过元素名.nextSibling获取下一个兄弟节点，包括元素节点、属性节点、文本节点
通过元素名.nextElementSibling获取下一个兄弟元素节点，没有则返回null，（ie9以上才支持）
可以通过元素名.previousSibling获取上一个兄弟节点，包括元素节点、属性节点、文本节点
通过元素名.previousElementSibling获取上一个兄弟元素节点，没有则返回null，（ie9以上才支持）
创建和添加节点
想要在页面添加一个新的元素：首先创建元素，然后添加元素
可以使用 document.creatElement('标签名')创建节点，然后可以使用node.appendChild(child)将一个子节点添加到指定父节点的子节点列表末尾。也可以使用node.insertBefore(child,指定元素)将一个新的节点添加到父节点的指定子节点之前
删除节点
可以使用node.removeChild（child）从父节点的子节点中删除一个节点
实例：简单的发布留言案例
点击发布按钮，在下方栏中显示上方输入栏中输入的内容，并且可以通过删除按钮删除对应留言
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
input{
width: 300px;
height: 200px;
}
.button1{
vertical-align: bottom;
}
.meg{
width: 400px;
height: 300px;
background-color: #D3D3D3;
}
</style>
</head>
<body>
<div class="ipt">
<input type="text" />
<button class="button1">发布</button>
</div>
<div class="meg">
<ul></ul>
</div>
<script>
var but=document.querySelector('.button1');
var inp=document.querySelector('input');
var father=document.querySelector('ul');
var n=0;
but.onclick=function(){
if(inp.value!=''){
// 创建新节点
var newli1=document.createElement('li');
var newli2=document.createElement('button');
// 设置新节点样式
newli1.innerHTML=inp.value;
newli2.innerHTML='删除';
newli2.setAttribute('data-num',n);
newli1.setAttribute('data-num',n+1);
n=n+2;
// 点击删除时删除对应留言
newli2.onclick=function(){
var t=this.getAttribute('data-num');
for(var j=0;j<father.children.length;j++){
if(father.children[j].getAttribute('data-num')==t*1+1){
var rem=father.children[j];
break;
}
}
// 删除节点
father.removeChild(rem);
father.removeChild(this);
}
// 添加节点
father.appendChild(newli1);
father.appendChild(newli2);
inp.value='';
}
}
</script>
</body>
</html>复制节点
可以使用node.cloneNode()复制节点，返回使用该函数的节点的一个副本
注意，如果括号中参数为空，则是浅拷贝，即只拷贝节点本身，不拷贝其子节点，即只复制标签，不复制里面内容
括号里面是true时，是深拷贝，不仅复制标签，还复制其中内容
实例：动态生成表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
th{
font-weight: normal;
}
/* table{
border: 1px solid #000000;
} */
</style>
</head>
<body>
<table border="1px" width="80%" align="center">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// 以数组中存储对象的形式存储数据
var datas=[
{
name:'张三',
subject:'语文',
score:54
},
{
name:'李四',
subject:'语文',
score:66
},
{
name:'王五',
subject:'语文',
score:87
}
];
// 新增行
var num=datas.length;
var tb=document.querySelector('tbody');
for(var j=0;j<num;j++){
// 创建tr行
var tr=document.createElement('tr');
tb.appendChild(tr);
// 新增单元格
var people=datas[j];
for(var t in people){
var th=document.createElement('th');
th.innerHTML=people[t];
tr.appendChild(th);
}
var th=document.createElement('th');
th.innerHTML='<button class="bu1">删除</button>';
tr.appendChild(th);
// 删除数据操作
var botton1=th.children[0];
botton1.onclick=function(){
var rem=this.parentNode.parentNode;
tb.removeChild(rem);
}
}
</script>
</body>
</html>
3351
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
