1.回顾
<body>
<div class="box"></div>
<button>显示</button>
<script>
var box = document.getElementsByClassName("box")[0];
console.log(box);
var btn = document.getElementsByTagName("button")[0];
// var count = 0
// btn.onclick = function(){
// 统计 用户 点击了多少次 button 按钮
// // console.log(++count)
// if(++count % 2 === 1){
// box.className = 'box hidden'
// }else {
// box.className = 'box'
// }
// }
// var flag = true;// true为显示 false 为隐藏
// btn.onclick = function(){
// if(!flag){
// box.className = 'box'
// flag = true
// }else{
// box.className = 'box hidden'
// flag = false;
// }
// }
// 优化
var flag = true; // true为显示 false 为隐藏
btn.onclick = function () {
// 取反操作
flag = !flag;
console.log(flag);
// 三目运算符符号 也叫 三元运算符
flag ? (box.className = "box") : (box.className = "box hidden");
// if(flag){
// box.className = 'box'
// }else{
// box.className = 'box hidden'
// }
};
</script>
</body>
2.单选
首先:
<body>
<h1>aaa</h1>
<h1>aaa</h1>
<h1>aaa</h1>
<h1>aaa</h1>
<h1>aaa</h1>
<body>
第一步 选中需要被操作的标签
var h1s = document.getElementsByTagName('h1');
第二步 处理用户行为
思路一 this 闭包
ar h1s = document.getElementsByTagName("h1");
for (var i = 0, len = h1s.length; i < len; i++) {
// console.log(h1s[i])
console.log(i);
(function () {
var flag = true;
h1s[i].onclick = function () {
flag ? (this.style.color = "blue") : (this.style.color = "");
flag = !flag;
};
})();
}
console.log(i);
思路二 闭包思维
var h1s = document.getElementsByTagName("h1");
for (var i = 0, len = h1s.length; i < len; i++) {
console.log(i);
(function () {
var flag = true;
var x = i; // 解决 变量污染 全局i=5 的问题
h1s[i].onclick = function () {
// console.log(x);
flag ? (h1s[x].style.color = "blue") : (h1s[x].style.color = "");
flag = !flag;
};
})();
}
console.log(i);
思路三 给对象添加私有属性方式, 没有闭包。
var h1s = document.getElementsByTagName("h1");
for (var i = 0, len = h1s.length; i < len; i++) {
// 给5个对象分别添加私有属性flag 并初始值true
h1s[i].flag = true;
// 给5个 h1dom对象；分别添加私有属性i 并赋不同的初始值
h1s[i].i = i;
h1s[i].onclick = function () {
// 使用 对象下私有属性 i
this.flag
? (h1s[this.i].style.color = "blue")
: (h1s[this.i].style.color = "");
this.flag = !this.flag;
};
}
console.log(i);
3.节点
首先：
<div class="prent">
<div class="box2"></div>
<div class="box" id="hezi">
<span>我是一个内容</span>
<p>这是一段话</p>
<div>这是一个容器</div>
</div>
<div class="box1"></div>
</div>
然后：
<script>
// root 根节点
var box = document.getElementsByClassName('box')[0];
console.log(box.nodeName) // DIV 获取节点名字
console.dir(box)
var boxPrent = box.parentNode;
console.log(boxPrent) // 返回的父节点
var boxChildren = box.children; // 获取box的子节点集合
console.log(boxChildren);
var boxPre = box.previousElementSibling;// 获取box 的上一个兄弟元素
// var shang = box.previousElementSibling
console.log(boxPre)
var boxNext = box.nextElementSibling;
// var xia = box.nextElementSibling
console.log(boxNext)
</script>
综上：
第一步：通过js选择器 获取当前的html 标签。
第二步：通过节点关系 获取相关的元素（父元素 子元素 兄弟元素）。
4.新增元素
<body>
<div class="wrap"></div>
<button class="addElement">点击添加内容</button>
<script>
// 如何通过js方式新建标签
var node = document.createElement('p');
node.innerHTML = 'aaa';
console.log(node)
var wrap = document.querySelector('.wrap');
// var wrap = document.getElementsByClassName('wrap');
console.log(wrap)
// 语法
// 父元素.appendChild(子元素);
// ----> 子元素 可以是选择器获取的；也可以是 createElement 创建的
// appendChild() 作用：给某个元素添加子元素；参数：元素对象
wrap.appendChild(node);
// var node = document.createElement('p');
// node.innerHTML = 'xxx很牛！！！'
// console.log(node)
</script>
</body>
5.新增
设置元素
<main>
<div class="head">
<input id="ipt" type="text" placeholder="新政内容" />
<div><button id="add">新增</button></div>
</div>
<div class="content">
<p>我是一个内容</p>
</div>
</main>
样式如下
<style>
html,
body {
width: 100%;
height: 100%;
background-color: burlywood;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
input {
outline: none;
border: 1px solid #ccc;
height: 35px;
padding-left: 15px;
padding-right: 15px;
width: 300px;
color: #ccc;
}
#add {
width: 55px;
height: 35px;
appearance: none;
border: none;
outline: none;
}
.head {
width: 500px;
margin: 10px auto;
display: flex;
justify-content: center;
}
main {
width: 500px;
background-color: #ffffff;
padding: 10px;
margin: 0 auto;
}
.content {
padding: 20px 45px 20px 45px;
}
</style>
JavaScript代码如下：
<script>
// var ipt = document.querySelector("#ipt");
// var btn = document.querySelector("#add");
// var content = document.querySelectorAll(".content")[0];
// console.log(btn);
// // console.dir(ipt)
// btn.onclick = function () {
// console.dir(ipt);
// // 获取input 输入框中用户输入的内容
// var val = ipt.value;
// console.log(val);
// var pNode = document.createElement("p");
// pNode.innerHTML = val;
// content.appendChild(pNode);
// // 清空input 输入框
// ipt.value = "";
// // val = '' // 为什么不行 修改的是 ao 中的 val
// // 不能掌握的 对预编译还是模糊的
// };
var ipt = document.querySelector("#ipt");
var btn = document.querySelector("#add");
var content = document.querySelectorAll(".content")[0];
console.log(btn);
// console.dir(ipt)
btn.onclick = function () {
console.dir(ipt);
// 获取input 输入框中用户输入的内容
var val = ipt.value;
// 创建元素节点
var pNode = document.createElement("p");
// 创建文本节点
var pTxt = document.createTextNode(val)
pNode.appendChild(pTxt)
content.appendChild(pNode);
// 清空input 输入框
ipt.value = "";
// val = '' // 为什么不行 修改的是 ao 中的 val
// 不能掌握的 对预编译还是模糊的
};
</script>
6.appendChild与innerHTML 的区别
<body>
<div class="wrap">
<div class="box">
<span>我是一个内容</span>
<span>打发士大夫就爱上了的</span>
</div>
<div class="box1">
<span>我是一个年</span>
</div>
</div>
<script>
var box = document.querySelector('.box');
var box1 = document.querySelector('.box1');
box.innerHTML = '你好呀'; // 重新赋值
var text = document.createTextNode('我是一个新的文本节点');
box1.appendChild(text); // 插入 累加方式
</script>
</body>
7.insertBefore
<body>
<div class="wrap">
<p class="center">我是中心为</p>
</div>
<script>
var wrap = document.querySelector('.wrap');
var pNode = document.createElement('p');
var center = document.querySelector('.center')
pNode.innerHTML = '我是一个新'
// 语法
// 父元素.insertBefore(new,child) 表示某个子元素之前插入元素
// ---> new 新元素 需要被插入的元素
// ---> child 参照的子元素
wrap.insertBefore(pNode,center)
console.log(pNode)
console.log(center)
</script>
</body>
8.删除节点操作
<body>
<div class="wrap">
<p>我是需要被删除</p>
</div>
<button>点击参数p</button>
<h1>点击我自己删除我自己</h1>
<script>
var btn = document.querySelectorAll('button')[0];
var wrap = document.querySelector('.wrap');
var p = document.getElementsByTagName('p')[0];
btn.οnclick=function(){
// 语法
// prent.removeChild(child) 作用：删除父元素下的某个子元素
// prent---> 父元素
// child---> 需要被删除的子元素
wrap.removeChild(p)
}
var h1 = document.getElementsByTagName('h1')[0];
h1.onclick = function(){
// 语法
// el.remove() 作用：remove 删除某个元素
//----> el 为被删除的元素
h1.remove();
}
</script>
</body>
9.删除列表
<body>
<h1>都是需要被删除的内容</h1>
<h1>都是需要被删除的内容</h1>
<h1>都是需要被删除的内容</h1>
<h1>都是需要被删除的内容</h1>
<h1>都是需要被删除的内容</h1>
<script>
var h1s = document.querySelectorAll('h1');
// 方式一
// for(var i = 0;i<h1s.length;i++){
// console.log(h1s[i])
// h1s[i].onclick = function(){
// // h1s[i].remove();
// this指向的触发事件的元素
// this.remove();
// }
// }
// 方式二
for(var i = 0;i<h1s.length;i++){
(function(){
var x = i;
h1s[x].onclick = function(){
h1s[x].remove()
}
})()
}
</script>
</body>
10.列表删除
<body>
<ul>
<li>
<p>我是内容1</p>
<button>删除</button>
</li>
<li>
<p>我是内容2</p>
<button>删除</button>
</li>
<li>
<p>我是内容3</p>
<button>删除</button>
</li>
<li>
<p>我是内容4</p>
<button>删除</button>
</li>
<li>
<p>我是内容5</p>
<button>删除</button>
</li>
</ul>
<script>
var btns = document.querySelectorAll('li>button');
console.log(btns)
for(var i = 0,len= btns.length;i<len;i++){
(function(){
var x = i;
btns[x].onclick = function(){
// 点击button删除li
// 通过 button 获取父节点 li
var parent= btns[x].parentNode;
console.log(parent)
// 删除li
parent.remove();
}
})()
}
</script>
</body>
样式如下：
<style>
ul>li{
list-style: none;
width: 300px;
height: 45px;
margin: 10px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: thistle;
padding: 0px 15px;
}
</style>
11.todos
<body>
<main>
<div class="head">
<input id="ipt" type="text" placeholder="新政内容" />
<div><button id="add">新增</button></div>
</div>
<div class="content">
<ul>
<li>
<input class="checkbox" type="checkbox">
<span>我是内容</span>
<div class="deletEl">删除</div>
</li>
<li>
<input class="checkbox" type="checkbox">
<span>我是内容</span>
<div class="deletEl">删除</div>
</li>
</ul>
</div>
</main>
<script>
// 初始化获取一次
var ipt = document.querySelector("#ipt");
var addBtn = document.querySelector("#add");
var ulNode = document.querySelector(".content>ul");
deleteItem(); // 初始化执行；初始化可以是是实现删除列表
addBtn.onclick = function () {
var val = ipt.value;
var liNode = document.createElement("li");
var span = document.createElement("span");
var div = document.createElement("div");
div.innerHTML = "删除";
div.className = "deletEl";
span.innerHTML = val;
liNode.appendChild(span);
liNode.appendChild(div);
// 把li 添加到ul上
ulNode.appendChild(liNode);
ipt.value = "";
// 新增列表后；需要重获取 列表 这样才能删除新增内容
deleteItem();
};
// 删除列表象 方法实现
function deleteItem() {
var deletNode = document.querySelectorAll("li>.deletEl");
// 删除
for (var i = 0; i < deletNode.length; i++) {
(function (i) {
var x = i;
deletNode[x].onclick = function () {
var prent = deletNode[x].parentNode;
prent.remove();
};
})(i);
}
}deleteItem()
样式如下：
<style>
html,
body {
width: 100%;
height: 100%;
background-color: burlywood;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
input {
outline: none;
border: 1px solid #ccc;
height: 35px;
padding-left: 15px;
padding-right: 15px;
width: 300px;
color: #ccc;
}
#add {
width: 55px;
height: 35px;
appearance: none;
border: none;
outline: none;
}
.head {
width: 500px;
margin: 10px auto;
display: flex;
justify-content: center;
}
main {
width: 500px;
background-color: #ffffff;
padding: 10px;
margin: 0 auto;
}
.content {
padding: 20px 45px 20px 45px;
}
.content li {
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px 0px;
height: 35px;
}
.content .deletEl {
width: 45px;
height: 25px;
text-align: center;
line-height: 25px;
background-color: #ccc;
color: #796c6c;
}
</style>
通过点击复选框来达到删除文本内容效果：
function lineThrough(){
var span = document.querySelectorAll('span')
var lineNode = document.querySelectorAll("li>input[type=checkbox]");
for(var j = 0;j<lineNode.length;j++){
(function (j) {
var x = j;
var flag = true;
lineNode[x].onclick = function(){
flag ? (span[x].style.textDecoration="line-through") : (span[x].style.textDecoration="none");
flag = !flag;
};
})(j);
}
}lineThrough()
2995
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
