DOM与BOM的介绍

文章目录

DOM

1. 获取元素
2. 事件基础
3. 操作元素
4. 节点操作
5. 事件高级
6. DOM事件流
7. 事件对象
8. 事件委托

BOM

1. BOM概述
2. window对象常见事件
3. 定时器
4. JS 执行队列
5. location 对象
6. navigator 对象
7. history 对象

一、DOM（文档对象模型）

1、基础介绍：

文档对象模型，是W3C推荐处理可扩展标记语言的标准接口，通过接口可以改变网页的内容、结构和样式

2、获取元素

1、利用DOM获取元素
2、利用节点层次关系获取元素

1：利用DOM获取元素

1. 根据ID获取元素：

格式：document.getElementById （'参数'）

<div id="wu">123</div>
<script>
    var time = document.getElementById('wu');
</script>

注意：

1. script标签在body的下面
2. id参数是大小写敏感的字符串
3. 返回值是一个元素对象
4. console.dir打印可查看其属性和方法

2、 根据标签名获取元素：

document.getELementsByTagName （'参数'）;

方式一：
<div>123</div>
    <script>
        var time = document.getElementsByTagName('li');
        console.log(time);
    </script> 

注意：

1. 返回对象是获取过来的元素对象集合，以伪数组的方式存储
2. 想要一次打印可以遍历伪数组
3. 若页面只有一个元素，也返回伪数组，若没有，返回undefined；

方式二：
    <ul>
        <li>234</li>
        <li>473</li>
    </ul>
    <script>
        var st = document.getElementsByTagName('ul')
        var time = st[0].getElementsByTagName('li');
        console.log(time);
    </script>  
也可以给父级元素设定一个ID，将st[0]换为id名 

注意：

1. 获取某个父级元素内部所制定标签名的子元素，其父元素必须是（指明哪个对象的）的单个对象。

3、新增获取元素的方式：

1、document.getELementsByClassName（'参数'）;
2、document.querySelector（'参数'）;
3、document.querySelectorAll （'元素选择器'）;

<ul>
        <li class="er">234</li>
        <li>473</li>
    </ul>
    <script>
        //var time = document.getElementsByClassName('er')
        var time =  document.querySelector('.er')
        console.log(time);
    </script>  

4、获取特殊元素
获取body元素 document.body;
获取HTML元素 document。getElement;

3、事件基础

1、事件是可以被JS侦测的行为 触发—响应机制
2、事件的组成：

1、事件源：事件被触发的对象（谁被触发）
2、事件类型：如何触发（什么事件）
3、事件处理程序：通过函数赋值方式

3、事件类型：

onclick：点击鼠标左键触发
onmouseover：鼠标经过触发
onmouseout：鼠标离开触发
onfocus：获得光标
onblur：市区光标
onmouseup：鼠标移动
onmousedown：鼠标按下
contextmenu + 阻止默认行为：可禁用右键菜单
selectStart：

3、操作元素

1、执行事件的步骤：

1. 获取事件源
2. 注册事件
3. 添加事件处理程序

2、操作元素

1. 利用DOM修改元素中的内容

1、element.innerText
2、element.innerHTML

注意区别：

1. innerText：不识别其中的标签，标签不直接显示，去空格，换行
2. innerHTML：这两个值均可读写。可获取其中的标签

    <button>变换</button>
    <div>显示某个时间</div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.onclick = function() {
            div.innerText='2019-6-6';
        }
    </script>  

2. 表单属性的操作：
   属性包括：type，checked，seleced，disableed，value

    <button>变换</button>
   <input type="text" >
    <script>
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        btn.onclick = function() {
            input.value='2019-6-6';
            btn.disabled=true;
        }
    </script> 

3. 样式属性操作

1、element.style（行内样式操作）;
2、element.className = '样式名';

<style>
.te{
   width:50px;
    height: 30px;
    background-color: red;
}
.change{
    background-color: pink;
}
</style>
    <button>变换</button>
   <div class="te">1354</div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.onclick = function() {
           div.style.width='100px';
           div.className='change te';
        }
    </script> 

注意：

