Javascript学习资料整理——week2-day5

最新推荐文章于 2025-01-02 12:46:34 发布

山本仙人

最新推荐文章于 2025-01-02 12:46:34 发布

阅读量482

点赞数 2

文章标签： javascript html 前端 ecmascript

本文链接：https://blog.csdn.net/m0_64736519/article/details/121752158

版权

本文介绍了如何利用window对象操作浏览器，包括窗口大小、滚动事件、定时器（setTimeout和setInterval）、以及DOM操作如获取元素、修改内容等，还涵盖了历史记录、位置对象和常见API的使用。

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

一、window窗口对象

1.BOM 浏览对象模型

其实就是操作浏览器的一些能力

我们可以操作哪些内容:

- 获取一些浏览器的相关信息（窗口的大小）

- 操作浏览器进行页面跳转

- 获取当前浏览器地址栏的信息

- 操作浏览器的滚动条

- 浏览器的信息（浏览器的版本）

- 让浏览器出现一个弹出框（alert/confirm/prompt)

2.BOM 的核心就是window对象

window时浏览器内置的一个对象，里面包含操作浏览器的方法

3.window窗口核心对象

常用方法：

open()

打开一个新窗口

window.open("http://www.baidu.com","")

close()

对话框

alert() 消息提示框

confirm(提示信息) 消息确认

确定和取消，提示信息（true/false）

prompt()

弹出输入框，接收你输入的信息并返回

*注意：window窗口对象是浏览器根对象，使用它的属性方法或子对象时，可以不加window

4.定时器

应用：我们可以看到很多网站首页有一个“图片轮播”特效，每隔2s图片变换一次，这里就用到了定时器。

定时器用途非常广，在图片轮播、在线时钟、弹窗广告等地方大显身手。凡是自动执行的东西，很大可能都是跟定时器有关。

1) setTimeout() 和 clearTimeout()

语法：

var timerId = setTimeout(function(){

                console.log('倒计时定时器')

            },1000)

            clearTimeout(timerId)

作用：

倒计时定时器

到了指定时间执行回调函数中代码

返回定时器对象

在JavaScript中，我们可以使用setTimeout()方法来设置“一次性”调用的函数。其中clearTimeout()可以用来取消执行setTimeout()方法。

2) sentInterval() 和 clearInterval()

循环执行定时器

语法：

 var timerId2 = setInterval(function(){

                console.log('间隔定时器')

            },1000)

            clearInterval(timerId2)

作用：

按照指定时间循环执行回调函数中代码

在JavaScript中，我们可以使用setInterval()方法来设置“重复性”调用的函数。其中clearInterval()可以用来取消执行setTimeout()方法。

5.浏览器窗口尺寸

innerHeight 和 innerWidth

这两个方法分别用来获取浏览器窗口的宽度和高度（包含滚动条）

var windowHeight = window.innerHeight

    console.log(windowHeight)

var windowWidth = window.innerWidth

    console.log(windowWidth)

6.浏览器滚动事件（onscroll）

这个onscroll事件是当浏览器的滚动条滚动的时候触发

或者鼠标滚轮滚动触发

   window.onscroll = function(){

            console.log('浏览器滚动了')

        }

7.浏览器滚动距离

使用document对象

scrollTop 获取的是页面向上滚动的距离

两种获取方式：

 document.body.scrollTop

                document.documentElement.scrollTop

               

                window.onscroll = function(){

                    console.log(document.body.scrollTop)

                    console.log(document.documentElement.scrollTop)

                }

区别：IE、谷歌、火狐浏览器在有 DOCTYPR 声明的时候，都用 document.documentElement.scrollTop

scrollLeft 获取页面向左滚动的距离

 document.body.scrollLeft

                document.documentElement.scrollLeft

               

                window.onscroll = function(){

                    console.log(document.body.scrollLeft)

                    console.log(document.documentElement.scrollLeft)

                }

8.回到顶部（案例）

二、历史记录对象（history）

1.获取history对象

window.history

2.方法：

back() 加载history对象列表中的前一个url

forward() 加载history对象列表中的下一个url

go() 加载history对象列表中的某个具体url

history.back() == history.go(-1) 浏览器的‘后退’

history.forward() == history.go(1) 浏览器的‘前进’

