Web API

web api是js的应用，大量使用js基础语法交互效果

API是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件得以访问一组程序的能力，而不需要访问源码，或理解内部工作机制的细节

简单来说：API是给程序员提供的一种工具，以便能够更轻松实现想要实现的功能

Web API是浏览器提供的一套操作浏览器功能的API（ＢＯＭ和ＤＯＭ），主要正对浏览器提供接口，ｗｅｂ　ａｐｉ很多都是方法（函数）

DOM

文档对象模型（Document Object Model）是W３C组织推荐的处理可扩展语言（html或xml）的标志编程接口

W3C已近定义了一些列的DOM接口，通过这些接口可以改变网页的内容，结构和样式

  • 文档：一个页面就是一个文档，DOM使用document表示
  • 元素：页面的所有标签都是元素，DOM中使用element表示
  • 节点：网页中所有内容都是节点（标签 属性 文本 注释等），DOM中使用node表示

注意：以上都是对象

获取元素接口

document.getEelementById(id)

<div id="title">woenig</div>
    <script>
        var names = document.getElementById('title');
        console.log(names);
        console.dir(names);
    </script>

注意

  1. 因为我们文档页面从上玩下加载，所以先得有标签，所以我们scripts写道标签下面
  2. 参数是大小写敏感的字符串，所以要加引号
  3. 返回的是一个元素对象
  4. 驼峰命名法
  5. console.dir 打印返回的元素对象，更好的查看里面的属性和方法

document.getEelementsTagName(TagName)

//获取标签元素
	<ul>
        <li>ifhaui</li>
        <li>ifhaui</li>
        <li>ifhaui</li>
    </ul>
    
    <script>
        var list = document.getElementsByTagName('li');
        console.log(list);
        for(var i = 0; i < list.length; i++) {
            console.log(list[i]);
        }
    </script>

注意

  1. 返回的是一个获取元素对象的集合，以伪元素数组的形式存储的
  2. 我们想要依次打印里面的元素对象我们可以用遍历的方式
  3. 如果里面只有一个或则没有TagName，返回的还是伪数组的形式

element.getEelementsTagName(TagName)

//element 可以填写的是父元素	
	<ul>
        <li>ifhaui</li>
        <li>ifhaui</li>
        <li>ifhaui</li>
    </ul>
    <ol>
        <li>idjsao</li>
        <li>idjsao</li>
        <li>idjsao</li>
        <li>idjsao</li>
        <li>idjsao</li>
    </ol>
    
    <script>
        var ol = document.getElementsByTagName('ol');
// 由于ol返回的是一个伪数组的形式，不能直接ol.getEel...的形式写
        var list = ol[0].getElementsByTagName('li');
        for(var i = 0; i < list.length; i++) {
            console.log(list[i]);
        }
        
    </script>


// id 指明唯一的父级元素对象
	<ul>
        <li>ifhaui</li>
        <li>ifhaui</li>
        <li>ifhaui</li>
    </ul>
    <ol id="ol">
        <li>idjsao</li>
        <li>idjsao</li>
        <li>idjsao</li>
        <li>idjsao</li>
        <li>idjsao</li>
    </ol>
    
    <script>
        var ol = document.getElementById('ol');
        var list = ol.getElementsByTagName('li');
        for(var i = 0; i < list.length; i++) {
            console.log(list[i]);
        }
        
    </script>

注意：父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己

