JavaScript知识点总结

作者: 会飞的大象 | 来源:发表于2019-10-17 17:27 被阅读0次

JS概述

javscript :

1、ECMAScript

js语法：标识符，关键字、变量、表达式、运算符、分支结构、循环结构、函数、对象

2、DOM

DOM： document object model ,文档对象模型

html可以看做一颗树，

a, 在什么是时候

事件：点击事件，鼠标悬停，焦点获取、丢失，键盘

b, 对谁

目标：标签，树种的节点

选择器：子节点、父节点、兄弟节点

c, 做什么事情

操作：

增：在DOM中可以添加一个节点

删：在DOM中可以删除一个节点

改：修改结点内容，css

查：获取结点的内容，css

3、BOM

Browser object model, 浏览器对象模型

window

location: 位置

history:浏览历史

javascript 初试

第一个程序

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        function changeValue(){
            // alert("hellow");
            var p = document.getElementById("p1");
            p.innerHTML = Date();
        }
    </script>
</head>
<body>

    <h1>我的第一个 JavaScript 程序</h1>
    <p id="p1">这是一个段落</p>
    <button class="btn" onclick="changeValue()">显示日期</button>

</body>

</html>

javascript是脚本语言

javascript是一个解释性的语言：写一行就能执行一行

弱语言：对语法要求不严格，";"

javascript 输出

输出内容可以用来调试代码

document.write(),在html页面写标签
alert("hello world");
console.log("hello world");

日志级别：

DEBUG

info

warn

error

javascript脚本位置

head标签内部
放在</body>的上面

javascript的引入

<script src="js/demo3.js" type="text/javascript"></script>

注释

1、//

2、/* */

分号

js中语句的末尾需要添加“；”,也可以省略，但是不建议

语句换行

console.log("hello \
            world");

变量的定义

通过关键字： var ,变量的类型可以动态的改变

变量的命名

变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）

javascript的数据类型（⭐）

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

引用数据类型：对象(Object)、数组(Array)、函数(Function)。

javascript是动态类型

var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串

Undefined 和 Null

一个变量只声明没有初始化，它的值就是Undefined

null表示的是空对象

Undefined 是 null 的子类

Undefined 和 null 一般情况是相等的。 undefined == null

对象

        <!-- json -->
        var car = {name:"benz","color":"green","model":500};
        console.log(car.color);
        car.age = 5;
        console.log(car.age);
        // 定义drive方法
        car.drive = function(){
            console.log(car.name + "开动了");
        }
        //调用drive方法
        car.drive();

这种大括号的方式JSON.

定义方法：

var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
    {
       return this.firstName + " " + this.lastName;
    }

};

函数

语法：

function functionname()
{
    // 执行代码
}

function method1(){
            console.log("method1");
}

var method2 = function(){
            alert("method2");
}

注意：函数没有方法的重载，最后定义的会覆盖前面的同名方法

<script type="text/javascript">
        function method1(){
            console.log("method1");
        }

        function method1(name,age){
            console.log(name+ ",method1," + age + "," +i);
        }

        var i = 5;

        method1();
    </script>

方法的参数

方法的参数可以通过arguments[index]获取，index从0开始

<script type="text/javascript">
        function method1(name,age){
            alert(name+ ",method1," + arguments[2]);
        }
        method1("zs",12,"ls");
    </script>

方法的返回值

方法的默认返回值是undefined

可以通过return 返回值

<script type="text/javascript">
        function method(a,b){
            return a+b;
        }

        var i = method(1,2);
        alert(i);
</script>

html事件

onclick：当用户点击某个对象时触发某一事件(调用某一句柄)；
ondblclick:当用户双击某一对象时触发某一事件(调用某一句柄)；
onfocus:获取元素焦点时触发某一事件
onblur:失去元素焦点时触发某一事件

