day10:(DOM、BOM的概念和作用)

最新推荐文章于 2022-12-09 10:33:10 发布

卢卢啊

最新推荐文章于 2022-12-09 10:33:10 发布

阅读量105

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/lst1164515273/article/details/121910238

版权

本文介绍了浏览器对象模型(BOM)的核心对象window及其方法，如alert、prompt、confirm、history和location等。同时，详细阐述了文档对象模型(DOM)的元素获取、样式修改和内容操作。通过DOM，可以便捷地操控网页元素，实现动态效果和交互功能。

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

day10：（DOM、BOM的概念和作用）

BOM:

**概念：**browser object model 浏览器对象模型，提供了一系列操作浏览器的方法

**核心对象：**顶级对象叫window

对象的方法：

     window. 可以省去
     window.alert('弹出框')
     window.prompt('输入框')
        返回值: 输入的内容
     window.confirm('输入框')：
        返回值：点击确定返回true， 点击取消，返回false
    
     window.open("网址"): 一般会点击按钮，打开网址
     window.close()

    var 定时器的名字 = window.setInterval(函数,毫秒)   开启间隙性定时器
    window.clearInterval(定时器的名字)                关闭间隙性定时器
    var timer = setInterval(function(){},1000)
    window.clearInterval(timer)

    // 过了几秒后弹出一次
    超时定时器：  window.setTimeOut(函数,毫秒)     开启超时定时器
    超时定时器：  window.clearTimeOut(函数,毫秒)   关闭超时定时

BOM的history

  window的子对象，浏览器历史记录的一个对象

     history.go(1)/history.forward(): 前进一个页面

     history.go(-1)/history.back(): 后退一个页面

     history.go(0): 刷新当前页面

     在history中演示

BOM的location

 window的子对象：localtion对象
 localtion.reload(): 刷新
 localtion.href = "网址"  跳转页面
例如：
    var oBtn = document.getElementById('btn')
    var oBtn1 = document.getElementById('btn1')

    oBtn.onclick = function () {
        location.reload();
    }
    oBtn1.onclick = function(){
        location.href = "http://www.baidu.com"
    }

DOM：

文档对象模型：document object model

DOM提供了一套操作文档（页面）的api

1.获取页面元素：

     1.1 通过id获取元素 document.getElementById("id名")；获取的是唯一一个
     1.2 通过标签名来获取元素 document.getElementsByTagName('标签名p')；//获取所有标签名为p的元素（伪数组形式。不是数组，但是可以遍历）
     1.3 通过类名来获取元素 document.getElementsByClassName('类名')；//获取所有类名的元素（伪数组形式。不是数组，但是可以遍历）
     1.4 通过类名来获取元素 document.getElementsByName('name值')；//获取所有类名的元素（伪数组形式。不是数组，但是可以遍历）
  
     1.5 通过选择器获取 document.querySelector('选择器')；//只获取第一个
                      document.querySelectorAll('选择器')；//获取所有的
                      
                      选择器: 标签，id，类，属性

     1.6 获取body     document.body
         获取html     document.documentElement
         获取title    document.title
         获取head     document.head

2.修改样式：

style法把样式都添加到行内了
         oDiv.style.属性名= "属性值"
         oDiv.style.backgroundColor = "值"
         oDiv.style.fontSize = "值"
         oDiv.style.width = "值"
         className法把样式都添加类名
         oDiv.className = "类名"

       追加类名
         oDiv.classList.add('类名')
         oDiv.classList.remove('类名')
         oDiv.classList.toggle('类名'): 切换类名

3 修改内容

1. 表单控件  获取内容 
           元素.value
           设置内容
           元素.value = ""
2. 普通元素  获取内容
           元素.innerHTML
           设置内容
           元素.innerHTML = "xx"