Java教程

【JavaScript】学习第十天(BOM、DOM)

本文主要是介绍【JavaScript】学习第十天(BOM、DOM),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

BOM / DOM(上)

  • 今天我们开始使用 js 去操作浏览器和页面中的 html 元素了

BOM

  • BOM(Browser Object Model):浏览器对象模型

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

  • 我们可以操作哪些内容

    1.获取一些浏览器的相关信息(窗口的大小)
    2.操作浏览器进行页面跳转
    3.获取当前浏览器地址栏信息
    4.操作浏览器的滚动条
    5.浏览器的信息(浏览器的版本)
    6.让浏览器出现一个弹出框(alert/confirm/prompt)
    
  • BOM的核心就是 window 对象

  • window 是浏览器内置的一个对象,里面包含着操作浏览器的方法

获取浏览器窗口的尺寸

  • innerHeightinnerWidth
  • 这两个方法分别是用来获取浏览器窗口的宽度和高度(包含滚动条的)
var windowHeight = window.innerHeight
console.log(windowHeight)

var windowWidth = window.innerwidth
console.log(windowWidth)

浏览器的弹出层

  • alert是在浏览器弹出一个提示框
window.alert('我是一个提示框')

在这里插入图片描述

1.这个弹出层只是一个提示内容,只有一个确定按钮
2. 点击确定按钮以后,这个提示框就消失了
  • confirm是在浏览器弹出一个询问框
var boo = window.confirm('我是一个询问框')
console.log(boo)

在这里插入图片描述

  • 这个弹出层有一个询问信息和两个按钮
  • 当你点击确定的时候,就会得到 true
  • 当你点击取消的时候,就会得到 false
  • prompt是在浏览器弹出一个输入框
var str = window.prompt('请输入内容')
console.log(str)

在这里插入图片描述

  • 这个弹出层有一个输入框和两个按钮
  • 当你点击取消的时候,得到的是null
  • 当你点击确定的时候得到的就是你输入的内容

浏览器的地址信息

  • 在 window 中有一个对象叫做 location
  • 就是专门用来存储浏览器的地址栏内的信息的

location.href

  • location.href这个属性存储的是浏览器地址栏内 url 地址的信息
console.log(window.location.href)
  • 会把中文编程url编码的格式
  • location.href这个属性也可以给他赋值
window.location.href = './index.html'
//这个就会跳转页面到后面你给的那个地址

location.reload

  • location.reload()这个方法会重新加载一遍页面,就相当于刷新是一个道理
window.location.reload()

注意:不要写在全局,不然浏览器就会一直处在刷新状态

浏览器的历史记录

  • window 中有一个对象叫做 history
  • 是专门用来存储立誓记录信息的

history.back

  • history.back是用来回退历史记录的,就是回到前一个页面,就相当于浏览器上的 ⬅ 按钮
window.history.back()

前提是你要有上一条记录,不然就是一直在这个页面,也不会回退

history.forword

  • hisory.forword是去到下一个历史记录里面,也就是去到下一个页面,就相当于浏览器上的➡ 按钮
window.history.forward()

前提是你要之前有过回退操作,不然的话你现在就是最后一个页面,没有下一个

定时器

  • 在js 里面,有两种定时器,倒计时定时器间隔定时器

倒计时定时器

  • 倒计时多少时间以后执行函数
  • 语法:setTimeout(要执行的函数,多长时间以后执行)
  • 会在你设定的时间以后,执行函数
var timerId = setTimeout(function(){
    console.log('我执行了')
},1000)
console.log(timerId)// 1
1.时间是按照毫秒进行计算的,1000 毫秒就是 1秒钟
2.所以会在页面打开 1 秒钟以后执行函数
3.只执行一次,就不在执行了
4.返回值是,当前这个定时器是页面中的第几个定时器

间隔定时器

  • 每隔多少时间就执行一次函数
  • 语法: setInterval(要执行的函数,间隔多少时间)
var timerId = setInterval(function () {
   console.log('我执行了') 
}, 1000)
1.时间和刚才一样,是按照毫秒进行计算的
2.每间隔 1 秒钟执行一次函数
3.只要不关闭,会一直执行
4.返回值是,当前这个定时器是页面中的第几个定时器