1. 样式命名法采用驼峰命名法
2. 行内样式只要修改样式会在行内样式中生成，CSS位权较高
3. 类样式修改适合修改样式较多的
4. 直接用className会直接覆盖原先类名
5. 若要保留原样式，可用 className=’原样式名 现样式名‘；

3、获取元素的属性值

1. 获取属性方式

1、element.属性名
2：element.getAttribute（'属性名'）

2. 设置自定义属性方式

element.属性名 = '值';
element.setAttribute（'属性名','值'）

3. 移除自定义属性值

element .removeAttribute（'属性名'）

4、节点操作

1、定义：利用父子兄弟节点关系来获取元素逻辑性较强，更简洁

2、用节点获取元素

1. 父级节点：

获取父级节点：node.parentNode  

    <button>变换</button>
   <ul>
       <li>235</li>
       <li>2367</li>
   </ul>
    <script>
        var btn = document.querySelector('button');
        var li = document.querySelector('li');
        console.log(li.parentNode);
    </script>  

注意：

1. 获取的是离元素最近的父级节点，找不到返回为空

2. 子级节点：

parentNode.childNodes 
parentNode.children : 获取所有子元素节点
parentNode.firstChild : 获取第一个子节点
parentNode.lastChild ： 获取最后一个子节点（包括文本和元素节点）
parentNode.firstElementChild : 获取第一个元素节点
parentNode.lastElementChild : 获取最后的元素节点
父级元素.children[0] : 解决兼容性获取第一个子元素

<ul>
        <li>246</li>
        <li>4587</li>
<ul>
    <script>
    var ul = document.querySelector ('ul');
    console.log( ul.children[0])  //获取子元素节点
    </script>

3.、创建节点：document.creatElement (‘tagName’)

1、方法创建由tagName指定HTML元素，因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们称动态创建节点

2、步骤：

1. 创建元素节点

