javaScript BOM

最新推荐文章于 2024-09-29 11:29:55 发布

F-x-y

最新推荐文章于 2024-09-29 11:29:55 发布

阅读量141

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_63694206/article/details/125344993

版权

这篇博客探讨了JavaScript中如何操作DOM，包括删除元素及显示隐藏。此外，还详细介绍了location对象，展示了如何利用它来刷新页面和跳转到新页面，并解析了URL的各个组成部分。同时，解释了URL的基本结构，如协议、主机名、端口和查询参数。

摘要由CSDN通过智能技术生成

1.windows对象

<div class="box">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
      <button onclick="deleteUl()">点击删除ul</button>
      <script>
        function deleteUl() {
          let rt = confirm('确定要删除元素ul吗?')
          if (rt) {
            let box = document.getElementsByClassName('box')[0]
            let ul = document.getElementsByTagName('ul')[0]
            // 使用父级元素删除直接子元素
            // box.removeChild(ul)
            ul.style.display = 'none'
          } else {
            alert('你取消了删除操作')
          }
        }
      </script>

2.location对象

location 对当前页面对应的url的描述对象:

hash, host, hostname, href, origin, pathname, port, protocol, search

<div class="box">
      <button onclick="location.reload()">点击刷新</button>
      <button onclick="location='a.html'">点击到a.html</button>
    </div>
    <script>
      // location 对当前页面对应的url的描述对象
      let { hash, host, hostname, href, origin, pathname, port, protocol, search } = location
      console.log('hash=' + hash)
      console.log('host=' + host)
      console.log('hostname=' + hostname)
      console.log('href=' + href)
      console.log('origin=' + origin)
      console.log('pathname=' + pathname)
      console.log('port=' + port)
      console.log('protocol=' + protocol)
      console.log('search=' + search)
      // 重新加载页面，刷新操作
      // url = 'http://127.0.0.1:5500/js-20220511-BOM/2-location对象.html?username=tom'
      /*
        url的组成部分:
          1 协议(protocol): http:
          2 主机名(hostname): 127.0.0.1
          3 端口号(port): 5500
          4 路径名称(pathname): /js-20220511-BOM/2-location对象.html
          5 查询参数(search): ?username=tom
      */
    </script>