tab切换和自定义属性
京东tab栏切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tab栏切换</title>
<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>
</head>
<body>
<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>
<script>
//获取元素
let tab_list = document.querySelector('.tab_list');
let list = tab_list.querySelectorAll('li');
let items = document.querySelectorAll('.item');
//for循环绑定点击事件
for (let i = 0; i < list.length; i++) {
list[i].onclick = () => {
// 给5个li设置索引号
list[i].setAttribute('index', i);
//干掉所有人 其余的li清除class这个类
for (let i = 0; i < list.length; i++) {
list[i].className = '';
}
//留下我自己
list[i].className = 'current';
//获取索引值
let index = list[i].getAttribute('index');
//干掉所有人 让items的盒子隐藏
for (let i = 0; i < items.length; i++) {
items[i].style.display = "none";
}
items[index].style.display = "block";
}
}
</script>
</body>
</html>
自定义属性操作
自定义属性目的:为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
自定义属性获取是通过getAttribute(属性')获取。
但是有些自定义属性很容易弓起歧义,不容易判断是元素的内置属性还是自定义属性。
H5给我们新增了自定义属性:
- 1、设置H5自定义属性
H5规定自定义属性
data-开头做为属性名并且赋值。
<div data-index="123"> html中添加 </div>
//js中添加自定义属性
Element.setAttribute('data-index',123)
- 2、获取自定义属性（兼容性较好）
let zdy11 = div.getAttribute("dadada")
- 3、H5新增获取自定义属性(用get获取兼容性好点)
Element.dataset.index //H5新增获取自定义属性 data set就是获取我们自己定义data的一个集合 <div data-index="123"> html中添加 </div>
Element.dataset['index'] // ie11 才开始支持
注意：
console.log(p.dataset.listName); //多个名字必须使用驼峰命名法来调用 console.log(p.dataset['listName']);
节点操作
节点概述
- 元素节点 nodeType 为 1
- 属性节点 nodeType 为 2
- 文本节点 nodeType 为 3 （文本节点包含文字、空格、换行等）
我们在实际开发中，节点操作主要操作的是元素节点
节点层级
利用DOM树可以把节点划分为不同的层级关系,常见的父子兄层级关系。
- 父级节点
node.parentNode //得到的是离父亲最近的父级节点 ，如果找不到父级节点就返回 null
-
子节点
-
- parentNode.childNode （标准）
parentNode.childNode 返回的包含指定的子节点的集合，该集合为及时更新的集合，是所有的子节点 包含 元素节点 文本节点
-
- **parentNode . children **(非标准)
parentNode. children是-个只读属性,返回所有的子元素节点。只返回子元素节点,其余节不返回(这个是我们重点掌握的)。
虽然children是一个非标准 ,但是得到了各个浏览器的支持,因此我们可以放心使用
- 子节点的第一个和最后一个
- parentNode.firstChild
firstChild返回第一个子节点,找不到则返回null。同样,也是包含所有的节点。
- parentNode.lastChild
lastChild返回最后一个子节点 ,找不到则返回null。同样,也是包含所有的节点。
注意:
这两个方法有兼容性问题, IE9以上才枝持。
实际开发中, firstChild和lastChild 包含其他节点,操作不方便,而firstElementChild和lastElementchild又有兼容性问题,那么我们如何获取第一个子元素节点或最后一个子元素节点呢 ?
实际开发的写法既没有 兼容性问题又返回第一个子元素写法是：
ul.children[2]
以伪数组形式来得到所需要的元素
代码仔细看
let ul = document.querySelector('ul');
console.log(ul.childNodes); //获取所有子节点 包含换行 空格
console.log(ul.childNodes[0].nodeType);
console.log(ul.childNodes[1].nodeType);
//获取子元素节点
console.log(ul.children);
console.log(ul.firstChild); //第一个子节点 不管是文本节点还是节点
console.log(ul.lastChild);
console.log(ul.firstElementChild); // 获取第一个子节点的子元素
console.log(ul.lastElementChild);
console.log(ul.children[2]); //实际开发的写法既没有 兼容性问题又返回第一个子元素写法是：
console.log(ul.children[0]); // 第一个子元素
console.log(ul.children[ul.children.length - 1]); // 最后一个子元素
- 兄弟节点
/*下一个兄弟节点*/
Node.nextSibling
Node.nextSibling //返回当前元素的下一个兄弟节点，找不到返回null
/*上一个兄弟节点*/
Node.previousElementSibling //返回当前元素的下一个兄弟节点，找不到返回null
了解即可
/*下一个兄弟元素节点（有兼容性问题）*/
Node.nextElementSibling //返回当前元素的下一个兄弟元素节点，找不到返回null
/*上一个兄弟元素节点（有兼容性问题）*/
Node.previousElementSibling //返回当前元素的上一个兄弟元素节点，找不到返回null
如何解决兼容性问题：
自己封装函数一个兼容性函数
function getNextElementSibling(element) {
var el = element;
while (el = el.nextSibling) {
if (el.nodeType === 1) {
return el;
}
}
return null;
}
创建节点
document.createElement('div')
document . createElement()方法创建由tagName 指定的HTMI元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。
添加节点
node.appendChild(child)
//node.appendChild(child) 方法将一个节点添加到指定父节点的子节点列表 末尾。类似于css里面的after伪元素
node.insertBefore(child, 指定元素);
// node.insertBefore(child, 指定元素); 方法将一个节点添加到指定父节点的子节点列表 前面。类似于css里面的before伪元素
<ul>
<li>123</li>
</ul>
<script>
// 1. 创建节点元素节点
var li = document.createElement('li');
// 2. 添加节点 node.appendChild(child) node 父级 child 是子级 后面追加元素
var ul = document.querySelector('ul');
ul.appendChild(li);
// 3. 添加节点 node.insertBefore(child, 指定元素);
var lili = document.createElement('li');
ul.insertBefore(lili, ul.children[0]);
// 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素
</script>