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

BOM (Browser Object Model 浏览器对象模型)
浏览器内核分为两类：

1.渲染引擎：用来渲染网页内容，将网页的代码转换为用户最终看见的画面

2.脚本引擎：用来执行JS代码（公认最快的是谷歌的V8引擎）

外联:在外部另建一个js文件，通过<script>标签在html文件引入

<script scr:"./xxx.js"></script>
内部：在html文件内部创建<script>标签，在标签范围内直接书写js代码

<script>
console.log("sdfsf")
</script>

嵌入：在html标签内部直接书写js代码

bom中六大对象：

1、浏览器对象 navigator：包含浏览器相关信息

2、窗口对象 window：所有BOM对象的顶层对象

3、屏幕对象 screen：包含显示屏幕相关信息

4、历史对象 history：用户访问页面的历史

5、位置对象 location：当前页面地址

6、文档对象 document：包含整个html文档页面

window对象的属性：

属性    描述
innerHeight    返回窗口的文档显示区的高度。
innerWidth    返回窗口的文档显示区的宽度。
outerHeight    返回窗口的外部高度，包含工具条与滚动条。
outerWidth    返回窗口的外部宽度，包含工具条与滚动条。
window对象的方法：

方法    描述
alert()    显示带有一段消息和一个确认按钮的警告框。
confirm()    显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()    显示可提示用户输入的对话框。
scrollBy(x,y)    按照指定的像素值来滚动内容。
scrollTo(x,y)    把内容滚动到指定的坐标。
open(url,target,features)    打开一个新的浏览器窗口或查找一个已命名的窗口
setInterval()    按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()    在指定的毫秒数后调用函数或计算表达式（延迟性）
le
let timer=setInterval(function(){
             if(i>=0){
                 console.log(i);
             i--;
             }else{
                 clearInterval(timer);
           }
         },1000)
//计时器
screen对象

属性    描述
width、height    返回屏幕的总宽高
avaiWidth、avaiHeight    返回屏幕的可用宽高（减去底部任务栏）
history对象

方法    说明
back()    加载 history 列表中的前一个 URL
forward()    加载 history 列表中的下一个 URL
go()    加载 history 列表中的某个具体页面
location对象的属性

属性    描述
href    返回完整的URL
<!--p加超链接-->
<p id="go">点击</p>
<script>
 go.onclick = function () {
            location.href = 'http://www.baidu.com';
        }
</script>
DOM
DOM(Document Object Model)文档对象模型

dom中每个节点都有三个相关属性

节点类型    node name    node type    node value
元素节点    标签名（大写）    1    null
属性节点    属性名    2    属性值
文本节点    #text    3    文本内容
//DOM0
 
//通过document.body可以拿到body标签
 
//DOM2
 
document.getElementById()
 
<p id='temp'>点击我去百度</p>
    <input type="text">
  //通过id查找
     let result1 = document.getElementById('temp');
     console.log(result1);// <p id='temp'>点击我去百度</p>
document.getElementsByTagName()
 
  <p id='temp'>点击我去百度</p>
    <p class='box'>1</p>
    <p class='box'>2</p>
    <p class='box'>3</p>
<script>
    //通过元素名查找
result1 = document.getElementsByTagName('p');
 console.log(result1); //[p#temp, p.box, p.box, p.box]
</script>
document.getElementsByClassName()
 
  <p class='box'>1</p>
    <p class='box'>2</p>
    <p class='box'>3</p>
<script>
    //通过类名查找
result1 = document.getElementsByClassName('box');
console.log(result1);//[p.box, p.box, p.box]
</script>
document.getElementsByName()
 
  <input name="x" type="radio" value="aaa">
<script>
    //通过name名字查找
result1 = document.getElementsByName('x');
console.log(result1);//[input] （<input name="x" type="radio" value="aaa">）
</script>
注：上面的方法是直接在括号里加引号后写名字

document.querySelector() 括号里写选择器，但只能得到通过该选择器选择的第一个元素

document.querySelectorAll() 括号里写选择器，能够得到所有通过该选择器选择的元素

注：document.querySelector()和document.querySelectorAll()，css中选择器怎么用，小括号中选择器就怎么写

   <div id="box"></div>
    <div></div>
    <input type="text" name="aaa">
    <p class="wrap"></p>
    <p class="wrap"></p>
    <p class="wrap"></p>
​
document.getElementById("id属性的值");
document.getElementsByTagName("标签的名字");
document.getElementsByName("name属性的值");
document.getElementsByTagName("标签的名字");
document.getElementsByClassName("类样式的名字");
document.getElementById("box");
document.getElementsByTagName("div");
document.getElementsByName("name属性的值");
document.getElementsByName("aaa");
document.getElementsByClassName("wrap");
// get -> 获取
// Element -> 元素 
// By ->通过 
// Id -> id的值 
//TagName-> 标签名
// name ->对应的值 
​
通过关系查找元素

元素名.parentElement 父元素

<div id="box2">
        <span id="sp">111</span>
 </div>
<script>
       console.log( sp.parentElement);// 整个div标签
    </script>
元素名.firstElementChild 第一个子元素

 <div id="box1">
        <p id="p1">11</p>
        <p id="p2">22</p>
        <p id="p3">33</p>
    </div>
    <script>
       console.log( box1.firstElementChild );// <p id="p1">11</p>
    </script>
元素名.lastElementChild 最后一个子元素

<div id="box1">
        <p id="p1">11</p>
        <p id="p2">22</p>
        <p id="p3">33</p>
    </div>
    <script>
       console.log( box1.lastElementChild );// <p id="p3">33</p>
    </script>