定时器的返回值

  • 设置定时器的时候,他们的返回值是部分setTimeoutsetInterval
  • 只要有一个定时器,那么就是一个数字
var timerId = setTimeout(function(){
    console.log('倒计时定时器')
}, 1000)

var timerId2 = setInterval(function(){
    console.log('间隔定时器')
}, 1000)

console.log(rimerId)//1
console.log(timerId2)//2

关闭定时器

  • 我们刚才提过一个 timerld,是表示这个定时器是页面上的第几个定时器
  • 这个 timerId 就是用来关闭定时器的数字
  • 我们有两个方法来关闭定时器 clearTimeoutclearInterval
var timerId = setTimeout(function () {
  console.log('倒计时定时器')
}, 1000)
clearTimeout(timerId)

关闭以后,定时器就不会在执行

var timerId2 = setInterval(function () {
   console.log('间隔定时器') 
}, 1000)
coearInterval(timerId2)

关闭以后,定时器就不会在执行了

  • 原则上是
    clearTimeout 关闭 setTimeout
    clearInterval 关闭 setInterval
  • 但是其实是可以通用的,他们可以混着使用
var timerId = setTimeout(function () {
  console.log('倒计时定时器')
}, 1000)
// 关闭倒计时定时器
clearInterval(timerId)

var timerId2 = setInterval(function ()}
   console.log('间隔定时器')
}, 1000)
// 关闭间隔定时器 
clearTimeout(timerId2)

DOM(上)

  • DOM (Document Object Model) : 文档对象模型

  • 其实就是操作 html 中的标签的一些能力

  • 我们可以操作哪些内容

    1.获取一个元素
    2.移除一个元素
    3.创建一个元素
    4.向页面里面添加一个元素
    5.给元素绑定一些事件
    6.获取元素的属性
    7.给元素添加一些 css 样式
    8. ...
    
  • DOM 的核心对象就是 docuemnt 对象

  • document 对象是浏览器内置的一个对象,里面存储着专门用来操作元素的各种方法

  • DOM:页面中的标签,我们通过js获取到以后,就把这个对象叫做 DOM 对象

获取一个元素

  • 通过 js 代码来获取页面中的标签
  • 获取到以后我们就可以操作这些标签了

getElementById

  • getElementById 是通过标签的 id 名称来获取标签的
  • 因为在一个页面中 id 是唯一的,所以获取到的就是一个元素
<body> 
  <div id="box"></div> 
   <script> 
     var box = document.getElementById('box')
     console.log(box) // <div></div> 
     </script> 
 </body>
  • 获取到的就是页面中的那个 id 为 box 的 div 标签

getElementsByClassName

  • getElementsByClassName 是用过标签的 class 名称来获取标签的
  • 因为页面中可能有多个元素的 class 名称一样,所以获取到的是一组元素
  • 哪怕你获取的 class 只有一个,那也是获取一组元素,只不过这一组中只有一个 DOM 元素而已
<body> 
  <div calss="box"></div> 
  <script>
   var box = document.getElementsByClassName('box')
   console.log(box) // [<div></div>]
   console.log(box[0]) // <div></div> 
  </script> 
 </body>
  • 获取到的是一组元素,是一个长得和数组一样的数据结构,但是不是数组,是伪数组
  • 这个一组数据也是按照索引排列的,所以我们想要准确的拿到这个 div,需要用索引来获取

getElementsByTagName

  • getElementsByTagName 是用过标签的 标签 名称来获取标签的
  • 因为页面中可能有多个元素的 标签 名称一样,所以获取到的是一组元素
  • 哪怕真的只有一个这个标签名,那么也是获取一组元素,只不过这一组中只有一个 DOM 元素而已
<body> 
  <div></div> 
  <script> 
    var box = document.getElementsByTagName('div')
    console.log(box) // [<div></div>]
    console.log(box[0]) // <div></div> 
  </script> 
 </body>
  • getElementsByClassName 一样,获取到的是一个长得很像数组的元素
  • 必须要用索引才能得到准确的 DOM 元素

querySelector

  • querySelector 是按照选择器的方式来获取元素
  • 也就是说,按照我们写 css 的时候的选择器来获取
  • 这个方法只能获取到一个元素,并且是页面中第一个满足条件的元素
