BOM和DOM

最新推荐文章于 2022-05-06 10:28:12 发布

APPTX4869

最新推荐文章于 2022-05-06 10:28:12 发布

阅读量506

点赞数

文章标签： html javascript tv

本文链接：https://blog.csdn.net/APPTX4869/article/details/121855131

版权

BOM:

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

BOM：

核心对象，顶级对象叫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(函数,毫秒) 关闭超时定时

// var flag = window.confirm('亲，你确定要删除吗？')

    // console.log(flag);

    // if (flag == true) {

    //     // 执行删除操作

    // }

按钮打开和关闭的演示案例


<body>
    <button id="open">打开</button>

    <button id="close">关闭</button>
</body>




<script>

    var oPen = document.getElementById('open')

    var oClose = document.getElementById('close')



    oPen.onclick = function () {

        window.open("https://www.runoob.com");
    }

    oClose.onclick = function () {

        window.close()
    }

</script>

点击名字每隔10秒显示一个人名

点击开始： 每隔10s显示一个人名
       1. 点击按钮，显示一个人名到输入
           oStart.onclick = function(){
                oIpt.value = getName();
           }

        2. 点击每隔1s显示一个人名
           oStart.onclick = function(){
                setInterval(function(){
                    oIpt.value = getName();//每隔1s执行一次oIpt.value = getName()
                },1000)
           }
        3. 为了能够清除定时器，给定时器取一个名字叫timer
             oStart.onclick = function(){
                timer = setInterval(function(){
                    oIpt.value = getName();
                },1000)
           }
        4. 多次点击开始，点停止的时候有bug，在每次开启之前，清除上一次的定时器
         oStart.onclick = function () {
            clearInterval(timer)
            // 开启定时器
            timer =  setInterval(function(){
                oIpt.value = getName();
            },100)
        }
      点击结束：停止点名
   */
    var oIpt = document.getElementById('txt')
    var oStart = document.getElementById('start')
    var oStop = document.getElementById('stop')
    var oDiv = document.getElementById('div')

    var timer = null;
    oStart.onclick = function () {
        clearInterval(timer)
        // 开启定时器
       timer =  setInterval(function(){
            oIpt.value = getName();
        },100)
    }

    oStop.onclick = function(){
         clearInterval(timer)
    }

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

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

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

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

// 在history中演示

// window的子对象：localtion对象

// localtion.reload(): 刷新

// localtion.href = "网址" 跳转页面


<body>

    <button id="btn">点我刷新</button>

    <button id="btn1">点我跳转</button>

</body>






<script>
 var oBtn = document.getElementById('btn')
    var oBtn1 = document.getElementById('btn1')

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

DOM：

文档对象模型：document object model

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

1. 获取页面元素

1.1 通过id获取元素 document.getElementById("id名")；获取的是唯一一个

1.2 通过标签名来获取元素 document.getElementsByTagName('标签名p')；//获取所有标签名为p的元素（伪数组形式。不是数组，但是可以遍历）

// var oArr = document.getElementsByTagName('p')
// // console.log(oArr);
// for(var i = 0;i<oArr.length;i++){
//     console.log(oArr[i]);
// }

1.3 通过类名来获取元素 document.getElementsByClassName('类名')；//获取所有类名的元素（伪数组形式。不是数组，但是可以遍历）

1.4 通过类名来获取元素 document.getElementsByName('name值')；//获取所有类名的元素（伪数组形式。不是数组，但是可以遍历）

1.5 通过选择器获取 document.querySelector('选择器')；//只获取第一个

document.querySelectorAll('选择器')；//只获取所有的

选择器: 标签，id，类，属性

var oP = document.querySelectorAll('p')

console.log(oP);

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('类名'): 切换类名

修改内容

1. 表单控件获取内容

元素.value

设置内容

元素.value = ""

2. 普通元素获取内容

元素.innerHTML

设置内容

元素.innerHTML = "xx"

APPTX4869

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BOM和DOM

BOM:browser object model 浏览器对象模型，提供了一系列操作浏览器的方法BOM：核心对象，顶级对象叫window 对象的方法： window. 可以省去 window.alert('弹出框') window.prompt('输入框') 返回值: 输入的内容 window.confirm('输入框')：返回值：点击确定返回true，点击取消，返回false...
复制链接

扫一扫