元素名.children 所有子元素

<div id="box1">
    <p id="p1">11</p>
    <p id="p2">22</p>
    <p id="p3">33</p>
</div>
<script>
    console.log( box1.children );// [p#p1, p#p2, p#p3],全部3个子元素
</script>
元素名.previousElementSibling 前一个兄弟元素

<div id="box1">
    <p id="p1">11</p>
    <p id="p2">22</p>
    <p id="p3">33</p>
</div>
<script>
    console.log( p2.previousElementSibling);//  <p id="p1">11</p>
</script>
元素名.nextElementSibling 后一个兄弟元素

<div id="box1">
    <p id="p1">11</p>
    <p id="p2">22</p>
    <p id="p3">33</p>
</div>
<script>
    console.log( p2.nextElementSibling);//  <p id="p3">33</p>
</script>
添加节点

document.createElement('元素名') 创建新元素

父节点.appendChild(新元素)

将一个新节点作为最后一个子元素添加到指定父节点，类似于数组的push

 <body>
<div id="box">
      <p id="p"></p>
 </div>
     <script>
       let h1 = document.createElement('h1')//创建
        let body=document.body;//获取
        body.appendChild(h1);//添加
     </script>
   <!--添加后：h1会在body结束标签之前-->  
     <h1></h1>
</body>
父节点.InsertBefore(新元素,旧元素)

在父节点的某个已有子节点前再插入一个子节点

 <div id="box">
      <p id="p"></p>
 </div>
<!--添加后：-->
   <div id="box">
        <h1></h1>
      <p id="p"></p>
 </div>
<script>
let p = document.querySelector('p');//获取已有子节点
let h1 = document.createElement('h1')//创建新节点
let temp = document.querySelector('#box')//获取父节点
box.insertBefore(h1, p);//添加
</script>   
删除节点

父元素.removeChild(子元素)

<div id="box2">div1</div>
<div id="box1">
    <p id="p1">1</p>
    <p id="p2">2</p>
</div>
<script>
    box1.removeChild(p1);//删除 <p id="p1">1</p>
</script>
替换节点

父节点.replaceChild(新元素,旧元素)

<div id="box2">div1</div>
<div id="box1">
    <p id="p1">p1</p>
    <p id="p2">p2</p>
</div>
<script>
    let h=document.createElement('h1');
    box1.replaceChild(h,p1);//将<p id="p1">p1</p>替换成<h1></h1>
</script>
文本节点的操作

元素名.innerText：获取时只获取标签里的文本，添加时无法识别标签

元素名.innerHTML：添加时能识别标签，获取时会将获取的元素里面的标签认为是文本

 <div id="box">
        <p id="pEl">
            <span>54321</span>
        </p>
    </div> 
<script>
    //获取标签中的文本
let pEl = document.querySelector('#pEl');
      console.log( pEl.innerText);//54321
      console.log(pEl.innerHTML);// <span>54321</span>
    //将js中的文本添加到标签中
    //元素名.innerText=要添加的内容
    //元素名.innerHTML=要添加的内容
    //如果添加的时候只有纯文本两个都可以，如果添加时有元素，用innerHTML
</script>
操作css
操作属性节点

以前使用createAttribute()搭配 setAttributeNode()为元素添加属性

  <div></div>
    <script>
        let ele=document.querySelector('div');//获取节点
        let createld=document.createAttribute('id');//创建属性节点id
        createld.value='box';//为属性赋值
        ele.setAttributeNode(createld);//为元素设置属性节点 <div id="box"></div>
    </script>
属性操作：

访问元素的属性：elementNode.attribute 访问

特殊的原生属性

以class获取元素是byClassName(),所以操作class的属性也是ele.className,例如ele.className='red'

获取label标签的for属性值，以elementNode.htmlFor获取，ele.htmlFor="username"

自定义属性操作：

标签有自己的属性，称为原生属性，但是有时候对于元素操作，或者想将js中某些数据（信息）放在标签上，就会用到自定义属性

在自定义属性中，只能以data-为前缀来命名，它是一种会被浏览器忽略的自定义属性，属于页面私有，不被外部服务器使用

1、以data-开头

2、只能包含小写字母、数字、连字符、点、冒号或者下划线

<div id="box" data-name="1"></div>
<script>
    box.dataset.name='0'//修改元素自定义属性
    box.dataset.index="2"//设置自定义属性<div data-name="2">
    box.dataset["value"]='3'//方括号访问法
</script>
方法操作属性：

1、eleNode.getAttribute('attr') //获取元素属性后的值

2、eleNode.setAttribute('attr','value') //设置属性值

3、eleNode.removeAttribute('属性名')//删除属性

4、ele.Node.hasAttribute('attr') //查找属性，返回类型为Boolean

操作元素class列表:

元素所有的class都存放

box.classList.add('margin');

console.log(box.classList);//red border margin

ele.classList.add("class1","class2"...) 添加类(方法添加新类，不产生冲突)

ele.classList.remove("class1","class2"..)删除类（如果类不存在，也不报错）

ele.classList.contains("className")是否存在类，返回Boolean

ele.classList.toggle("className")切换类（如果有就取消，没有就增加）

操作内嵌样式：

<div id="box"></div>
   <script>
  box.style.height="100px";
  console.log(box.style.height);//100px
 </script>
//第二种写法
box.style.cssTest=`height:100px;background-color:red;`;
//第三种写法(写法属于对象的键值对)
Object.assign(box.style,{
    width:"100px",
    height:"100px"
});
//获取最终样式
console.log(window.getCompytedStyle(box).height)//100px
​