console.log(document.querySelector('div')) // 获取页面中的第一个 div 元素 
console.log(docuemnt.querySelector('.box')) // 获取页面中第一个有 box 类名的元素 
console.log(document.querySelector('#box')) // 获取页面中第一个 id 名为 box 的元 素

querySelectorAll

  • querySelectorAll 是按照选择器的方式来获取元素
  • 这个方法能获取到所有满足条件的元素,以一个伪数组的形式返回
console.log(document.querySelectorAll('div')) // 获取页面中的所有的 div 元素 
console.log(docuemnt.querySelectorAll('.box')) // 获取页面中所有有 box 类名的元素
  • 获取到的是一组数据,也是需要用索引来获取到准确的每一个 DOM 元素

操作属性

  • 通过我们各种获取元素的方式获取到页面中的标签以后
  • 我们可以直接操作 DOM 元素的属性,就能直接把效果展示在页面上

innerHTML

  • 获取元素内部的 HTML 结构
<body>
   <div>
      <p>
        <span>hello</span>
      </p>
    </div>

     <script>
       var div = document.querySelector('div')
       console.log(div.innerHTML)
       /*

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

          */
      </script>
   </body>
  • 设置元素的内容
<body> 
  <div></div> 

    <script> 
      var div = document.querySelector('div') 
      div.innerHTML = '<p>hello</p>' 
    </script> 
 </body>
  • 设置完以后,页面中的 div 元素里面就会嵌套一个 p 元素

innerText

  • 获取元素内部的文本(只能获取到文本内容,获取不到 html 标签)
<body> 
  <div> 
    <p>
       <span>hello</span> 
    </p> 
  </div> 

    <script> 
       var div = document.querySelector('div') 
       console.log(div.innerText) // hello 
   </script> 
</body>
  • 可以设置元素内部的文本
<body> 
   <div></div> 

   <script> 
      var div = document.querySelector('div') 
      div.innerText = '<p>hello</p>' 
    </script>
</body>
  • 设置完毕以后,会把 <p>hello</p> 当作一个文本出现在 div 元素里面,而不会把 p 解析成标签

getAttribute

  • 获取元素的某个属性(包括自定义属性)
<body> 
   <div a="100" class="box"></div> 

    <script> 
       var div = document.querySelector('div') 
       console.log(div.getAttribute('a')) // 100 
       console.log(div.getAttribute('class')) // box 
     </script> 
</body>

setAttribute

  • 给元素设置一个属性(包括自定义属性)
<body> 
   <div></div> 

   <script> 
      var div = document.querySelector('div')  
      div.setAttribute('a', 100) 
      div.setAttribute('class', 'box') 
      console.log(div) // <div a="100" class="box"></div> 
    </script> 
</body>

removeAttribute

  • 直接移除元素的某个属性
<body> 
   <div a="100" class="box"></div> 

    <script> 
       var div = document.querySelector('div') 
       div.removeAttribute('class') 
       console.log(div) // <div a="100"></div> 
    </script> 
</body>

style

  • 专门用来给元素添加 css 样式的
  • 添加的都是行内样式
<body> 
   <div></div> 
     
    <script> 
       var div = document.querySelector('div') 
       div.style.width = "100px"
       div.style.height = "100px" 
       div.style.backgroundColor = "pink" 
       console.log(div) 
       // <div style="width: 100px; height: 100px; background-color: pink;"> 
</div> 
    </script> 
</body>
  • 页面中的 div 就会变成一个宽高都是100,背景颜色是粉色

className

  • 专门用来操作元素的 类名的
<body> 
   <div class="box"></div> 

    <script> 
      var div = document.querySelector('div') 
      console.log(div.className) // box 
    </script> 
</body>
  • 也可以设置元素的类名,不过是全覆盖式的操作
<body> 
   <div class="box"></div> 

   <script> 
     var div = document.querySelector('div') 
     div.className = 'test' 
     console.log(div) // <div class="test"></div> 
   </script> 
 </body>
  • 在设置的时候,不管之前有没有类名,都会全部被设置的值覆盖
这篇关于【JavaScript】学习第十天(BOM、DOM)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!