dom与bom的概念

最新推荐文章于 2023-02-20 01:28:01 发布

noveic

最新推荐文章于 2023-02-20 01:28:01 发布

阅读量171

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_55079946/article/details/118055733

版权

BOM,DOM

1.bom对象概念

BOM:浏览器对象模型（地址栏，历史记录，屏幕，滚动条，关闭）
顶级对象window

         下面5个属于window的子对象
               document  文档对象
               history   历史记录对象
               location  地址栏对象
               screen    屏幕对象
               navigtor  浏览器对象

自定义对象
内置对象 Array String Math
宿主对象

2.window的五大对象

当页面全部加载完成后执行

 window.onload = function () {
            var div = document.getElementById('div')
            console.log(div);
        }

document文档对象
```
1. body  获取body的
```
1. documentElement 获取html的
  console.log(document.body); console.log(document.documentElement); // 获取html的

 screen 屏幕对象
    // console.log(screen.width);
    // console.log(screen.height);

 history 历史记录
    // console.log(history);
    //   方法：back()   后退一个页面
    //   方法：forward()   前进一个页面
    //        history.go(-1)  往后退
    //        history.go(1)  往前进

location地址栏
    //   host: 主机 域名   host: "www.jd.com"
    //   href： 地址栏信息
    //   pathname:路径名
    //   port: 端口
    //   protocol： 协议名 https http  ftp 
    //  方法：reload() 刷新
window.location.reload() ;// 刷新，放在全局位置会一直刷新。f5
window.location.reload(true) ;// 强制刷新，放在全局位置会一直刷新。f5+shift

 不建议放在window全局下

 navigator: 浏览器相关信息
 console.log(navigator);

3.window的相对属性和方法

浏览器的可视宽度：docuemnt.body.clientWidth
window对象
属性：innerHeight（浏览器的高度,带滚动条）
innerWidth（浏览器的宽度,带滚动条）
console.log(window.innerWidth);//
console.log(innerWidth);//window对象可以省去
console.log(document.body.clientWidth);//获取元素的可视宽度

方法：alert() 弹出框 等价于 window.alert()
  confirm()确认框  带返回值，点击确定返回true，点击取消返回false
  prompt()输入框   待返回值  返回你输入的内容
  setInterval(回调函数,毫秒值)设置间歇型定时器
  clearInterval(定时器名称) 清除间歇型定时器
  setTimeout(回调函数,毫秒值) 设置延迟性定时器（超时定时器）
  clearTimeout 清除延迟性定时器（超时定时器）
  onload() : 等页面资源（页面图片，文字，标签）加载完毕后执行
  onscroll():  页面滚动时会触发 
  onresize():  页面窗口变化时触发
     window.onscroll = function(){
     console.log('11');
   }
    window.onresize = function(){
    console.log('11');
  }
   window对象BOM的顶级对象
       console.log(window);
  顶级对象下面有5个子对象
     console.log(window.document); //window可以省去
     console.log(window.history);
     console.log(window.screen);
     console.log(window.navigator);
     console.log(window.location);

    var flag =  window.confirm('确定删除吗？')
    console.log(flag);

     setInterval(回调函数,毫秒值)
     var n = 6;
   初始化一个定时器名称
     var timer = null;
   赋值
     timer = setInterval(function(){
     document.body.innerHTML = n;
      n--;
     if (n==0) {
      clearInterval(timer)
      document.body.innerHTML = '倒计时完毕';
    }
    },500)
    setTimeout(function(){
    document.write('我是超时定时器~')
  },1000)

#### 4.表格的增加
document.createElement('标签名')
    // 1. 获取到tbody
   var oTbody = document.getElementById('tbody')
    // 创建一行
   var oTr = document.createElement('tr')
    // 创建列
    var oTd1 = document.createElement('td')
    var oTd2 = document.createElement('td')
    var oTd3 = document.createElement('td')

    // 往td1，td2，td2中设置内容
    oTd1.innerText = '语文'
    oTd2.innerText = '数学'
    oTd3.innerText = '英语'

    // 把每一列追加放到行中
    oTr.appendChild(oTd1)
    oTr.appendChild(oTd2)
    oTr.appendChild(oTd3)

    // 把行追加到tbody中
    oTbody.appendChild(oTr)

5.操作元素

// 虽然页面只有一个，但是你用的获取的数组方法，所以需要加下标

 // 1. 先获取元素
var oDivs = document.getElementsByTagName('div')[0]
// 2. 设置样式
// oDivs.style.width = getRandomNum()+'px'
// oDivs.style.height = getRandomNum()+'px'
// oDivs.style.backgroundColor = getColor()
// oDivs.style.fontSize = getNum(10,80)+'px'
// oDivs.style.color = "#000"
oDivs.className = 'box'

// 3. 设置内容  innerHTML 支持标签   innerText不支持标签
 oDivs.innerHTML = '<a href="http://www.baidu.com">百度</a>'
oDivs.innerText = '<a href="http://www.baidu.com">百度</a>'

6.创建标签

创建元素 create（创建）
var oDiv = document.createElement(‘div’);

1.1 给div设置样式
oDiv.style.width = ‘100px’
oDiv.style.width = ‘100px’
給div加了以类名box
oDiv.className = ‘box’
```
2. 追加到页面(在body中追加一个div)
   document.body.appendChild(oDiv)
```

7.DOM

DOM：文档对象模型
一句话理解：先获取页面的元素，增删改查，改变样式等操作。

 1. 获取元素的方法：4种+2种   Element（标签）
 1.1 docuemnt.getElementById() 通过id名查找元素  只能获取1个
 1.2 document.getElementsByClassName()  通过类名查找元素
获取的是一组数据。类似于数组，但并不是数组,不能使用数组中的方法
   var oItems       =document.getElementsByClassName('item')
        // console.log(oItems);
        // console.log(oItems[0]);
        // console.log(oItems.length);
1.3 document.getElementsByTagName()  通过标签名来获取元素
获取的是一组数据。类似于数组，但并不是数组,不能使用数组中的方法
        var oDivs =    document.getElementsByTagName('div')
   console.log(oDivs[1]);// 获取的是页面的第二个div
1.4 document.getElementsByName()  通过表单中的name属性来获取元素，获取的是多个
   var oIpts = document.getElementsByName('abs');
   console.log(oIpts[0]);

8.dom元素的删除

为了能够确定删除的元素，需要在点击函数的参数位置写一个参数

onclick="dele(this)"   this指代自己
   function dele(obj){
        // obj.remove()
        // obj.parentNode  找到this的父元素
        // obj.parentNode.remove(); // 删除的是p标签
   obj.parentNode.parentNode.remove(); // 删除的是div标签
    }
    ```