var li = document.createElement ('li'）；

2. 添加节点：（节点放置位置）

在后面追加元素:
（父级节点）node.appendchild (child) （添加节点）
添加在指定父节点的子节点前:
node.insertBefore (child，指定元素)

<ul></ul>
    <script>
        var li = document.createElement('li');
        var ul = document.getElementsByTagName('ul');
        ul.appendchild(li);
        ul.insertBefore(li,ul.children[0]);
    </script> 

4、 删除节点

1. node.removechild （child）
   删除父节点中的子节点
2. 方式
   获取ul元素，再删除元素

 1、ul.removechild(li);
 2、ul.removechild(li,ul.children[0]);

5、 复制节点
node.cloneNode（）；
先获取元素，再复制，再放置位置

6、三种动态创建元素

1. document.write ()
   特点：直接将内容写入页面，但当文档执行完毕再调用，会导致页面重绘
2. innerHTML
3. document.createElement(‘标签名’)

5、事件高级

1. 注册事件：（给元素添加事件）

方式：
1、传统注册方式：
Element.onclick = function(){}
2、方法监听注册方式：
eventTarget.addEventListenner(type,listenner[ , useCapture)]

type : 事件类型字符串，如：click无on；
listener : 事件处理函数，调用函数
useCapture : 可选参数，默认值为false

    <button>提交</button>
   <ul>
       <li>1524</li>
       <li>25655</li>
   </ul>
    <script>
        var btn = document.querySelector('button');
        var li = document.querySelector('li');
        var ul = document.getElementsByTagName('ul');
        btn.addEventListener('click',function(){
            li.innerHTML='好了';
        })
    </script> 

2. 删除事件（解绑时间）

方式：
1、传统注册方式：
ElementTarget.onclick = function(){}
2、方法监听注册方式：
eventTarget.removeEventListenner(type,listenner[ , useCapture)]

6、DOM事件流

1. 定义：
   事件流描述的是从页面接收时间的顺序，事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流
2. 阶段分为：
   1、捕获阶段
   2、当前目标阶段
   3、冒泡阶段

注意：JS代码执行只能执行捕获或冒泡中的一个onclick和attachEvent智能得到冒泡阶段第3个阶段为true则为捕获阶段，反之，为冒泡阶段

7、事件对象

3. 方式

1、传统的方式：
div onclick = function（event）{}
2、监听：
div addEventListener ('click‘,function（event/e））；

4. 事件对象常见的属性与方法
   属性：

1、event.target:
返回触发（点击）事件对象
2、event。type：
返回绑定事件对象
3、returnValue

方法：

1、event.preventfault （）
阻止默认事件（如链接不跳转，提交不提交）
2、event.stopPropagation （）

 <button>提交</button>
   <ul>
       <li>1524</li>
       <li>25655</li>
       <a href="https://www.baidu.com/?tn=88093251_18_hao_pg">百度</a>
   </ul>
    <script>
        var btn = document.querySelector('button');
        var li = document.querySelector('li');
        var ul = document.getElementsByTagName('ul');
        var a = document.querySelector('a');
        btn.addEventListener('click',function(event){
            li.innerHTML='好了';
        })
        a.addEventListener('click',function(event){
            event.preventDefault();
        })
    </script>  

8 、事件委托

1. 原理：
   不是每个子节点单独设置监听器，而是事件监听器设置在父节点上，再利用冒泡印象子节点

2. 鼠标事件对象：MouseEvent

e.clientX : 
返回鼠标在可视区相对浏览器X的位置
e.cilentY:
e.pageX:
相对于页面文档的距离

3. 常用键盘触发：
   onkeyup : 键盘谈起来触发
   onkeydwn : 按下键盘触发
   onkeypress:按下键盘触发（不能识别功能键）

BOM

1、BOM概述：

1：定义：
独立于内容于浏览器串口进行交互，核心对象window
2：BOM的构成：

1. window是浏览器顶级对象
2. 他是JS访问浏览器的窗口
3. 全局作用域种的变量，函数变成window对象属性和方法

2、window对象常见事件

1：窗口加载事件：(window.onload）

注意：

1. 有了window、onload可以减肥script卸载页面元素之前
2. window.onload传统注册方式只能注册一次
3. 用addEventListener没有限制

2：调查窗口事件
1、window.resize = function () { }
2、window.addEventListener（‘resize’,function(){
})

3、定时器

1：作用
用于设置一个定时器，该定时器到期后执行调用函数
2：方法

1、setTimeOut（调用函数，[延迟毫秒数]）
2、setInterVal（调用函数，[延迟毫秒数]）

示例：

<script>
setTimeout(function(){
            console.log(2);
        },10000);
</script>

注意：

1. 延迟时间为毫秒
2. 调用函数可直接写函数，还可直接写函数名，或 ‘函数名（）’
3. 页面中可能有很多定时器，可给其加名字

4、JS执行队列

1、定义
js特点是单线程，同一事件只能做一件事
2、同步与异步

1. 同步：亲一个任务结束后再执行后一个任务，程序执行顺序与任务的排列顺序是一致的，同步的
2. 同意事件可处理其他事情

3、同步任务与异步任务

1. 同步任务：同步任务都在主线程上执行，形成执行栈
2. 异步任务：
   1：普通事件：如：click，resize；
   2：资源加载：load，error；
   3：定时器：setInterval，setTimeOut；

4、执行机制
1、先执行执行栈中的同步任务；
2、异步任务（回调函数）放入任务队列中
3、下一个同步任务
4、一旦同步任务执行完，在任务队列种的异步任务放入执行栈，再执行；

5、location 对象

1、定义：
window的location属性适用于设置窗口的ul,并可以解析URL，因为该属性返回一个对象
2、URL
URL统一资源定位符：互联网标准资源地址
3、location属性

1. location.href ： 获取或设置URL
2. location.search：返回参数

4、方法：
3. location.assign（‘地址’）
可实现后退
4. location.replace（‘地址’)
5. location.reload （true）
重新加载页面,true强制刷新

6、navigator 对象

属性：userAgent：该属性可返回由用户机发送服务器的user-agent头部的值

7、history对象

1、定义：
与浏览器的历史记录进行交互，该对象包含用户（在该浏览器窗口中）访问过的URL
2、对象方法：
back（）：可退功能
forward（）：前进功能