onchange：域的内容被改变
onkeydown:某个键盘被按下时触发某一事件；
onkeypress：某个键盘按键被按下并松开时触发某一事件；
onkeyup:某个键盘按键被松开；
onload：一张页面或者一幅图像加载完成时触发某一事件；
onload属性在开发中一般只给body添加，该属性的触发标志着页面被加载完成。应用场景:当有些事件我们希望页面加载完成之后才执行，就可以使用该属性。
onmousedown:鼠标按钮被按下时触发某一事件；
onmousemove:鼠标按钮被移动时触发某一事件；
onmouseout:鼠标从某元素移开时触发某一事件；
onmouseover:鼠标移到某元素之上时触发某一事件；
onmouseleave:鼠标从元素离开时触发某一事件；
onselect：文本被选中时触发的某一事件；
onsubmit：点击’确认’按钮时触发某一事件；
onsubmit事件是当表单在进行提交时触发，该属性也只能给form表单使用。应用场景:在表单进行提交到后端之前前端进行相关的校验(例如:格式校验)，若校验通过则提交前端数据到后端，否则返回一个false或者使用event事件的preventDefault()函数,两种方式都会阻止表单的提交。(即:onsubmit事件在提交数据到后端之前触发，注意优先级)

DOM

节点

>在一个HTML文档中出现的所有东西的都是节点

>元素节点（HTML标签）

>文本节点（文字内容）

>注释节点（注释内容）

>文档节点（document）

每一种类型的节点都会有一些属性区分自己的特点和特征

nodeType：节点类型
nodeName：节点名称
nodeValue：节点值

节点查找API

document.getElementById ：根据ID查找元素，大小写敏感，如果有多个结果，只返回第一个；

document.getElementsByClassName ：根据类名查找元素，多个类名用空格分隔，返回一个 HTMLCollection 。注意兼容性为IE9+（含）。另外，不仅仅是document，其它元素也支持 getElementsByClassName 方法；

document.getElementsByTagName ：根据标签查找元素， * 表示查询所有标签，返回一个 HTMLCollection 。

document.getElementsByName ：根据元素的name属性查找，返回一个 NodeList 。

