1.所有元素全部清除样式（排除其他人）
2.给当前元素设置样式
例子：
<body>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<script>
//1. 获取所有按钮元素 伪数组
var btns = document.getElementsByTagName('button');
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
//所有元素颜色初始化
for (var j = 0; j < btns.length; j++) {
btns[j].style.backgroundColor = '';
}
//修改当前元素
this.style.backgroundColor = 'pink';
}
}
</script>
</body>
例子：表单全选取消全选（常用）
<body>
<!-- 例子： 全选与取消全选 -->
<div>
<table>
<thead>
<tr>
<th>
<input type="checkbox" name="" id="j\_cbAll">
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="j\_tb">
<tr>
<th>
<input type="checkbox" name="" id="">
</th>
<th>iphone8</th>
<th>8000</th>
</tr>
<tr>
<th>
<input type="checkbox" name="" id="">
</th>
<th>iphone8</th>
<th>8000</th>
</tr>
<tr>
<th>
<input type="checkbox" name="" id="">
</th>
<th>iphone8</th>
<th>8000</th>
</tr>
<tr>
<th>
<input type="checkbox" name="" id="">
</th>
<th>iphone8</th>
<th>8000</th>
</tr>
</tbody>
</table>
</div>
<script>
//全选和取消全选
var j_cbAll = document.getElementById('j\_cbAll');
var j_tbs = document.getElementById('j\_tb').getElementsByTagName('input');
j_cbAll.onclick = function () {
console.log(this.checked);
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].checked = this.checked;
}
}
//设置下面的复选按钮
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].onclick = function () {
//检查是否全选
var flag = true;
for (var i = 0; i < j_tbs.length; i++) {
if (!j_tbs[i].checked) { //存在没有选上的
flag = false;
break; //提高执行效率
}
}
j_cbAll.checked = flag;
}
}
</script>
</body>
⑥自定义属性的操作
获取属性值
1.element.属性：获取内置属性值
2.element.getAttribute(‘属性’)：获取自定义/内置属性值
设置属性值
1.element.属性 = ‘值’：设置内置属性
2.element.setAttribute(‘属性’ , ‘值’)：设置自定义属性
注意：element.className = ‘值’；element.setAttribute(‘class’,‘值’)
移除属性值
element.removeAttribute(‘属性’)
例子：tab栏切换（必备知识）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</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>
// 获取元素
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>
</body>
</html>
⑦H5自定义属性（兼容性问题）
五、节点操作
①父节点
node.parentNode：得到离元素最近的父级节点，如果没有就返回null
②子节点
node.childNodes：得到所有子节点（集合） 包含元素节点、文本节点等等，因此想要单独获得元素节点需要筛选出nodeType为1的节点，很麻烦，一般不使用。
node.children：单独获得元素节点，实际开发常用，虽然是非标准，但没有兼容性问题
node.firstChild：第一个子节点，大多情况不是返回元素节点
node.firstElementChild：第一个子元素节点，有兼容性问题，ie9以上才支持
node.childen[0]：最常用写法，没有兼容性问题
node.lastChild：最后一个节点，大多情况不是返回元素节点
node.lastElementChild：最后一个元素节点，有兼容性问题，ie9以上才支持
node.children[node.children.length - 1]：最常用写法，没有兼容性问题
③兄弟节点（少用）
node.nextSibling：下一个兄弟节点
node.nextElementSibling：下一个兄弟元素节点，兼容性问题
node.previousSibling：上一个兄弟节点
node.previousElementSibling：上一个一个兄弟元素节点，兼容性问题
没有更好的方法：一般自己封装函数：
④创建元素节点并添加节点
创建
document.createElement(‘元素’)
添加
node.appendChild(child)
node.insertBefore(child,指定元素)
var ul = document.querySelector(‘ul’);
var li = document.createElement(‘li’);
ul.appendChild(li); //追加元素
ul.insertBefore(li,指定元素); //在指定元素前面加
⑤删除节点
node.removeChild(child)
链接不跳转：
< a href = ‘javascript:;’>< /a>
⑥复制节点
node.cloneNode()
注意：
1.如果括号为空或者false，浅拷贝，即只克隆节点本身，不克隆里面的子节点、内容。
2.如果括号参数为true，深拷贝，会克隆节点本身以及里面所有子节点
克隆完还要添加（insertBefore/appendChild）才会显示
案例：动态生成表格（重要）
<!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>Document</title>
<style>
table {
width: 500px;
margin: 100px auto;
border-collapse: collapse;
text-align: center;
}
td,
th {
border: 1px solid #333;
}
thead tr {
height: 40px;
background-color: #ccc;
}
</style>
</head>
<body>
<table cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
//1. 准备数据 （模拟）
var datas = [{
name: 'vivian',
subject: 'js',
score: 100
}, {
name: 'summer',
subject: 'js',
score: 98
}, {
name: 'carrie',
subject: 'js',
score: 96
}, {
name: 'apple',
subject: 'js',
score: 94
}];
//2. 往tbody里创建行(数组长度)
var tbody = document.querySelector('tbody');
for (var i = 0; i < datas.length; i++) { //管tr
//创建tr行
var tr = document.createElement('tr');
tbody.appendChild(tr);
//行里面创建单元格(属性个数 k为属性名 datas[i][k]为属性值)
for (var k in datas[i]) { //管td
//创建单元格
var td = document.createElement('td');
td.innerHTML = datas[i][k];
tr.appendChild(td);
}
//创建删除单元格
var td = document.createElement('td');
td.innerHTML = '<a href="javascript:;">删除</a>';
tr.appendChild(td);
}
//删除操作
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function () {
//点击a 删除a当前所在行 a的父节点是td td的父节点是tr
tbody.removeChild(this.parentNode.parentNode);
}
}
</script>
</body>
</html>
三种动态创建元素区别
- document.write()：如果页面文档流加载完毕，再调用这句话会导致页面重绘，原来的页面内容都没了，很少使用
- element.innerHTML：创建多个标签时，拼接字符串，非常耗时，但使用数组形式拼接效率很高
- document.createElement()
// 三种创建元素方式区别
// 1. document.write() 创建元素 如果页面文档流加载完毕，再调用这句话会导致页面重绘
// var btn = document.querySelector('button');
// btn.onclick = function() {
// document.write('<div>123</div>');
// }
// 2. innerHTML 创建元素
var inner = document.querySelector('.inner');
// for (var i = 0; i <= 100; i++) {
// inner.innerHTML += '<a href="#">百度</a>'
// }
var arr = [];
for (var i = 0; i <= 100; i++) {
arr.push('<a href="#">百度</a>');
}
inner.innerHTML = arr.join('');
// 3. document.createElement() 创建元素
var create = document.querySelector('.create');
for (var i = 0; i <= 100; i++) {
var a = document.createElement('a');
create.appendChild(a);
}
### 总结
**前端资料汇总**
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
* 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。
* 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯
* 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
* 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！
扫一扫
2981
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