H5新增的方法获取

  1. document.getElementByClassName('类名')：返回元素对象集合

    <ul>
        <li class="tool">ifhaui</li>
        <li>ifhaui</li>
        <li>ifhaui</li>
    </ul>
    <ol id="ol">
        <li class="tool">idjsao</li>
        <li>idjsao</li>
        <li>idjsao</li>
        <li>idjsao</li>
        <li>idjsao</li>
    </ol>
    
    <script>
        var li = document.getElementsByClassName('tool');	//	注意这里的类名，返回的是一个元素对象集合，类名不加.
        console.log(li);
        console.log(li[0]);
        
    </script>

  2. document.querySelector('选择器'):根据指定选择器返回第一个元素对象

    <ul>
        <li class="tool">ifhaui</li>
        <li>ifhaui</li>
        <li>ifhaui</li>
    </ul>
    <ol id="ol">
        <li class="tool">idjsao</li>
        <li>idjsao</li>
        <li>idjsao</li>
        <li>idjsao</li>
        <li>idjsao</li>
    </ol>
    
    <script>
        var li = document.querySelector('.tool');	//返回第一个类的元素，选择器里面是要加符号 .类名
        console.log(li);
    </script>

  3. document.querySelectorAll('选择器'):根据指定选择器返回，返回的是一个元素数组

    	<ul>
        <li class="tool">ifhaui</li>
        <li>ifhaui</li>
        <li>ifhaui</li>
    </ul>
    <ol id="ol">
        <li class="tool">idjsao</li>
        <li>idjsao</li>
        <li>idjsao</li>
        <li>idjsao</li>
        <li>idjsao</li>
    </ol>
    
    <script>
        var li = document.querySelectorAll('.tool');
        console.log(li);
	    console.dir(li);	//获取元素对象的属性和方法
    </script>

document.body:获取body的元素对象

document.documentElement:获取html元素对象

		// 获取body元素对象
        var bodyEle = document.body;
        console.log(bodyEle);
        // 获取HTML元素对象
        var htmlEle = document.documentElement;
        console.log(htmlEle);

事件基础

事件分为三部分组成，事件源，事件类型，事件处理程序，我们也称为事件三要素

事件源：事件被触发的条件

  • onclick:鼠标点击左键
  • onmouseover:鼠标移动进入元素的事件
  • onmouseout:鼠标离开
  • onfocus:获得鼠标焦点
  • onblur:失去鼠标焦点
  • onmousemove:鼠标在元素里面的移动的
  • onmouseup:鼠标弹起
  • onmousedown:鼠标按下
  • selectstart:禁止使用文字
  • contextmenu:禁止使用菜单

键盘事件

  • onkeyup:按键松开的时候触发
  • onkeydown:按下的时候触发
  • onkeypress:按下的时候触发 不能识别功能键，比如alt ctrl

注意：keydown和keypress在文本框里面的特点，事件触发的时候，文字还没有落入文本框中

当按下键盘时三个键盘事件的执行顺序:onkeydown onkeypress onkeyup

注意：使用addEventListener()不加on

事件类型：事件通过什么事件触发 比如鼠标点击（onclick）

事件处理程序：通过函数赋值的方式完成

	<button id="btn">唐伯虎</button>
    <script>
        var btn = document.getElementById('btn');
        btn.onclick = function() {
            alert('点秋香');
        }
    </script>

事件高级

注册事件

给元素添加事件，称为注册事件或绑定事件

有传统方式和方法监听方式

  • 传统方式注册

    1. 利用on开头的事件onclick
    2. 注册事件的唯一性，同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数会覆盖前面的处理函数

  • 方法监听方式

    eventTarget.addEventListener(type,listener,useCapture)

    eventTarget.addEventListener()方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，将会执行事件处理函数

    • type:事件类型，字符串格式，这里不要带on
    • listener:事件处理函数，事件发生时，会带哦用该监听函数
    • useCapture：可选参数，时一个布尔值，默认false

    注意

    1. w3c标志推荐方式
    2. addEventListener()是一个方法
    3. ie9之前的支持，可使用attachEvent（了解）ie10之后都不支持
    4. 特点：同一个元素同一个事件可以注册多个监听器
    5. 按照注册顺序依次执行
 var listButton = document.querySelectorAll('button');
        listButton[0].onclick = function() {
            alert('one')
        }
        listButton[1].addEventListener('click',function() {
            alert('two')
        })
删除事件

传统方式

eventTarget.onclick = null;

方法监听注册方式

eventTarget.removeEventListener(type,listener,useCapture)

