js使用： - 技术栈

1.关闭页面(close)：

2.打开页面：

3.警告框(alert)：

4.确认框(confirm):

可是调节高度宽度。

例子：

javascript 复制代码

  <button  id="bt1">关闭页面</button>
    <button  id="bt2" onclick="b()">打开百度</button>
    <script>
        //可省略
        //对话框
    //   let str= prompt('请输入姓名:')
    //   //警告框
    //   alert(str)
    //   //确认框
    //   let flag=confirm('是否删除?')
    //   alert(flag)
    function a(){
        //关闭页面
        close()
    }
    document.querySelector('#bt1').onclick=a
    function b(){
        open('a.html','新的页面','height=500px,left:300px,top:300px')

    }
    </script>

2.跳转，前进，后退，刷新页面

跳转：

javascript 复制代码

  <a href="../day11/2.html">跳转</a>

前进后退：

javascript 复制代码

  <button>前进</button>
    <button>后退</button>
    <a href="3.html">aaaaa</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>

刷新页面：

javascript 复制代码

  <script>
        document.write('端口号'+location.host+'<br>' )
        document.write('端口号'+location.hostname+'<br>' )
        document.write('端口号'+location.href+'<br>' )
        function a(){
          location.reload()//相当于刷新页面
        }
        function b(){
            location.replace('2.html')
        }
  
    </script>

document用法：

javascript 复制代码

 <h2 class="bbb">document</h2>
    <h2 class="bbb">document</h2>
    <h2 id="aaa">adfghh</h2>
    <h2 id="aaa">asdfght</h2>
    <ul>
        <li>222</li>
        <li>13</li>
        <li>43</li>
        <li>we</li>
        <li>sd</li>
    </ul>

1，通过id获取元素，获取的是单个元素

javascript 复制代码

   document.getElementById('aaa').style.backgroundColor = 'blue'

2.通过class获取元素,获取到的是一个伪数组

javascript 复制代码

  document.getElementsByClassName('bbb')[0].style.backgroundColor = 'red'

3.通过标签名获取元素，获取到的是一个伪数组

javascript 复制代码

 // document.getElementsByTagName('li')[0].style.backgroundColor='green'
        let lis = document.getElementsByTagName('li')
        for (let i = 0; i < lis.length; i++) {
            document.getElementsByTagName('li')[i].style.color = 'green'
        }

4.通过选择器进行获取,只获取一个

javascript 复制代码

 document.querySelector('li').style.backgroundColor = 'yellow'

5.获取所有，伪数组

javascript 复制代码

 let li2 = document.querySelectorAll('li')
        for (let i = 0;i<li2.length; i++) {
            document.querySelectorAll('li')[i].style.fontSize = '30px'
        }

6.写入文本

javascript 复制代码

  document.write('<h2>hello word!</h2>')