document.querySelector ：返回单个Node，IE8+(含），如果匹配到多个结果，只返回第一个。

document.querySelectorAll ：返回一个 NodeList ，IE8+(含）。

document.forms ：获取当前页面所有form，返回一个 HTMLCollection ；

节点创建API

createElement创建元素：

var elem = document.createElement("div");  
elem.id = 'haorooms';  
elem.style = 'color: red';  
elem.innerHTML = '我是新创建的haorooms测试节点';  
document.body.appendChild(elem);

通过 createElement 创建的元素并不属于 document 对象，它只是创建出来，并未添加到html文档中，要调用 appendChild 或 insertBefore 等方法将其添加到HTML文档中。

createTextNode创建文本节点：

var node = document.createTextNode("我是文本节点");  
document.body.appendChild(node);

cloneNode 克隆一个节点：

node.cloneNode(true/false) ，它接收一个bool参数，用来表示是否复制子元素。

var from = document.getElementById("test");  
var clone = from.cloneNode(true);  
clone.id = "test2";  
document.body.appendChild(clone);

克隆节点并不会克隆事件，除非事件是用

这种方式绑定的，用 addEventListener 和 node.onclick=xxx; 方式绑定的都不会复制。

createDocumentFragment

本方法用来创建一个 DocumentFragment ，也就是文档碎片，它表示一种轻量级的文档，主要是用来存储临时节点，大量操作DOM时用它可以大大提升性能。

节点修改API

1、appendChild

语法：

parent.appendChild(child);

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test1,.test2,.test3,.test4{
            width:200px;
            height: 100px;
            margin: 5px;
            text-align: center;
        }
        .test1{
            background-color: palegreen;
        }
        .test2{
            background-color: indianred;
        }
        .test3{
            background-color: crimson;
        }
        .test4{
            background-color: cyan;
        }
    </style>
    <script>

        function  add() {
            //ele1为父节点
            var ele1 = document.getElementsByClassName("test1")[0];
            //elep为新增的标签,新增标签方法为document.createElement("标签名称")
            var elep = document.createElement("p");
            elep.innerHTML="new add p element";
            //使用appendChild()方法将elep添加到ele1中，所以appendChild()的使用方法是:父标签.appendChild(子标签)
            ele1.appendChild(elep);
        }
    </script>
</head>
<body>
<div>
    <div class="test1"><button onclick="add()">add</button>javascript test1</div>
    <div class="test2">javascript test2</div>
    <div class="test3">javascript test3</div>
    <div class="test4">javascript test4</div>
</div>
</body>
</html>

2、insertBefore

parentNode.insertBefore(newNode, refNode);

3、insertAdjacentHTML

//js谷歌浏览器，火狐浏览器，IE8+
el.insertAdjacentHTML('beforebegin', htmlString);

关于insertAdjacentHTML，这个API比较好用，具体可以看：https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

4、Element.insertAdjacentElement()

用法和上面类似，

targetElement.insertAdjacentElement(position, element);

5、removeChild

removeChild用于删除指定的子节点并返回子节点，语法：

var deletedChild = parent.removeChild(node);

deletedChild指向被删除节点的引用，它仍然存在于内存中，可以对其进行下一步操作。另外，如果被删除的节点不是其子节点，则将会报错。一般删除节点都是这么删的：

function removeNode(node)  
{  
    if(!node) return;  
    if(node.parentNode) node.parentNode.removeChild(node);  
}

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test1,.test2,.test3,.test4{
            width:200px;
            height: 100px;
            margin: 5px;
            text-align: center;
        }
        .test1{
            background-color: palegreen;
        }
        .test2{
            background-color: indianred;
        }
        .test3{
            background-color: crimson;
        }
        .test4{
            background-color: cyan;
        }
    </style>
    <script>

        function  add() {
            //ele1为父节点
            var ele1 = document.getElementsByClassName("test1")[0];
            //elep为新增的标签,新增标签方法为document.createElement("标签名称")
            var elep = document.createElement("p");
            elep.innerHTML="new add p element";
            //使用appendChild()方法将elep添加到ele1中，所以appendChild()的使用方法是:父标签.appendChild(子标签)
            ele1.appendChild(elep);
        }
        function remove(){
            //ele1为父节点
            var ele1 = document.getElementsByClassName("test1")[0];
            //定位需要删除的子节点(从第一个p标签开始删除)
            var ele2 = document.getElementsByTagName("p")[0];
            //使用removeChild()方法进行删除,removeChild()的使用方法是:父标签.removeChild(子标签)
            ele1.removeChild(ele2);
        }
    </script>
</head>
<body>
<div>
    <div class="test1"><button onclick="add()">add</button>javascript test1</div>
    <div class="test2">javascript test2</div>
    <div class="test3">javascript test3</div>
    <div class="test4"><button onclick="remove()">remove</button>javascript test4</div>
</div>
</body>
</html>

6、replaceChild

replaceChild用于将一个节点替换另一个节点，语法：

parent.replaceChild(newChild, oldChild);

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test1,.test2,.test3,.test4{
            width:200px;
            height: 100px;
            margin: 5px;
            text-align: center;
        }
        .test1{
            background-color: palegreen;
        }
        .test2{
            background-color: indianred;
        }
        .test3{
            background-color: crimson;
        }
        .test4{
            background-color: cyan;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="test1"><button onclick="add()">add</button>javascript test1</div>
    <div class="test2"><button class="replace">replace</button>javascript test2</div>
    <div class="test3">javascript test3</div>
    <div class="test4"><button onclick="remove()">remove</button>javascript test4</div>
</div>
<script>
    function  add() {
            //ele1为父节点
            var ele1 = document.getElementsByClassName("test1")[0];
            //elep为新增的标签,新增标签方法为document.createElement("标签名称")
            var elep = document.createElement("p");
            elep.innerHTML="new add p element";
            //使用appendChild()方法将elep添加到ele1中，所以appendChild()的使用方法是:父标签.appendChild(子标签)
            ele1.appendChild(elep);
        }
    function remove(){
        //ele1为父节点
        var ele1 = document.getElementsByClassName("test1")[0];
        //定位需要删除的子节点(从第一个p标签开始删除)
        var ele2 = document.getElementsByTagName("p")[0];
        //使用removeChild()方法进行删除,removeChild()的使用方法是:父标签.removeChild(子标签)
        ele1.removeChild(ele2);
    }

    //需求:点击时将test3的div标签更改成图片
    //获取父标签(test3的父标签)
    var parent = document.getElementsByClassName("parent")[0];
    //获取点击的标签,以便后面进行点击更改标签操作
    var ele3 = document.getElementsByClassName("replace")[0];
    //创建img标签
    var img = document.createElement("img");
    //设置img标签的src属性
    img.src = "bfff64c7.jpg";
    //定义点击操作函数,已满足需求
    ele3.onclick = function(){
        //获取点击点击后需要更改的标签
        var ele4 = document.getElementsByClassName("test3")[0];
        //点击后若ele4标签存在则进行更改，否则进行弹框提示
        if(ele4 != undefined){
            parent.replaceChild(img,ele4);
        }
        else{
            alert("test3 element is not exist")
        }
    }
</script>
</body>
</html>

节点关系API

1、父关系API

parentNode ：每个节点都有一个parentNode属性，它表示元素的父节点。Element的父节点可能是Element，Document或DocumentFragment；

parentElement ：返回元素的父元素节点，与parentNode的区别在于，其父节点必须是一个Element元素，如果不是，则返回null；

2、子关系API

children ：返回一个实时的 HTMLCollection ，子节点都是Element，IE9以下浏览器不支持；

childNodes ：返回一个实时的 NodeList ，表示元素的子节点列表，注意子节点可能包含文本节点、注释节点等；

firstChild ：返回第一个子节点，不存在返回null，与之相对应的还有一个 firstElementChild ；

lastChild ：返回最后一个子节点，不存在返回null，与之相对应的还有一个 lastElementChild ；

3、兄弟关系型API

previousSibling ：节点的前一个节点，如果不存在则返回null。注意有可能拿到的节点是文本节点或注释节点，与预期的不符，要进行处理一下。

nextSibling ：节点的后一个节点，如果不存在则返回null。注意有可能拿到的节点是文本节点，与预期的不符，要进行处理一下。

previousElementSibling ：返回前一个元素节点，前一个节点必须是Element，注意IE9以下浏览器不支持。

nextElementSibling ：返回后一个元素节点，后一个节点必须是Element，注意IE9以下浏览器不支持。

实例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
<p>UserName<input type="text" name="username"></p>
<p>PassWord<input type="password" name="password"></p>
<p>爱好:音乐<input type="checkbox" name="hobby" value="music">电影<input type="checkbox" name="hobby" value="movie"></p>
<p>性别:<input type="radio" name="gender" value="man"> <input type="radio" name="gender" value="woman"></p>
<p><input type="submit" value="注册"></p>
</form>
<script>
    var ele = document.getElementsByTagName('p')[2];
    console.log(ele);
    console.log('nodeName:'+ele.nodeName);
    console.log('nodeType:'+ele.nodeType);
    console.log('nodeValue:'+ele.nodeValue);
    console.log('attribute:'+ele.attributeBuffers);
    console.log('innerHTML:'+ele.innerHTML);
    console.log('---------------------------------');
    console.log('parentNode:'+ele.parentNode);
    console.log('children:'+ele.children);
    console.log('firstChild:'+ele.firstChild);
    console.log('firstElementChild:'+ele.firstElementChild);
    console.log('lastChild:'+ele.lastChild);
    console.log('childNodes:'+ele.childNodes);
    console.log('nextElementSibling:'+ele.nextElementSibling);
    console.log('parentElement:'+ele.parentElement);
    console.log('firstElementChild:'+ele.firstElementChild);
    console.log('lastElementChild:'+ele.lastElementChild);
    console.log('nextElementSibling:'+ele.nextElementSibling);
    console.log('previousElementSibling:'+ele.previousElementSibling);

</script>
</body>
</html>

元素属性型API

1、setAttribute 给元素设置属性：

element.setAttribute(name, value);

其中name是特性名，value是特性值。如果元素不包含该特性，则会创建该特性并赋值。

2、getAttribute

getAttribute返回指定的特性名相应的特性值，如果不存在，则返回null：

var value = element.getAttribute("id");

3、hasAttribute

var result = element.hasAttribute(name);

var foo = document.getElementById("foo"); 
if (foo.hasAttribute("bar")) { 
    // do something
}

4、dataset

获取html data-开头的属性，用法如下：

<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>

let el = document.querySelector('#user');

// el.id == 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''

el.dataset.dateOfBirth = '1960-10-03'; // set the DOB.

// 'someDataAttr' in el.dataset === false
el.dataset.someDataAttr = 'mydata';
// 'someDataAttr' in el.dataset === true

样式相关API

1、直接修改元素的样式

elem.style.color = 'red';  
elem.style.setProperty('font-size', '16px');  
elem.style.removeProperty('color');

2、动态添加样式规则

var style = document.createElement('style');  
style.innerHTML = 'body{color:red} #top:hover{background-color: red;color: white;}';  
document.head.appendChild(style);

3、classList获取样式class

// div is an object reference to a <div> element with class="foo bar"
div.classList.remove("foo");
div.classList.add("anotherclass");

// if visible is set remove it, otherwise add it
div.classList.toggle("visible");

// add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10 );

alert(div.classList.contains("foo"));

// add or remove multiple classes
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");

// add or remove multiple classes using spread syntax
let cls = ["foo", "bar"];
div.classList.add(...cls); 
div.classList.remove(...cls);

// replace class "foo" with class "bar"
div.classList.replace("foo", "bar");

4、window.getComputedStyle

通过 element.sytle.xxx 只能获取到内联样式，借助 window.getComputedStyle 可以获取应用到元素上的所有样式，IE8或更低版本不支持此方法。

var style = window.getComputedStyle(element[, pseudoElt]);

获取相关高度API

getBoundingClientRect

getBoundingClientRect 用来返回元素的大小以及相对于浏览器可视窗口的位置，用法如下：

var clientRect = element.getBoundingClientRect();

clientRect是一个 DOMRect 对象，包含width、height、left、top、right、bottom，它是相对于窗口顶部而不是文档顶部，滚动页面时它们的值是会发生变化的。

BOM

什么是BOM

DOM是一套操作HTML标签的API（接口/方法/属性）
BOM是一套操作浏览器的API（接口/方法/属性）

常见的BOM对象
window：代表整个浏览器窗口（window是BOM中的一个对象，并且是顶级的对象）
Navigator ：代表浏览器当前的信息，通过Navigator我们可以获取用户当前使用的是什么浏览器
Location：代表浏览器当前的地址信息，通过Location我们可以获取或者设置当前的地址信息
History：代表浏览器的历史信息，通过History我们可以实现上一步/刷新/下一步操作（出于
对用户的隐私考虑，我们只能拿到当前的浏览记录，不能拿到所有的历史记录）
Screen：代表用户的屏幕信息

Navigator（获取用户当前浏览器信息）

 let agent = window.navigator.userAgent;
    if(/chrome/i.test(agent)){
        alert("谷歌");
    }else if(/firefox/i.test(agent)){
        alert("火狐");
    }else if(/msie/i.test(agent)){
        alert("低级IE浏览器");
    }else if("ActiveXObject" in window){
        alert("低级IE浏览器");
    }

Location

window.location.href;  //获取当前地址栏的地址
window.location.href = “http://www.baidu.com”; // 设置当前地址栏的地址
window.location.reload();  //刷新
window.location.reload(true);  //强制刷新

History

可以通过History来实现刷新、上一步、下一步

window.history.forword(); //上一步
 window.history.back();  //下一步
 window.history.go(0);  //接收参数 0   表示刷新当前页面
 window.history.go(2); //接收正整数  表示前进2个页面
 window.history.go(-2); //接收负整数  表示后退2个页面
##获取元素宽高的方法
1. getComputedStyle();
获取的宽高不包括边框和内边距
既可以获取行内宽高，也可以获取CSS设置的宽高
只能获取，不能设置
只支持IE9以上的浏览器
```JavaScript
let oDiv = document.querySelector("div");
let oStyle = getComputedStyle(oDiv);
console.log(oStyle.height);//获取高
console.log(oStyle.width);//获取宽

通过currentStyle获取
获取的宽高不包括边框和内边距
既可以获取行内宽高，也可以获取CSS设置的宽高
只能获取，不能设置
只支持IE9以下的浏览器

let oDiv = document.querySelector("div");
let oStyle = oDiv.currentStyle;
console.log(oStyle.height);//获取高
console.log(oStyle.width);//获取宽

通过style获取
获取的宽高不包括边框和内边距
可以获取行内宽高，但不可以获取CSS设置的宽高
可以获取，也可以设置
高级低级浏览器都支持

let oDiv = document.querySelector("div");
console.log(oDiv.style.height);//获取高
console.log(oDiv.style.width);//获取宽

offsetWidth 和 offsetHeight
获取的宽高包含边框 + 内边距 + 元素宽高
即可以获取行内设置的宽高也可以获取CSS设置的宽高
只支持获取, 不支持设置
高级低级浏览器都支持

let oDiv = document.querySelector("div");
console.log(oDiv.offsetWidth );//获取宽
console.log(oDiv.offsetHeight);//获取高

总结

通过 offsetWidth 和 offsetHeight 获取的宽高包含边框 + 内边距 + 元素宽高
通过getComputedStyle(); / currentStyle / style 获取的宽高不包括边框和内边距
通过 offsetWidth 和 offsetHeight / getComputedStyle(); / currentStyle 既可以获取行内宽高，也可以获取CSS设置的宽高
通过style 可以获取行内宽高，但不可以获取CSS设置的宽高
高级浏览器 getComputedStyle(); 低级浏览器通过currentStyle获取高低级都支持：通过style获取 / offsetWidth 和 offsetHeight
style可以获取也可以设置其他的只能获取
style只能获取行内样式，别的可以获取行内和外链内联样式

三大家族

offset家族
offsetWidth / offsetHeight ：获取的宽高包含边框 + 内边距 + 元素宽高
offsetParent ：获取元素的第一个定位祖先元素，如果没有定位的则获取到的是body
offsetLeft /offsetTop ：获取元素到第一个定位元素的偏移量，如果没有定位的则获取到的是到body的偏移量
client家族
clientWidth / clientHeight ：获取的宽高包含内边距 + 元素宽高
clientLeft /clientHeight ：获取元素的左边框或者顶部边框
scroll家族
scrollWidth / scrollHeight ：当内容没超出元素范围时获取的是内边框 + 元素宽高
当内容超出元素范围时获取的是内边框 + 元素宽高+超出的宽度
scrollTop / scrollLeft ：Top获取的是内容超出顶部内边距的距离 Left获取的是内容超出左边内边距的距离

获取网页宽高

let {width, height} = getScreen(); //解构拿到宽高
    console.log(width);  //打印网页宽高
    console.log(height);

    function getScreen() {//获取网页宽高的兼容性方法
        let width, height;
        if(window.innerWidth){
            width = window.innerWidth;
            height = window.innerHeight;
        }else if(document.compatMode === "BackCompat"){
            width = document.body.clientWidth;
            height = document.body.clientHeight;
        }else{
            width = document.documentElement.clientWidth;
            height = document.documentElement.clientHeight;
        }
        return {
            width: width,
            height: height
        }
    }

innerWidth/innerHeight只能在IE9以及IE9以上的浏览器中才能获取
documentElement.clientWidth/documentElement.clientHeight可以用于在IE9以下的浏览器的标准模式中获取
在混杂模式中利用document.body.clientWidth/document.body.clientHeight获取可视区域的宽高

获取网页滚动距离

let {x, y} = getPageScroll();
         function getPageScroll() {
            let x, y;
            if(window.pageXOffset){
                x = window.pageXOffset;
                y = window.pageYOffset;
            }else if(document.compatMode === "BackCompat"){
                x = document.body.scrollLeft;
                y = document.body.scrollTop;
            }else{
                x = document.documentElement.scrollLeft;
                y = document.documentElement.scrollTop;
            }
            return {
                x: x,
                y: y
            }
        }

window.pageXOffset;用于IE9及以上获取
document.body.scrollLeft;用于IE9以下的混杂模式获取
document.documentElement.scrollLeft;用于IE9以下的标准模式获取

监听网页可视区域的变化

window.onresize = function () {
        resetSize();
        console.log("尺寸的变化");
    }