<button>one</button>
    <button>two</button>
    <script>
       var listButton = document.querySelectorAll('button');
       function two() {
           alert('two');
           listButton[1].removeEventListener('click',two);
       }
       listButton[1].addEventListener('click',two);
       listButton[0].onclick = function() {
           alert('one');
           listButton[0].onclick = null;
       }
        
    </script>

注意：不能写写成匿名函数的形式

eventTarget.deattackEvent(type,listener,useCapture)

DOM事件流

事件流描述从页面中接受事件的顺序，事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程就是DOM事件流

  • 捕获阶段
  • 当前目标阶段
  • 冒泡阶段

注意

  1. js代码只能执行捕获或冒泡其中的一个阶段
  2. onclick和attachEvent(ie) 只能得到冒泡阶段
  3. 捕获阶段，如果addEventListener 第三个参数是true 那么则处于捕获阶段
事件对象

event对象代表事件的状态，比如键盘按键的状态，鼠标的位置，鼠标按钮的状态

简单理解就是跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event,它有很多属性和方法

element.onclick = function(event) {
	event = event || window.event;
	console.log(event);
}
  1. event 就是一个事件对象，写道我们的函数小括号里面，当形参看待
  2. 事件对象只有了解事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
  3. 事件对象是我们事件的一系列相关数据的集合
  4. 事件我们可以自己命名，比如event,evt等
  5. 事件对象也有兼容性问题 ie678通过window.event

事件对象属性方法

e.target返回的是触发事件的对象，this返回的是绑定事件的对象

target属性ie有兼容性问题,用srcElment(了解)

div onclick = function(event) {
    event = event || window.event;
    var target = event.target || event.srcElement;
}

this有个相似的属性currentTarget ie678不认识

阻止默认事件
  • event.preventDefoult()
  • event.returnValue：ie678使用
  • 直接返回return false 但此方法如果后面还有代码，则无法执行
阻止冒泡

事件冒泡：开始时由具体的元素接收，然后逐级向上传播到DOM最高层节点

  • 利用事件对象里面的stopPropagation()方法
  • 非标准写法：ie6-8利用事件函数cancelBubble属性
事件委托

事件委托也称为事件代理，在jQuery里面称为事件委派

事件委派原理：不是每个子节点单独设置事件，而是事件监听器在其父节点上，然后利用冒泡原理影响设置每个子节点

作用：只进行了一次dom操作，提高了程序的性能

鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是使用鼠标事件MouseEvent和键盘对象KeyboardEvent

  • event.clientX：返回鼠标相对于浏览器可视化的X坐标
  • event.clientY：返回鼠标相对于浏览器可视化的Y坐标
  • e.pageX：返回鼠标相对于文档页面的X坐标 ie9+支持
  • e.pageY：返回鼠标相对于文档页面的Y坐标 ie9+支持
  • e.screenX：返回鼠标相对于文档页面电脑屏幕的X坐标
  • e.screenY：返回鼠标相对于文档页面电脑屏幕的Y坐标
 <!-- 图片跟着鼠标移动 -->
    <style>
        img {
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
    <img src="../theday11/images/下载.png" alt="">
    <script>
        var img = document.querySelector('img');
        img.style.left = document.clientX;
        img.style.top = document.clientY;
        document.addEventListener('mousemove',function(event) {
            img.style.left = event.pageX + 'px';
            img.style.top = event.pageY + 'px';
            console.log(event.pageX + ',' + event.pageY);
        })
    </script>
键盘事件对象

  • event.keyCode:返回ASCII值

    注意

    1. keyup和keydown得到的ASCII值不区分字母大小写
    2. keypress得到的ASCII值区分大小写

操作元素

javascript的DOM操作可以改变网页内容，结构和样式，我们可以利用DOM操作元素来改变元素的内容，属性等。注意以下都是

文本内容元素操作

  1. element.innerText:从起始位置到终止位置的内容，但它去除了html标签，同时空格和换行也会去掉

     <style>
        p,div {
            width: 300px;
            height: 30px;
            background-color: pink;
        }
    </style>

// ---------------------------------------------------------------------

	<button>显示时间</button>
    <div>时间：</div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
	    var p = document.querySelector('p');
        function dateTime() {
            var time = new Date();
            var day = ['星期日','星期一','星期二','星期三','星期四','星期五']
            return time.getFullYear() + '年' + (time.getMonth() + 1) + '月' + time.getDate() + '日' + day[time.getDay()];
        }
        btn.onclick = function() {
            div.innerText = dateTime();
        }
	   p.innerText = dateTime();	// 可以不用时间类型，打开页面就显示
    </script>

  2. element.innerHTML：起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

innerText和innerHTML区别

  1. innerText是不识别html标签的，还会去除空格和换行 ie推出，火狐浏览器不支持
  2. innerHTML识别html标签，保留空格和换行 推荐使用,是w3推出的

元素的属性操作

yang.onclick = function() {
            img.src = 'images/yang.jfif';
            img.title = '杨幂';
        }

表单元素的属性操作

	<button>按钮</button>
    <input type="text" value="输入...">
    <script>
        var but = document.querySelector('button');
        var inp = document.querySelector('input');
        but.onclick = function() {
            but.disabled = true;	//	想要某个表单被禁用，不能再点击
            // 也可以用this this指向的是事件函数的调用者but
            // this.disabled = true;
            inp.value = '内容输入...';	//表单里面的值用value来修改
        }
    </script>

js修改元素的样式

  • element.style:行内样式操作

    	
	  div {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: purple;
        }
        
    //-----------------------------------------------------    
	<div></div>
     <script>
         var square = document.querySelector('div');
         square.onclick = function() {
             this.style.backgroundColor = 'pink';
         }
     </script>

    案例

    // 循环精灵图
	<style>
        .box {
            width: 200px;
            height: 400px;
            background-color: pink;
            margin: 0 auto;
        }
        .box ul li {
            list-style: none;
            text-decoration: none;
            width: 50px;
            height: 50px;
            background-color: #cccccc;
            margin: 20px 0;
            background: url('images/total.png') no-repeat;
        }
    </style>
//-------------------------------------------
    <div class="box">
        
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        var list = document.getElementsByTagName('li');
        for(var i = 0; i < list.length; i++) {
            var star = 67 * i + 18;
            // list[i].style.backgroundPosition = '-61px -' + star + 'px';
            list[i].style.backgroundPositionX = '-61px';
            list[i].style.backgroundPositionY = '-' + star + 'px';

        }
    </script>

    注意

    1. js里面的样式采用驼峰命名法
    2. js修改style样式操作，产生的是行内样式，css权重比较高

  • element.className:类名样式操作

    		.over {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .change {
            width: 200px;
            height: 200px;
            background-color: pink;
            line-height: 200px;
            margin: 100px auto;
        }
//------------------------------------
// 当前元素的类名改变为change
	<div class="over">123</div>
    <script>
        var ove = document.querySelector('.over');
        console.log(ove);
        ove.onclick = function() {
            ove.className = 'change';	//类名修改
        }
    </script>

    注意

    1. 会直接覆盖原来的类名，.over 会失效
    2. class是个保留字，所以使用className来操作类名属性
    3. 如果样式修改较多，可以采用操作类名方式更改元素样式

    排他思想

    如果有同一组元素，我们想要其中一个元素实现某种样式，需要利用循环的排他思想的算法

    1. 所有元素全部清除样式
    2. 给当前元素设置样式
    3. 注意顺序不能颠倒，首先干掉其他人，在设置自己

    开关思想

    把一个变量保存一个布尔值，然后再业务执行时，修改这个变量的值，然后通过变量的值执行分支业务

    var flag = true
function fn(flag) {
    flag =!flag
    if(flag) 
    {} else {}
}

元素属性

获取元素属性

  • element.属性
  • element.getAttribute('属性')
 <div class="one" index = '12' id="ok"></div>
    <script>
        var one = document.querySelector('div');
        console.log(one.className);
        console.log(typeof one.getAttribute('index'));
        
    </script>

区别：element.属性 该方法只能获取元素本身的属性，自定义的属性不能获得，element.getAttribute('属性')不受约定，都可以获取

注意：自定义后的值是字符串的形式

修改元素属性

  • element.属性：和上面相同，无法修改自定义的元素属性

  • element.setAttribute('属性','修改值')

    注意：这里的class直接写，不用写成className

<div class="one" index = '12' id="ok"></div>
    <script>
        var one = document.querySelector('div');
        one.setAttribute('class', 'div');
        console.log(one.className);
    </script>

删除元素属性

  • element.removeAttribute('属性')
<div class="one" index = '12' id="ok"></div>
    <script>
        var one = document.querySelector('div');
        one.removeAttribute('index');
        console.log(one.getAttribute('index'));
    </script>

H5获取自定义元素属性

自定义属性的目的：是为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中

H5规定自定义的属性以data-开头做为属性名并且赋值

  • element.getAttribute('data-index');

  • H5新增element.dataset.index 或 element.dataset['index'] ie11才支持

    注意：dataset开头的只能获取data开头的，而且是以驼峰命名法,dataset是一个集合里面存放了所有以data开头的自定义属性

节点操作

网页所有内容都可以看作节点（标签，属性，文本，注释等），再DOM中，节点使用node来表示

heml dom树中的所有节点均可通过javascript进行访问，所有html元素均可被修改，也可以被创建或修改

节点至少拥有nodeType(节点类型)，nodeName(节点名称),nodeValue(节点值)这三个属性

  • 元素节点：nodeType为1
  • 属性节点：nodeType为2
  • 文本节点：nodeType为3

父级节点

  • node.parentNode

    注意

    1. parentNode属性可返回父节点，是最近的一个父节点
    2. 如果没有父节点，则返回null

子节点

  • parentnode.childNode

    注意：获取的子节点是所有节点，包括文本节点等，所有一般不提倡使用

  • parentnode.children

    注意

    1. 非标准的，但实际开发中使用多，是一个只读属性，返回所有子元素节点，只返回子元素节点，浏览器都支持
<div class="nodes">
        <ul>
            <li>23</li>
            <li>2</li>
            <li>4</li>
            <li>54</li>
            <li>dg</li>
        </ul>
    </div>
    <script>
        var list = document.querySelector('ul');
        console.log(list.childNodes);
        console.log(list.children);
    </script>
  • parentnode.firstChild:返回第一个节点（包括文本等）
  • parentnode.lastChild：返回最后一个节点（包括文本等）
<div class="nodes">
        <ul>
            <li>23</li>
            <li>2</li>
            <li>4</li>
            <li>54</li>
            <li>dg</li>
        </ul>
    </div>
    <script>
        var list = document.querySelector('ul');
        console.log(list.firstChild);
        console.log(list.lastChild);
    </script>

  • parentnode.firstElementChild:返回第一个子元素节点，找不到则返回null

  • parentnode.lastElementChild:返回最后一个子元素节点，找不到则返回null

    注意：以上两种方法有兼容问题，ie9以上才支持

<div class="nodes">
        <ul>
            <li>23</li>
            <li>2</li>
            <li>4</li>
            <li>54</li>
            <li>dg</li>
        </ul>
    </div>
    <script>
        var list = document.querySelector('ul');
        console.log(list.firstElementChild);
        console.log(list.lastElementChild);
    </script>

兄弟节点

  • node.nextSibling:返回当前元素的下一个兄弟节点，找不到则返回null
  • node.previousSibiling：返回当前元素的下一个节点，找不到则返回null
<div class="nodes">
        <div>ajiogaj</div>
        <ul>
            <li>23</li>
            <li>2</li>
            <li>4</li>
            <li>54</li>
            <li>dg</li>
        </ul>
        <div>isjao</div>
    </div>
    <script>
        var list = document.querySelector('ul');
        console.log(list.nextSibling);
        console.log(list.previousSibling);
    </script>

  • node.nextElementSibling:返回当前元素的下一个元素节点，找不到则返回null

  • node.prevouseElementSibling:返回当前元素的上一个元素节点，找不到则返回null

    注意：这两个方法有兼容问题，ie9以上才支持

<div class="nodes">
        <div>ajiogaj</div>
        <ul>
            <li>23</li>
            <li>2</li>
            <li>4</li>
            <li>54</li>
            <li>dg</li>
        </ul>
        <div>isjao</div>
    </div>
    <script>
        var list = document.querySelector('ul');
        console.log(list.nextElementSibling);
        console.log(list.previousElementSibling);
    </script>

创建元素

  • document.creatElement()

  • element.innerHTML:利用的字符串拼接方式会很慢，可以利用数组的方式

  • document.write():直接将内容写入页面的内容流，但文档流执行完毕，则它会导致页面全部重绘

            var btn = document.querySelector('button');
        btn.onclick = function() {
            document.write('<div>what</div>');
        }

    注意

    1. document.write 是直接将内容写入到页面的内容流，但文档流执行完毕，则它会导致页面全部重绘
    2. innerHTML 是将内容写入某个DOM节点，不会导致页面全部重绘
    3. innerHTML 创建多个元素效率更高（不要拼接字符串，采用数组形式拼接）
    4. creatElment() 创建多个元素效率稍微低一点点，但是结构更清晰

添加元素

  • element.appendChild():element是父元素，添加再父节点列表末尾，类似于css里面的伪元素
  • element.inserBefore(创建,目标元素)
    <div class="nodes">
        <div>ajiogaj</div>
        <ul>
            <li>23</li>
            <li>2</li>
            <li>4</li>
            <li>54</li>
            <li>dg</li>
        </ul>
        <div>isjao</div>
    </div>
    <script>
        var list = document.querySelector('ul').querySelectorAll('li')
        var ul = document.querySelector('.nodes').querySelector('ul');
        var li = document.createElement('li');
        ul.appendChild(li);
        var span = document.createElement('span');
        ul.insertBefore(span,list[6]);
    </script>

删除节点

  • node.removeChild():从DOM中删除一个子节点，返回删除的节点

        <!-- 删除和发布评论 -->
    <textarea name="" id="out" cols="30" rows="10"></textarea>
    <button class="insert">添加</button>
    <ul>
    </ul>
    <script>
        var insert = document.querySelector('.insert');
        var deletes = document.querySelector('.deletes');
        var textarea = document.querySelector('#out');
        var ul = document.querySelector('ul');
        insert.onclick = function() {
            if(textarea.value == '') {
                alert('空');
            }
            else{
                var deletes = document.createElement('button');
                var li = document.createElement('li');
                ul.appendChild(li);
                var little_delete = ul.insertBefore(deletes,ul.children[ul.children.length]);
                little_delete.innerHTML = '删除';
                li.innerHTML = textarea.value;
                textarea.value = '';
                // 核心代码
                little_delete.onclick = function() {
                    ul.removeChild(li);
                    ul.removeChild(little_delete);
                }

            }
        }
    </script>


// 方法2
<style>
        .wht {
            color: red;
            text-decoration: none;
            margin-left: 30px;
        }
    </style>
    <!-- 删除和发布评论 -->
    <textarea name="" id="out" cols="30" rows="10"></textarea>
    <button class="insert">添加</button>
    <ul>
    </ul>
    <script>
        var insert = document.querySelector('.insert');
        var textarea = document.querySelector('#out');
        var ul = document.querySelector('ul');
        insert.onclick = function() {
            if(textarea.value == '') {
                alert('空');
            }
            else{
                var deletes = document.createElement('button');
                var li = document.createElement('li');
                ul.appendChild(li);
                // 核心代码
                li.innerHTML = textarea.value + "<a href='javascript:;' class = 'wht'>删除</a>";
                textarea.value = '';
                var little_delete = document.querySelector('ul').querySelectorAll('a');
                console.log(little_delete);
                // 堆每个a进行添加删除事件
                for(var i = 0; i < little_delete.length; i++) {
                    little_delete[i].onclick = function() {
                        ul.removeChild(this.parentNode);
                    }
                }
            }
        }
    </script>

    克隆节点

    • node.cloneNode():括号为空，或是false为浅拷贝，不复制标签里面的内容；括号为true，复制标签也复制标签里面的内容

Dom修改总结

  1. 修改普通元素属性：src ,href,title等
  2. 修改普通元素内容：innerHTML,innerText
  3. 修改表单元素：value,type,disabled等
  4. 修改元素样式：style,className

BOM

浏览器对象模型（Browser ）,它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window

BOM由一系列相关的对象构成，并且每个对象都提供了相应的属性和方法

BOM缺乏标准，javascript标准是ecma，dom的标准组织是w3c

window对象是浏览器的顶级对象，它具有双重角色

  • 它是js访问浏览器窗口的一个接口
  • 它是一个全局变量，定义在全局作用域的变量，函数都会变成window对象的属性和方法，在调用的时候可以省略window
  • window.name是一个特殊属性，不用name来命名

DOM事件

onload加载页面

  • window.onload = function() {};
window.addEventListener('load',function(){
    //代码块
});

    window.onload是窗口加载事件，当文档全部加载完成的时候（包括文本，标签，图像，css，文件等）

    注意

    1. 有了load就可以把代码写在页面元素的上方
    2. window.load传统注册方式只能写一次，如果是多次写，则只执行最后一次
    3. 如果是window.addEventListener()就没有限制
  • document.addEventListener('DOMContentLoaded',function(){})

    DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式，图片等 ie9以上支持

如果页面图片很多，onload触发可能需要花费更多的事件，影响用户体验，此时用DOMContentLoaded事件比较合适

resize窗口调整

window.onresize = function() {}

window.addEventListener('resize',function(){})

注意

  1. 只要窗口大小发生变化像素变化，就会触发事件
  2. 我们经常利用这个事件完成响应式布局，window.innerWidth当前屏幕的宽度

定时器

  • window.setTimeout(调用函数,时间)
// 里面的函数又叫回调函数，因为这个函数需要等待时间，因此叫回调函数
var timeoutID = scope.setTimeout(code[, delay]);
// code可以是字符串，但不推荐使用，和eval()一样，会有安全问题

    setTimeout()方法设置一个定时器，该定时器在到期后调用函数，只调用一次

    注意

    1. window可以省略
    2. 这个调用函数可以直接写函数名，写函数或是次啊用字符串格式'函数名()'三种方式，不建议使用第三种
    3. 默认延迟时间为0，时间单位是毫秒，一秒等于一千毫秒
    4. 因为定时器有很多，所以经常给定时器赋值一个标识符
  • window.clearTimeout(timeoutID)

    clearTimeout()方法取消了先前通过调用setTimeout()建立的定时器

    注意

    1. window可以省略
    2. 里面的参数就是定时器的标识符
// 定时器生成和取消
	<button>停止</button>
    <script>
        var time1 = setTimeout(function(){
            console.log('over break')
        },5000);
        var button = document.querySelector('button');
        button.addEventListener('click',function(){
            clearTimeout(time1);
        })
    </script>

  • window.setInterval(调用函数,时间)

    重复调用很多次

    注意

    1. window可以省略
    2. 这个调用函数可以直接写函数名，写函数或是次啊用字符串格式'函数名()'三种方式，不建议使用第三种
    3. 默认延迟时间为0，时间单位是毫秒，一秒等于一千毫秒
    4. 因为定时器有很多，所以经常给定时器赋值一个标识符
  • window.clearInterval(intervalID)

    clearInterval()方法取消了先前通过调用setInterval()建立的定时器

    注意

    1. window可以省略
    2. 里面的参数就是计时器的标识符

元素对象

  • element.offsetLeft:是一个只读属性，返回当前元素相对于 offsetParent 节点左边界的偏移像素值。
  • element.offsetTop:是一个只读属性，返回当前元素相对于 offsetParent 节点上边界的偏移像素值。
  • element.offsetParent:元素是一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的元素
<style>
        img {
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>

    <img src="../theday11/images/下载.png" alt="">
    <script>
        var img = document.querySelector('img');
        document.addEventListener('keydown',function(event) {
            var event = event || window.event; // 兼容问题，火狐浏览器找不到event的问题
            var award = event.keyCode;
            // console.log(img.offsetParent);
            switch(award) {
                case 37 : img.style.left = img.offsetLeft - 10 + 'px'; break;
                case 38 : img.style.top = img.offsetTop - 10 + 'px'; break;
                case 39 : img.style.left = img.offsetLeft + 10 + 'px'; break;
                case 40 : img.style.top = img.offsetTop + 10 + 'px'; break;
                default : break;
            }
        })
    </script>

js的执行机制

同步任务都在主程序上执行，形成一个执行栈

异步进程处理：当异步任务时间到的时候，才写入任务队列中

异步任务通过回调函数，形成一个任务队列

  • 普通事件 onclick resize等
  • 资源加载
  • 定时器 setTImeout setInterval等

由于线程不断的重复获取任务，执行任务，再获取任务，再执行，所以这种机制被称为时间循环（eventloop）

js执行流程

  1. 先执行js执行栈中的同步任务
  2. 异步任务（回调函数）放在任务队列中
  3. 一旦执行栈中所有的同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进行执行栈，开始执行

location对象

window对象提供了location属性用于获取或设置窗体的url,并且可以用于解析url,返回的是一个对象，也称为location对象

url统一资源定位符（Uniform Resource Locator URL）是互联网标准资源的地址。互联网上的每个文档都有一个唯一的url，它包含的信息指出文件的位置以及浏览器该如何处理它

url语法

protocol://host[:port]/path/[?auery]#fragment

protocol:通信协议，常见的http ftp matio等

host:主机（域名）

port:端口 可选 省略时使用默认端口

path:路径由零或多个/符号隔开的字符串，一般来表示主机上一个目录或文件地址

query:参数 以键值对的形式通过$符号分割

fragment:片段 #后买你内容常见于链接 锚点

location对象属性

  • location.href:获取或设置整个url
  • location.host:返回主机
  • location.port:返回端口号
  • location.pathname:返回路径
  • location.search:返回参数
  • location.hash:返回片段
	<button>跳转</button>
    <script>
        var button = document.querySelector('button');
        var body = document.querySelector('body');
        function outTime(time) {
            var time1 = setInterval(function() {
                if(time == 0) {
                    clearInterval(time1);
                    location.href = 'http://www.baidu.com';   // 核心
                }
                body.innerHTML = '倒计时' + time;
                time--;
            }, 1000);
        }

        button.onclick = function() {
            var time = 5;
            outTime(time);
        }
    </script>

location对象方法

  • location.assign()：跳转页面，记录历史，所以可以返回以前的页面（也称为重定向页面）
  • location.replace()：跳转页面，不记录历史
  • location.reload()：重新刷新页面，相当于刷新按钮或f5，如果参数是true，则是强制刷新 ctrl+f5

navigator对象包含有关浏览器的信息，它有很多属性，我们最常用的是userAgent,该属性可以返回由客户端发送服务器的user-agent头部的值

if(navigator.userAgent.math(/phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|windows Phone)/i)) {	
    window.location.href = '';		// 手机
} else {
    window.location.href = '';		// 电脑
}

history对象

  • history.back()：后退功能
  • history.forward()：前进功能
  • go(参数)：前进后退功能，如果参数是1 前进一个页面 后退一个页面
posted @ 2022-05-07 16:40  a立方  阅读(108)  评论(0)  编辑  收藏  举报