1.排他思想(一种算法)
首先先排除其他人，然后才设置自己的样式,这种排除其他人的思想我们成为排他思想
// 1. 获取所有按钮元素
var btns = document.getElementsByTagName('button');
// btns得到的是伪数组 里面的每一个元素 btns[i]
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
// (1) 我们先把所有的按钮背景颜色去掉 干掉所有人
for (var i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
// (2) 然后才让当前的元素背景颜色为pink 留下我自己
this.style.backgroundColor = 'pink';
}
}
2.一些案例
1.百度换肤效果
// 1. 获取元素
var imgs = document.querySelector('.baidu').querySelectorAll('img');
// console.log(imgs);
// 2. 循环注册事件
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function() {
// this.src 就是我们点击图片的路径 images/2.jpg
// console.log(this.src);
// 把这个路径 this.src 给body 就可以了
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}
2.表格隔行变色
// 1.获取元素 获取的是 tbody 里面所有的行
var trs = document.querySelector('tbody').querySelectorAll('tr');
// 2. 利用循环绑定注册事件
for (var i = 0; i < trs.length; i++) {
// 3. 鼠标经过事件 onmouseover
trs[i].onmouseover = function () {
// console.log(11);
this.className = 'bg';
}
// 4. 鼠标离开事件 onmouseout
trs[i].onmouseout = function () {
this.className = '';
}
}
- 两个新的鼠标事件 鼠标经过onmouseover 鼠标离开onmouseout
3.表单全选取消全选案例
// 1. 全选和取消全选做法： 让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
// 获取元素
var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮
var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框
// 注册事件
j_cbAll.onclick = function () {
// this.checked 它可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中
console.log(this.checked);
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].checked = this.checked;
}
}
// 2. 下面复选框需要全部选中， 上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中。
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].onclick = function () {
// flag 控制全选按钮是否选中
var flag = true;
// 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
for (var i = 0; i < j_tbs.length; i++) {
if (!j_tbs[i].checked) {
flag = false;
break; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了
}
}
j_cbAll.checked = flag;
}
}
3.自定义属性的操作
1.获取属性值
- element.属性 可以获取属性值
console.log(div.id);
- element.getAttribute(‘属性’)
console.log(div.getAttribute('id'));
//element.getAttribute('属性') get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性
- 这两种方法区别
- 第一种是获取内置属性值（元素本身自带的属性）
- 第二种是获取自定义的属性（标准）我们程序员自定义的属性
2.设置属性值
- element.属性= ‘值’
div.id = 'test';
div.className = 'navs';
- element.setAttribute(‘属性’, ‘值’); 主要针对于自定义属性
div.setAttribute('id', 'text');
div.setAttribute('class', 'footer'); // class 特殊 这里面修改类写的就是class 不是className
3.移除属性
- element.removeAttribute(‘属性’)
div.removeAttribute('index');
4.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>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 {
color: white;
background-color: #c81623;
}
.item {
display: none;
margin: 20px 0 0 20px;
}
</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>
<script>
var lis = document.querySelector('.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>
</body>
</html>
5.H5自定义属性规范
-
目的：是为了保存并使用数据，有些数据可以保存到网页而不用存到数据库中
-
但是有些自定义属性很容易有歧义，不同意看出是自定义的还是内置属性，所以H5新增了自定义属性规范：
- H5规定自定义属性data-开头作为属性名并且赋值 比如
<div getTime="20" data-index="2" data-list-name="andy"></div>- 或者使用JS设置，如下
div.setAttribute('data-time', 20);- 使用兼容性获取，如下
div.getAttribute('data-index');- H5新增element.dataset.index 或者element.datase[‘index’] (IE11才开始支持)
// h5新增的获取自定义属性的方法 它只能获取data-开头的 // dataset 是一个集合里面存放了所有以data开头的自定义属性 console.log(div.dataset); console.log(div.dataset.index); console.log(div.dataset['index']); // 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法 console.log(div.dataset.listName); console.log(div.dataset['listName']);
4.节点
1.概述
- 获取元素的两种方式：①利用DOM提供的方法，但是繁琐，逻辑性不强；②利用节点层级关系获取元素，逻辑性强，但兼容性差一点，更简单。
- 网页中所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用node来表示，HTML DOM树中的所有节点均可以通过JavaScript进行访问，所有HTML元素（节点）均可以被修改，也可以创建或者删除。
- 节点至少拥有nodeType(节点类型)，nodeName(节点名称)和nodeValue(节点值)这三个基本属性
- 元素节点nodeType为1
- 属性节点nodeType为2
- 文本节点nodeType为3（文本节点包括文字、空格、换行等）
- 实际开发中，节点操作主要是元素节点
2.节点层级
- 父级节点 parentNode
var erweima = document.querySelector('.erweima');
// var box = document.querySelector('.box');
// 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
console.log(erweima.parentNode);
- 子节点 childNodes与children
// 1. 子节点 childNodes 所有的子节点 包含 元素节点 文本节点等等 不提倡使用
console.log(ul.childNodes);
// 2. children 获取所有的子元素节点 也是我们实际开发常用的
console.log(ul.children);
- 子节点 第一个孩子、最后一个孩子
// 1. firstChild 第一个子节点 不管是文本节点还是元素节点
console.log(ol.firstChild);
console.log(ol.lastChild);
// 2. firstElementChild 返回第一个子元素节点 ie9才支持
console.log(ol.firstElementChild);
console.log(ol.lastElementChild);
// 3. 实际开发的写法 既没有兼容性问题又返回第一个子元素
console.log(ol.children[0]);
console.log(ol.children[ol.children.length - 1]);
- 兄弟节点
<div>我是div</div>
<span>我是span</span>
<script>
var div = document.querySelector('div');
// 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
console.log(div.nextSibling);
console.log(div.previousSibling);
// 2. nextElementSibling 得到下一个兄弟元素节点 没有就返回null IE9以上才支持
console.log(div.nextElementSibling);
console.log(div.previousElementSibling);
//目前没有别的方法，只能通过封装一个兼容性函数来做IE9以下
function getNextElementSibling(element) {
var el = element;
while (el = el.nextSibling) {
if (el.nodeType === 1) {
return el;
}
}
return null;
}
</script>
3.创建节点
因为创建的节点在原先的页面中是没有的，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点
// 1. 创建节点元素节点
var li = document.createElement('li');
// 2. 添加节点 node.appendChild(child) node 父级 child 是子级 后面追加元素 类似于数组中的push
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. 添加元素
4.删除节点
ul.removeChild(ul.children[0]);
//删除ul里面的第一个孩子
5.案例：删除留言
<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;
}
body {
padding: 100px;
}
textarea {
width: 200px;
height: 100px;
border: 1px solid pink;
outline: none;
resize: none;
}
ul {
margin-top: 50px;
}
li {
width: 300px;
padding: 5px;
/* background-color: rgb(245, 209, 243); */
border: 1px solid reb(245, 209, 243);
color: red;
font-size: 14px;
margin: 15px 0;
}
li a {
float: right;
text-decoration: none;
color: rgb(240, 109, 109);
}
</style>
</head>
<body>
<textarea name="" id=""></textarea>
<button>发布</button>
<ul>
</ul>
<script>
// 1. 获取元素
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
// 2. 注册事件
btn.onclick = function () {
if (text.value == '') {
alert('您没有输入内容');
return false;
} else {
// console.log(text.value);
// (1) 创建元素
var li = document.createElement('li');
// 先有li 才能赋值
li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
// href='javascript:;' 可以阻止链接跳转
// (2) 添加元素
// ul.appendChild(li);
ul.insertBefore(li, ul.children[0]);
text.value = '';
// (3) 删除元素 删除的是当前链接的li 它的父亲
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function () {
// node.removeChild(child); 删除的是 li 当前a所在的li this.parentNode;
ul.removeChild(this.parentNode);
}
}
}
}
</script>
</body>
</html>
6.赋值节点
var ul = document.querySelector('ul');
// node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
// node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
var lili = ul.children[0].cloneNode(true);
ul.appendChild(lili);
7.三种动态创建元素区别
- document.write() 不常用
// document.write() 创建元素 如果页面文档流加载完毕，再调用这句话会导致页面重绘
var btn = document.querySelector('button');
btn.onclick = function () {
document.write('<div>123</div>');
}
- element.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('');//join() 方法用于把数组中的所有元素转换一个字符串。
- document.createElement() 创建多个时效率比第二种稍微低 但结构更清晰
var create = document.querySelector('.create');
for (var i = 0; i <= 100; i++) {
var a = document.createElement('a');
create.appendChild(a);
}
扫一扫
1013
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
