自定义属性的操作
- 获取自定义属性值
- 设置元素属性值
(1)element.setAtrribute(‘属性’，'值‘);
主要针对于自定义属性
div.setAtrribute(‘index’,2);
(2)element.属性=‘值’;
设置内置属性
div.id = ‘test’; - 移除属性值
removerAttribute(属性);
div.removeAttribute(‘index’); - tab栏切换（重点案例）
（1） 注意：要把所有内容先隐藏，用item类中设置 display:none; 然后第一个显示 ，直接先html中设置style=“display: block;”
商品介绍模块内容
（2） 代码：
`* {
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>
var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');
var items = document.querySelectorAll('.item');
for (var i = 0; i < lis.length; i++) {
lis[i].setAttribute('index', i);
lis[i].onclick = function() {
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
this.className = 'current';
var index = this.getAttribute('index');
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
items[index].style.display = 'block';
}
}
</script>'
5. 自定义属性的目的：是为了保存并使用数据，有些数据很简单没有必要保存到数据库中去。
6. H5自定义属性
有些自定义属性很容易引起歧义，不容易判断是哪种类型
于是H5新增了自定义属性：
H5规定自定义属性以 data- 开头作为属性名并且赋值
data-index = '2'；
1. 兼容性获取 element.getAttribute('data-index');
2. H5新增element.dataset.属性（有严重的兼容性问题 ， IE11以上才支持），只能获取data-开头的，如果名字较长用驼峰命名法，如下
获取上述方法，div.dataset.listName;
-
节点 （获取元素更加简单）
网页中，所有内容都是节点。
节点至少拥有node Type(节点类型)，nodeName(节点名称),nodeValue(节点值) 这三个基本属性
节点操作主要操作的是元素节点 -
利用DOM数可以把节点划分为不同的层级关系，常见的是父子兄层级关系
-
父级节点 parentNode (得到的是离元素最近的父级节点)，如果找不到父节点就返回null
var box = document.querySelector(’.box’);
erweima.parentNode; -
（1）子节点 childNodes 得到的所有的子节点，包含元素节点，文本节点（回车）等
var ul = document.querySelector(‘ul’);
ul.childNodes;
如果只想获得里面的元素节点，则需要专门处理。如下：
先遍历得到的伪数组，通过nodeType判断，nodeType是1则是元素节点（需要），是3则是文本节点（不需要）
（2） parentNode.children(非标准) 获取所有的子元素节点
是我们实际开发常用的
console.log(ul.children);
（3）firstChild第一个子节点，不管是文本节点还是元素节点.lastChild同理
parentNode.firstChild;
parentNode.lastChild;
（4）获取第一/最后一个子元素，找不到则返回null。但是有兼容性问题。
parentNode.firstElementChild;
parentNode.lastElementChild;
（5）因为（3），（4）获取子节点都有问题，以下是实际开发的写法，既没有兼容问题又返回第一个子元素
console.log(ul.children[0]);
因为子元素的个数不确定，所以取最后一个元素用ul.children[ul.children.length - 1] -
下拉菜单
因为所有的小li都需要添加鼠标经过和移动事件，所以用for循环
-
导航栏显示与隐藏
-
兄弟节点
（1）node.nextSibling;返回当前元素的下一个兄弟节点，找不到则返回null。同样，也是包含所有节点。
（2）node.previousSibling 返回当前元素上一个兄弟节点，找不到则返回null。同样，也是包含所有的节点。
（3）nextElementSibling返回当前元素下一个兄弟元素节点，找不到则返回null。有兼容性问题，IE9以上才支持
（4）previousElementSibling;返回当前元素上一个兄弟元素节点，找不到则返回null。有兼容性问题，IE9以上才支持
解决（3）（4）兼容性问题，自己封装一个函数
-
创建节点
document.createElement(‘tagName’); 方法创建由tagName指定的HTML元素。因为这些元素原先不存在，是根据我们的需要动态生成的，所以我们也称为动态创建元素节点。 -
添加节点
node.appendChild(child)
将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素，类似于数组中的push。
var li = document.createElement(‘li’);
//添加节点
var ul = document.querySelector(‘ul’);
ul.appendChild(li); -
添加节点（在前面）
node.insertBefore(child,指定元素)
node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于css里面的befor -
删除节点
node.removerChild(child)
从DOM中删除一个子节点，返回删除的节点
点击按钮，删除一个元素。当ul中没有元素时，禁用按钮。 this.disabled = true;
btn.onclick = function() {
if (ul.children.length == 0) {
this.disabled = true;
} else {
ul.removeChild(ul.children[0]);
}} -
样式尽量通过css修改，并且innerHTML 可以添加html标签元素。
-
当不需要链接跳转时，阻止链接跳转需要添加 javascript:void(0); 或者 javascript:;
-
复制节点
node.cloneNode()
返回调用该方法的节点的一个副本，也称为克隆节点/拷贝节点
node.cloneNode()；括号为空或者里面是false 是浅拷贝，只复制标签不复制里面的内容。如果括号里面为true，为深拷贝，复制标签以及里面内容。 -
border-collapse: collapse; table表格相邻边框合并
其中，obj[k]，必须是中括号获取，不可用 . 代替，会undefined.
把值填入标签 ， innerHTML -
动态创建表格案例
<style>
table {
width: 400px;
margin: 100px auto;
text-align: center;
border-collapse: collapse;
}
th {
background-color: skyblue;
font-size: 18px;
color: cornsilk;
font-weight: 400;
}
td {
/* background-color: pink; */
font-size: 14px;
height: 20px;
}
th,
td {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<table cellspacing='0'>
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
//存储多个对象，用创建数组的方式，而每个对象相当于数组中的一个元素
var dates = [{
name: '张三',
subject: 'JS',
score: '100'
}, {
name: '李四',
subject: 'JS',
score: '40'
}, {
name: '王五',
subject: 'JS',
score: '70'
}, {
name: '孙刘',
subject: 'JS',
score: '90'
}];
// 往tbody里创建行，有几个人创建几行
var tbody = document.querySelector('tbody');
for (var i = 0; i < dates.length; i++) {
//创建元素 tr行,创建完之后还得添加进去。
var tr = document.createElement('tr');
tbody.appendChild(tr);
//行里面创建单元格 td单元格的数量取决于每个对象里面的属性个数
//通过for循环遍历对象for (var k in obj)
for (var k in dates[i]) { //里面的for 循环管列 td
var td = document.createElement('td');
//把属性值 给td
td.innerHTML = dates[i][k];
tr.appendChild(td);
}
// 3.创建有删除两个字的单元格
var td = document.createElement('td');
td.innerHTML = '<a href="javascript:;">删除</a>';
tr.appendChild(td);
}
// 4.删除操作
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
//点击a删除当前a所在单元格的行，就是a的爸爸的爸爸
tbody.removeChild(this.parentNode.parentNode);
}
}
</script>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
