自定义属性目的：
是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中
设置自定义属性
element.setAttribute
获取自定义属性
element.getAttribute
element.dataset.index H5新增的获取自定义属性
TAB栏 切换
css样式
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.tab {
width: 978px;
margin: 100px auto;
}
.tab_list {
height: 39px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current {
background-color: #c81623;
color: #fff;
}
.item_info {
padding: 20px 0 0 20px;
}
.item {
display: none;
}
</style>
HTML结构
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价（50000）</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">
商品介绍模块内容
</div>
<div class="item">
规格与包装模块内容
</div>
<div class="item">
售后保障模块内容
</div>
<div class="item">
商品评价（50000）模块内容
</div>
<div class="item">
手机社区模块内容
</div>
</div>
</div>
js代码
<script>
// 获取元素
var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');
var items = document.querySelectorAll('.item');
// for循环绑定点击事件
for (var i = 0; i < lis.length; i++) {
// 开始给5个小li 设置索引号
lis[i].setAttribute('index', i);
lis[i].onclick = function() {
// 1. 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式
// 干掉所有人 其余的li清除 class 这个类
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
// 留下我自己
this.className = 'current';
// 2. 下面的显示内容模块
var index = this.getAttribute('index');
console.log(index);
// 干掉所有人 让其余的item 这些div 隐藏
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
// 留下我自己 让对应的item 显示出来
items[index].style.display = 'block';
}
}
</script>
节点操作
1.父节点
element.parentNode
parentNode属性可返回某节点的父元素，最近的一个父节点
指定的节点没有父节点则返回null
2.子节点
element.children（非标准） 只读属性 返回所有的子元素节点。只返回子元素节点，其余节点不返回。
element.childNodes(标准) 返回包含指定节点的子节点的集合，该集合即时更新的集合 。注意： 返回值里面包含所有的子节点，包括元素节点，文本节点
1.返回第一个子元素节点，找不到返回null
firstElementchild
2.返回最后一个子元素节点，找不到则返回null
lastElementchild
3兄弟节点
nexElementSibling返回当前元素下一个兄弟元素节点，找不到则返回null
element.nexElementSibling
previousElementSibling返回当前元素上一个兄弟节点，找不到返回null。
element.previousElementSibling
4创建节点
document.createElement（）方法创建由tagName指定的HTML元素，因为这些元素原先不存在是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。
document.createElement（‘’）
5.添加节点
element.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾
element.appendChild()
留言板
css样式
<style>
li {
width: 200px;
background-color: pink;
}
textarea {
resize: none;
}
a{
float: right;
text-decoration: none;
}
</style>
HTML
<textarea name="" id=""></textarea>
<button class="btn">提交</button>
js
<script>
var tt = document.querySelector('textarea');
var btn = document.querySelector('.btn');
var ul = document.querySelector('ul');
btn.addEventListener('click', function () {
if (tt.value.length == '') {
return alert('你还没有输入内容');
}
var li = document.createElement('li');
li.innerHTML = tt.value+'<a href="javascript:;">删除</a>';
ul.appendChild(li);
tt.value = '';
var as = document.querySelectorAll('a')
for(var i = 0 ;i<as.length ; i++){
as[i].addEventListener('click' , function () {
ul.removeChild(this.parentNode)
});}
});
</script>
