document对象的应用

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('<h2>hello word!</h2>')

前进： 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="img/1.jpg" alt="">
    <script>
        document.querySelector('img').onclick=function(){
            let img=document.querySelector('img')
            //需要通过父元素，才能删除
            img.parentNode.removeChild(img)
        }
    </script>