DOM.案例
文章目录
- 密码可视
- 购物车全选
- 页面渲染
- 简易选项卡
- 选项卡（further）
- 动态删除
- 懒加载
密码可视
一点击小眼睛，就能看到输入的内容，再点小眼睛，又变成密码框，这个类型操作的是input的属性
<head>
head>
<body>
<input type="password" id="password">
<button id="eyebtn">eyebutton>
<script>
var passInput=document.getElementById("password")
var eyeBtn=document.querySelector("#eyebtn")
eyebtn.onclick=function(){
console.log(passInput.type)
if(passInput.type==="password"){
password.type="text"
}else{
passInput.type="password"
}
}
script>
body>
购物车全选
点击全选后，下面的列表全部选上；当下面的列表一个一个全部选上后，全选按钮自动亮
<head>
head>
<body>
<input type="checkbox" id="all">全选/全部选
<hr>
<ul class="shop">
<li>
<input type="checkbox">商品1
li>
<li>
<input type="checkbox">商品2
li>
<li>
<input type="checkbox">商品3
li>
<li>
<input type="checkbox">商品4
li>
ul>
<script>
var oAll=document.querySelector('#all')
var oitems=document.querySelectorAll(".shop input")
oAll.onclick=function(){
for(var i=0;i<oitems.length;i++){
oitems[i]checked=oAll.checked
}
}//点击全选
for(var i=0;i<oitems.length;i++){
oitems[i].onclick=handler
}
function handler(){
var count=0
/*每次点完后count赋值0，然后再进行
for循环判断每一项 如果checked 就
count++*/
for(var i=0;i<oitems.length;i++){
if(oitems[i],checked) count++
}
if(count===oitems.length){
oAll.checked=true
}else{
oAll.checked=false
}
}//选完所有商品后，全选按钮自动选上
script>
body>
页面渲染
<head>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
li{
overflow:hidden;
}
li img{
float:left;
width:100px;
}
style>
head>
<body>
<ul>
<li>
<img src="./一张图片">
<h3>神奇动物：邓布利多之谜h3>
<p>观众评分 7.8p>
li>
ul>
<script>
var filmList/*可以是后端数据*/={
{
url:"",
title:"",
grade:
},
{
url:"",
title:"",
grade:
},
{
url:"",
title:"",
grade:
}
}//现在要把这些数据做成li，查到上面的ul中
var filmItems=filmList.map(function(item){
return `
&{item.title}
观众评分 &{item.grade}<>
/*用&+{}的话，就表示里面的内容可以当场js
代码执行，可以放变量*/
`
})// ` ` 是换行字符串
console.log(filmItems.join(""))
var oul = document.querySelector("ul")
oul.innerHTML = fileItem.join("")
script>
body>
简易选项卡
<head>
<style>
*{
margin:10;
passing:0;
}
ul{
display:file;
Lisy-style：none；
}
li {
height:50px;
Line-height:50px;
text-aligh:center;
flex:1;
}
.active{
color:red;
boder-buttom:100px 1px splid red;
]
style>
head>
<body>
<ul>
<li class="active id=""item1">正在热映li>
<li id="item2">即将上映li>
ul>
<script>
item1.onclick = function(){
item1.classList.add("active")
item2.classList.remove("active")
}//点击item1，增加1的active，删掉2的active
item2.onclick = function(){
item1.classList.remove("active")
item2.classList.add("active")
}//点击item2.增加2的active。删掉2的active
script>
body>
选项卡（further）
<head>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
.Header{
display:flex;
width:500px;
}
.Header li{
flex:1;
height:50px;
line-height:50px;
text-align:center;
bottom:1px solid black;
}
.Box{
position: relative;
}
.Box li{
position: absolute;
left: 0;
height: 0;
width:500px;
height:200px;
background-color:yellow;
display: none;
}
.Header .active{
background-color: cornflowerblue;
}
.Box .active{
display: block;
}
style>
head>
<body>
<ul class="Header">
<li class="active">英雄联盟li>
<li>DOTAli>
<li>风暴英雄li>
<li>300英雄li>
ul>
<ul class="Box">
<li class="active">英雄联盟（League of Legends）是由美国Riot Games开发，腾讯游戏运营的全新英雄对战网游。. 英雄联盟的主创团队由各著名游戏公司的核心美术、策划、程序人员组成，他们打造了游戏中风格特色各异的英雄，加入更加丰富的物品合成系统、地图玩法、天梯匹配机制，以及独创的"召唤师"技能、符文、天赋组合，让玩家感受不一样的英雄对战网游。. 在游戏中，玩家将扮演一位召唤者，并选择你所信任的联盟国进入这个游戏的正义领域，为了控制瓦罗然的权利而奋战。. 在这个联盟中只有一条规则：胜者就是一切！li>
<li>《DotA》（Defense of the Ancients），可以译作守护古树、守护遗迹、远古遗迹守卫， 是由暴雪公司出品即时战略游戏《魔兽争霸3》的一款多人即时对战、自定义地图，可支持10个人同时连线游戏，是暴雪公司官方认可的魔兽争霸的RPG地图。li>
<li>《风暴英雄》是一款团战游戏，其中包括了玩家耳熟能详的暴雪系列游戏英雄。 你可以个性化定制来自不同暴雪游戏时空的英雄，来找到适合自己游戏风格的英雄。 和好友一起组队进行一场快节奏的混战，不同的战场会带来不同的战术和游戏方法。 li>
<li>《300英雄》是由上海跳跃网络科技有限公司自主研发和运营的一款类DOTA网游。游戏以7v7组队对抗玩法为主，提供永恒战场和永恒竞技场两种经典模式任由玩家选择，并加入勇者斗恶龙、克隆战争等多种休闲娱乐玩法，主要特点是竞技感强、节奏快、对抗激烈。 li>
ul>
<script>
var HeaderItems = document.querySelectorAll(".Header li")
var BoxItems = document.querySelectorAll(".Box li")
for(var i=0; i<HeaderItems.length;i++){
HeaderItems[i].dataset.index = i
HeaderItems[i].onclick = handler
}
function handler(){
var index = this.dataset.index
for(var m=0;m<HeaderItems.length;m++){
HeaderItems[m].classList.remove("active")
BoxItems[m].classList.remove("active")
}
HeaderItems[index].classList.add("active")
BoxItems[index].classList.add("active")
}
script>
body>
动态删除
创建一个按钮，可以删除当前页面的数据
<head>
head>
<body>
<ul id="list">
<ul>
<script>
var arr =["111","222","333"]
//首先要进行一个循环
for(var i=0;i<arr.length;i++){
var oli = document.createElement("li")//创建oli为li
oli.innerHTML = arr[i]//再使innerHTML的值为arr的i
var obutton = document.createElement("button")//创建一个button（按钮）节点
obutton.innerHTML ="delete"//在按钮里面放上内容
obutton.onclick=handler//创建完按钮后就给它绑上onclick这个属性
oli.appendChild(obutton)//把创建的按钮放到oli中
list.appendChild(oli)//再把刚创建好的oli插入到list中
/*以上的代码相当于：for循环遍历n次，创建
了n个，每次创建li的时候，设置完里面的内
容，都把一个按钮再加到li里面，最后再把
list里面追加一个li*/
}
function handler(){
this.parentNode.remove()//this就是按钮本身，然后找到它的父节点
}//此函数，每个按钮点完一次都会执行一遍
//想要实现点哪个删哪个，就需要知道点的是第几个按钮，可以用this
script>
body>
懒加载
划到页面底部后，才给加载下一页的数据
如何让他知道划到了页面底部：会用到获取元素尺寸，获取元素偏移量，获取可视窗口尺寸
<head>
<style>
*{
margin:0;
padding:0;
}
html,body{
height:100%;
}
ul li{
overfloat:hidden;
height:150px;
}
ul li img{
float:left;
width:80px;
}
style>
head>
<body>
<h1>标题h1>
<ul id="list">
<li>
<img src="">
<h3>哆啦A梦：大雄的宇宙小战争2021h3>
li>
ul>
<script>
var arrl=[{
name："哆啦A梦：大雄的宇宙小战争2021"，
url:""
}，
{
name："坏蛋联盟"，
url:""
}，
{
name："暗恋·橘生淮南"，
url:""
}，
{
name："海底小纵队"，
url:""
}，
{
name："我要我们在一起"，
url:""
}，
]
var arr2=[{
name："哆啦A梦：大雄的宇宙小战争2021"，
url:""
}，
{
name："坏蛋联盟"，
url:""
}，
{
name："暗恋·橘生淮南"，
url:""
}，
{
name："海底小纵队"，
url:""
}，
{
name："我要我们在一起"，
url:""
}，
] //现在这个列表是写死的
//写动态的
renderHTMl(arrl)//arrl为后端传过来数据，写那个调用哪个
function renderHTML(arr//接受形参){
/*list.innerHTML += arr.map(functtion(item){
retrun `
`
}).join("")*/
for(var i=0;i<arr.length;i++){
var oli = document.creatElement("li")
oli,innerHTML = `
${arr[i].url}" alt="">
${arr[i].name}`
list.appendchild(oli)
}
}
//用监听
isLoading = false/*如果下面的if用的是“快到底了”的话，就加这一句，防止快到底的时候继续往下滑，一直触发*/
window.onscroll = function(){
//console.log("1111")
var listHeight = list.offsetHeight
var listTop = list.offsetTop
//console.log(listHeight+listTop)
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
var windowHeight = document.documentElement.clientHeight
//console.log(Math.round(windowHeight+scrollTop))
//判断
if(Math.round(windowHeight+scrollTop)===(listHeight+listTop)){
console.log("到底了")//前面和后面相等的时候显示一句话“到底了”
}
/*if((listHeight+listTop)-Math.round(windowHeight+scrollTop)<100){
console.log("快到底了")//整个页面减去逐渐变大的滑动的页面小于100时，显示‘快到底了’”
isLoading = true
}*/
}
//渲染下一页数据
renderHTML(arr2)
isLoading = false
script>
body>