Document对象
前进
history.forward()
// history.go(1)
后退
history.back()
// history.go(-1)
<body>
<button>前进</button>
<button>后退</button>
<a href="3.html">aaaaaa</a>
<script>
function a(){
history.forward()
// history.go(1)
}
function b(){
history.back()
// history.go(-1)
}
document.querySelector('button:nth-child(1)').onclick=a
document.querySelector('button:nth-child(2)').onclick=b
</script>
</body>
location.reload()刷新页面
location.replace(‘2.html’)替换页面
通过id获取元素，获取的是单个元素
document.getElementById
通过class获取元素,获取到的是一个伪数组
document.getElementsByClassName
通过标签名获取元素，获取到的是一个伪数组
document.getElementsByTagName
根据选择器进行获取,只获取第一个
document.querySelector
获取所有，伪数组
let li2=document.querySelectorAll(‘li’)
for(let i=0;i<li2.length;i++){
document.getElementsByTagName(‘li’)[i].style.fontSize=‘50px’
}
写入文本
document.write
<body>
<h2 class="bbb">document</h2>
<h2 class="bbb">document</h2>
<h2 id="aaa">asdfsd</h2>
<h2 id="aaa">asdfsd</h2>
<ul>
<li>2222</li>
<li>113</li>
<li>555</li>
<li>ghjkl</li>
<li>bnm</li>
</ul>
<script>
//通过id获取元素，获取的是单个元素
document.getElementById('aaa').style.backgroundColor='blue'
///通过class获取元素,获取到的是一个伪数组
document.getElementsByClassName('bbb')[0].style.color='red'
//通过标签名获取元素，获取到的是一个伪数组
// document.getElementsByTagName('li')[0].style.color='green'
let lis=document.getElementsByTagName('li')
for(let i=0;i<lis.length;i++){
document.getElementsByTagName('li')[i].style.color='green'
}
//根据选择器进行获取,只获取第一个
document.querySelector('li').style.backgroundColor='yellow'
//获取所有，伪数组
let li2=document.querySelectorAll('li')
for(let i=0;i<li2.length;i++){
document.getElementsByTagName('li')[i].style.fontSize='50px'
}
//写入文本
document.write('<h2>hello word!</h2>')
</script>
</body>
Bom对象
let str=window.prompt(‘请输入姓名:’)
警告框
alert(str)
确认框
let flag=confirm(‘是否删除?’)
alert(flag)
关闭页面
close()
打开新页面
open()
<button id="bt1">关闭页面</button>
<button id="bt2" onclick="b()">打开百度</button>
<script>
function a(){
//关闭页面
close()
}
document.querySelector('#bt1').onclick=a
function b(){
//打开一个新页面
open('a.html','新的页面','height=500px,left:300px,top:300px')
}
</script>
time
function a(){
//获取当前时间
let now=new Date();
//年月日 时分秒
let year=now.getFullYear()
let month=now.getMonth()+1
let day=now.getDate()
let hour=now.getHours()
let mi=now.getMinutes()
let s=now.getSeconds()
let str='当前时间:'+year+'年'+month+'月'+day+'日'
+'\t\t'+hour+':'+mi+':'+s
document.getElementsByTagName('h2')[0].innerText=str
//延迟1000毫秒执行a()
setTimeout(a,1000)
}
a();
function b(){
//获取当前时间
let now=new Date();
//年月日 时分秒
let year=now.getFullYear()
let month=now.getMonth()+1
let day=now.getDate()
let hour=now.getHours()
let mi=now.getMinutes()
let s=now.getSeconds()
let str='当前时间:'+year+'年'+month+'月'+day+'日'
+'\t\t'+hour+':'+mi+':'+s
document.getElementsByTagName('h3')[0].innerText=str
}
//每个1000毫秒调用一次
let interval=setInterval(b,1000)
//清除定时
function cle(){
clearInterval(interval)
}
document.querySelector('h3').onclick=cle
checkbox
全选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全选</title>
</head>
<body>
<ul>
<li>
<input type="checkbox" name="ck" onchange="a()">全选
</li>
<li>
<input type="checkbox" name="list" value="">1
</li>
<li>
<input type="checkbox" name="list" value="">22
</li>
<li>
<input type="checkbox" name="list" value="">3
</li>
</ul>
<script>
function a(){
//选中状态
let state=document.getElementsByName('ck')[0].checked
//获取多选框
let cks=document.getElementsByName('list')
//通过循环，改变每一个多选的选中状态
for(let i=0;i<cks.length;i++){
//改变选中状态
cks[i].checked=state
}
}
</script>
</body>
</html>
node 层次节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>层次节点</title>
</head>
<body>
<ul>
<li id="li1">1</li>
<li>2</li>
<li id="li3">322222</li>
<li>4</li>
<li>5</li>
</ul>
<script>
let li1=document.getElementById('li1')
//返回父节点
let par=li1.parentNode
// alert(par)
par.style.border='1px solid red'
//获取所有子节点的集合
let nodes=par.childNodes
// alert(nodes[0])
// nodes[0].style.color='red'
//第一个子节点
let first=par.firstChild
// alert(first.nodeName)
//最后一个
let last=par.lastChild
// alert(last.nodeValue)
let li3=document.getElementById('li3')
//上一个
// alert(li3.previousSibling.nodeName)
//下一个
// alert(li3.nextSibling.nodeName)
// 获取父节点
let p=document.getElementsByTagName('ul')[0]
//第一个子节点
// alert(p.firstElementChild)
p.firstElementChild.style.border='1px solid blue'
//最后一个子节点
p.lastElementChild.style.border='1px solid blue'
</script>
</body>
</html>
替换图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="radio" name="book" value="图书1">图书1
<input type="radio" name="book" value="图书2">图书2
<br>
<img src="" alt="" height="300px" width="500px">
<p></p>
<script>
let img=document.querySelector('img')
let p=document.querySelector('p')
document.getElementsByName('book')[0].onchange=function(){
img.setAttribute('src','img/1.jpg')
let val=document.getElementsByName('book')[0].value
p.innerHTML=val
}
document.getElementsByName('book')[1].onchange=function(){
img.setAttribute('src','img/2.jpg')
let val=document.getElementsByName('book')[1].value
p.innerHTML=val
}
</script>
</body>
</html>
依次叠加图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="radio" name="book" value="图书1">图书1
<input type="radio" name="book" value="图书2">图书2
<br>
<!-- <img src="" alt="" height="300px" width="500px"> -->
<p></p>
<script>
let p=document.querySelector('p')
document.getElementsByName('book')[0].onchange=function(){
//创建一个node
let img=document.createElement('img')
img.setAttribute('src','img/1.jpg')
img.style.height='200px'
//追加元素
p.appendChild(img)
}
document.getElementsByName('book')[1].onchange=function(){
//创建一个node
let img=document.createElement('img')
img.setAttribute('src','img/2.jpg')
img.style.height='200px'
//追加元素
p.appendChild(img)
}
</script>
</body>
</html>
删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>删除</title>
</head>
<body>
<img src="img/1.jpg" alt="">
<script>
document.querySelector('img').onclick=function(){
let img=document.querySelector('img')
//需要通过父元素，才能删除
img.parentNode.removeChild(img)
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
