Bom和Dom

bom

bom:浏览器对象模型

核心：window对象

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

操作的内容：获取一些浏览器的相关信息（窗口的大小）

操作浏览器进行页面跳转

获取当前浏览器地址栏得到信息

操作浏览器的滚动条

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

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

（1）获取浏览器窗口的尺寸

innerHeight 和 innerWidth分别是用来获取浏览器窗口的宽度和高度（包含滚动条的）

（2）浏览器的弹出框

alert是浏览器弹出的一个提示框

confirm是在浏览器弹出一个询问框，有一个询问信息和两个按钮，确定时为true，取消就是false

prompt是在浏览器弹出一个输入框，有一个输入框和两个按钮，取消是null，确定是你输入的内容

（3）浏览器的地址信息

location：专门用来存储浏览器的地址栏内的信息

location.href:

location.reload

(4) 浏览器的历史记录

history：专门用来存储历史记录信息的

history.back

history.forword

dom

dom:文档对象类型

核心：就是document对象

操作的内容：获取一个元素

移除一个元素

创建一个元素

向页面里面添加一个元素

给元素绑定一些事件

获取元素的属性

给元素添加一些css样式

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

DOM： 页面中的标签，我们通过 js 获取到以后，就把这个对象叫做 DOM 对象###获取一个元素

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.操作页面元素

   2.1 操作元素的内容
      支持标签
        获取元素的内容：对象（获取的元素）.innerHTML
        设置元素的内容：对象（获取的元素）.innerHTML = 
​
      不支持标签
        获取元素的内容：对象（获取的元素）.innerText
        设置元素的内容：对象（获取的元素）.innerText = 
​
      针对于表单控件：
        获取元素的内容：对象（获取的元素）.value
        设置元素的内容：对象（获取的元素）.value =
​
      不常用：<div>张三</div>
        获取元素的内容：对象（获取的元素）.outerHTML   标签的内容+标签本身（是一个字符串形式） <div>张三</div>
        设置元素的内容：对象（获取的元素）.outerHTML = 
​
    2.2 操作元素的样式
        
        设置样式： 对象（获取的元素）.style.属性名=属性值       获取样式：对象（获取的元素）.style.属性名 （没啥用）
                  
                  对象（获取的元素）.className = '类名'
​
                  对象（获取的元素）.classList.add('类名')
                  对象（获取的元素）.classList.remove('类名')
    
    2.3 操作元素的属性：
        <div id='' xx='' class='' aa=''></div>
        <img src='' y=''>
​
        属性分为固有属性（元素自身携带的属性）和自定义属性（aa，xx，y）
​
        自定义属性的设置和修改   <div></div>
        设置自定义属性：
           对象（获取的元素）.setAttribute('属性名','属性值')
        获取
           对象（获取的元素）.getAttribute('属性名')
        删除
           对象（获取的元素）.removeAttribute('属性名')

      <div index="1"  id="box" class='box'></div>
​
      <img src=''>
      <input type='text' value='neir'>
​
        设置(修改)固有属性：
            对象（获取的元素）.属性名 = '属性值'  oImg.src = '图片地址'
        获取固有属性：
            对象（获取的元素）.属性名    
            oImg.src
            oIpt.value

修改属性

元素.innerHTML = "xx"

设置内容

元素.innerHTML

2. 普通元素 获取内容

元素.value = ""

设置内容

元素.value

1. 表单控件 获取内容

修改内容

oDiv.classList.toggle('类名'): 切换类名

oDiv.classList.remove('类名')

oDiv.classList.add('类名')

追加类名

oDiv.className = "类名"

className法把样式都添加类名

oDiv.style.width = "值"

oDiv.style.fontSize = "值"

oDiv.style.backgroundColor = "值"

oDiv.style.属性名= "属性值"

style法把样式都添加到行内了

3.修改样式