prompt 弹框
警告框 alert
确认框confirm false/true
关闭页面 close()
打开新页面 open
let str=prompt('请输入姓名:')//输入内容
alert(str)//弹出内容
let flag=confirm('是否删除?')
alert(flag)
function a(){
close()
}
document.querySelector('#bt1').onclick=a
function b(){
open('a.html','新的页面','height=800px,left:300px,top=300px,toolbar=0,scrollbars=no,location=false,status=yes')
}
通过id获取元素,获取的是单个元素 getElementById
通过class获取元素,获取的是一个伪数组 getElementsByClassName
通过标签名获取元素 getElementsByTagName
根据选择器进行获取,只获取第一个 querySelector
<h2 class="bbb">document</h2>
<h2 class="bbb">document</h2>
<h2 id="aaa">adsasd</h2>
<h2 id="aaa">adsasd</h2>
<ul>
<li>222</li>
<li>13</li>
<li>43</li>
<li>we</li>
<li>sd</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'
</script>
获取所有,伪数组
<h2 class="bbb">document</h2>
<h2 class="bbb">document</h2>
<h2 id="aaa">adsasd</h2>
<h2 id="aaa">adsasd</h2>
<ul>
<li>222</li>
<li>13</li>
<li>43</li>
<li>we</li>
<li>sd</li>
</ul>
<script>
// 获取所有,伪数组
let li2=document.querySelectorAll('li')
for(let i=0;i<li2.length;i++){
document.querySelectorAll('li')[i].style.fontSize='30px'
}
</script>
写入文本
//写入文本
document.write(‘
hello word!
’)前进、后退
```javascript
前进: history.forward() / history.go(1)
后退:history.back() /history.go(-1)
<button>前进</button>
<button>后退</button>
<a href="3.html">aaa</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>
location.reload() 相当于刷新页面
location.replace(‘2.html’) 替换
<script>
document.write('端口号:'+location.host+'<br>')
document.write('主机名:'+location.hostname+'<br>')
document.write('url:'+location.href+'<br>')
function a(){
location.reload()//相当于刷新页面
}
function b(){
location.replace('2.html')
}
</script>
<button onclick="a()">重新加载</button>
<button onclick="b()">替换</button>层次节点
返回父节点:parentNode
获取所有子节点的集合:childNodes
第一个子节点:firstChild
最后一个:lastChild
上一个:previousSibling
下一个:nextSibling
获取父节点:irstElementChild
let li1=document.getElementById('li1')
//返回父节点
let par=li1.parentNode
par.style.border='1px solid red'
//获取所有子节点的集合
let nodes=par.childNodes
// nodes[i].style.color='red'
//第一个子节点
let frist=par.firstChild
// alert(frist.nodeType)
// 最后一个
let last=par.lastChild
// alert(last.nodeType)
let li3=document.getElementById('li3')
//上一个
// alert(li3.previousSibling.nodeValue)
//下一个
// alert(li3.nextSibling.nodeName)
// 获取父节点
let p=document.getElementsByTagName('ul')[0]
p.firstElementChild.style.border='1px solid blue'
p.lastElementChild.style.border='1px solid blue'
setAttribute
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
}
追加元素:appendChild
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)
}
删除:removeChild
<img src="" alt="">
<script>
document.querySelector('img').onclick=function(){
let img=document.querySelector('img')
//需要通过父元素,才能删除
img.parentNode.removeChild(img)
}
</script>