示例：

 function nextHistoryPage(){

            window.history.forward()

        }

        function preHistoryPage(){

            window.history.back()

        }

        <a href='javascript:nextHistoryPage()'>下一页</a>

        <a href='javascript:preHistoryPage()'>上一页</a>

三、位置对象（location）

1.常用属性：location.href

获得当前页面的url地址： window.location.href

2.常用方法：

重新加载当前文档：location.reload()

四、DOM

1.DOM 文档对象模型

使用javascript 代码操作，操作html标签元素属性、样式、内容的能力

2.document对象 (文档对象)

3.操作元素内容

1）获取元素

如何获取元素

2）更改元素内容

4.如何获取元素

getElementById('id属性值')

通过标签的id名称来获取标签的

在一个页面中id是唯一的，所以获取到的就是一个元素

示例：

 <div id='box'></div>

            <script>

                var box = document.getElementById('box')

                console.log(box)    //<div id='box'></div>

            </script>

获取到的就是页面中的哪个id为box的div标签

getElementsByClassName('class属性')

通过标签的class名称来获取标签的

因为页面中可能有多个元素的class名称一样，所以获取到的是一组元素

就算class只有一个，也是获取一组元素，只不过这一组中只有一个DOM元素

示例：

 <div class='box'></div>

            <script>

                var box = document.getElementsByClassName('box')

                console.log(box)    // [<div></div>]

                console.log(box[0]) // <div class='box'></div>

            </script>

获取到的是一组元素，是一个长得和数组一样的数据结构，但不是数组，是伪数组

这一组数据也是按照索引排列的，所以要想准确的拿到这个div，需要用索引来获取

getElementsByTagName('标签名')

通过标签的标签名称来获取标签的

因为页面中可能有多个元素的标签名称一样，所以获取到的是一组元素

就算只有一个标签名，也是获取一组元素，只不过这组中只有一个DOM元素而已

示例：

  <div></div>

            <script>

                var box = document.getElementsByTagName('div')

                 console.log(box)    // [<div></div>]

                console.log(box[0])  // <div></div>

            </script>

和 getElementsByClassName 一样，获取到的是一个长得很像数组的元素

必须要用索引才能得到准确的DOM元素

getElementsByName('name属性')

queryselector()

是按照选择器的方式来获取元素

也就是按照写css的选择器来获取

此方法只能获取一个元素，并且是页面中第一个满足条件的元素

示例：

   console.log(document.querySelector('div'))  //获取页面中第一个 div 元素

   console.log(document.querySelector('.box'))  //获取页面中第一个 box 类名的元素

   console.log(document.querySelector('#box'))  //获取页面中第一个 id 名为 box 的元素

querySelectorAll()

是按照选择器的方式来获取元素

此方法能获取到所有满足条件的元素，以一个伪数组的形式返回

示例：

 console.log(document.querySelectorAll('div'))  //获取页面中所有的 div 元素

 console.log(document.querySelectorAll('.box'))  //获取页面中所有有 box 类名的元素

获取到的是一组数组，也需要用索引来获取到准确的每一个DOM元素

5.伪数组

相同点： length属性

区别：不能使用 push、pop...

6.操作元素内容

innerHTML （html标签内容 <span>内容</span>）

获取元素内部的HTML结构

 <div>

      <p><span>hello</span></p>

 </div>

 <script>

      var div = document.querySelector('div')

      console.log(div.innerHTML)  //<p><span>hello</span></p>                              

 </script>

设置元素内容

<div></div>

<script>

        var div = document.querySelector('div')

        div.innerHTML = '<p>hello</p>'

</script>

设置完以后，页面中的div元素里面就会嵌套一个p元素

innerText （纯文本内容内容）

获取元素内部的文本（只能获取到文本内容，获取不到html标签）

  <div>

       <p><span>hello</span></p>

  </div>

  <script>

       var div = document.querySelector('div')

       console.log(div.innerText)  //hello

  </script>

可以设置元素内部的文本

<div></div>

<script>

       var div = document.querySelector('div')

       div.innerText = '<p>hello</p>'

</script>

设置完毕后，会把<p>hello</p>当作一个文本出现在div元素里面，而不会把p解析成标签

value 表单内容