这16种原生函数和属性的区别，你真的知道吗？

前端大全

2024-08-23

The following article is from 云的程序世界 Author 云的世界

前言

原生内置了很多API, 作用类似，却也有差千差万别，了解其区别，掌握前端基础，是修炼上层，成为前端高级工程师的必备知识，让我们一起来分类归纳，一起成长吧。

上一篇前端基础好文：那些你熟悉而又陌生的函数^[1]

属性获取 `keys`, `getOwnPropertyNames`, `getOwnPropertySymbols`

Object.keys^[2]

返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致。

Object.getOwnPropertyNames^[3]

返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括Symbol值作为名称的属性）组成的数组。

Object.getOwnPropertySymbols^[4]

一个给定对象自身的所有 Symbol 属性的数组。

Reflect.ownKeys^[5]

返回一个由目标对象自身的属性键组成的数组。
等同于Object.getOwnPropertyNames(target).concat(Object.getOwnPropertySymbols(target))

例子

const symbolSalary = Symbol.for("salary");
const symbolIsAnimal = Symbol.for("isAnimal");
const symbolSay = Symbol.for("say");

function Person(age, name){
   this.age = age;
   this.name = name;

   this.walk = function () {
       console.log("person:walk");
   }
}

// 原型方法
Person.prototype.say = function(words){
   console.log("say:", words);
}
Person.prototype[symbolSay] = function(words){
   console.log("symbolSay", words);
}

// 原型属性
Person.prototype[symbolIsAnimal] = true;
Person.prototype.isAnimal = true;

const person = new Person(100, "程序员");

person[symbolSalary] = 6000;
person["sex"] = "男";

// sex 不可枚举
Object.defineProperty(person, "sex", {
   enumerable: false
});

Object.defineProperty(person, symbolSalary, {
   enumerable: false, // 无效的设置 
   value: 999
});

const keys = Object.keys(person);
const names = Object.getOwnPropertyNames(person);
const symbols = Object.getOwnPropertySymbols(person);
const ownKeys = Reflect.ownKeys(person);

console.log("keys", keys);  // [ 'age', 'name', 'walk' ]
console.log("getOwnPropertyNames", names); // [ 'age', 'name', 'walk', 'sex' ]
console.log("getOwnPropertySymbols", symbolSalary); // [ Symbol(salary) ]
console.log("ownKeys", ownKeys); // [ 'age', 'name', 'walk', 'sex', Symbol(salary) ]


console.log("--------")
console.log(person.isAnimal);  // true
console.log(person[symbolIsAnimal]); // true
console.log(person[symbolSalary]);  // 999
person[symbolSay]("hello world"); // symbolSay hello world
person.say("hello world"); // say: hello world
person.walk(); // person:walk

总结

Object.keys：则返回的是所有可枚举属性键，也就是属性下的enumerable: true。但不包括Symbol值作为名称的属性键。
Object.getOwnPropertyNames：返回的是对象所有自己的属性键，包括不可枚举属性但不包括Symbol值作为名称的属性键。
Object.getOwnPropertySymbols: 方法返回一个给定对象自身的所有 Symbol 属性键的数组。
Reflect.ownKeys: 返回一个由目标对象自身的属性键组成的数组。等同于Object.getOwnPropertyNames(target).concat(Object.getOwnPropertySymbols(target))。

节点位置关系 `Node.contains`, `Node.compareDocumentPosition`

Node.compareDocumentPosition^[6]

比较当前节点与任意文档中的另一个节点的位置关系

语法 compareMask = node.compareDocumentPosition( otherNode )

返回值是一个具有以下值的位掩码：

常量名	十进制值	含义
DOCUMENT_POSITION_DISCONNECTED	1	不在同一文档中
DOCUMENT_POSITION_PRECEDING	2	otherNode在node之前
DOCUMENT_POSITION_FOLLOWING	4	otherNode在node之后
DOCUMENT_POSITION_CONTAINS	8	otherNode包含node
DOCUMENT_POSITION_CONTAINED_BY	16	otherNode被node包含
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC	32	待定

在一些场景下，可能设置了不止一位比特值。比如 otherNode 在文档中是靠前的且包含了 Node, 那么DOCUMENT_POSITION_CONTAINS 和 DOCUMENT_POSITION_PRECEDING 位都会设置，所以结果会是 0x0A 即十进制下的 10。

看代码：
结果是：20

child 在 parent之后，赋值得4
child 被 parent包含，赋值的16

4 + 16 = 20

    <div id="parent">
        <div id="child"></div>
    </div>

    <script>

        const pEl = document.getElementById("parent");
        const cEl = document.getElementById("child");
        console.log(pEl.compareDocumentPosition(cEl));  // 20

    </script>

Node.contains^[7]

返回的是一个布尔值，来表示传入的节点是否为该节点的后代节点

基本等于compareDocumentPosition的 | DOCUMENT_POSITION_CONTAINED_BY | 16 |otherNode被node包含 |

总结

compareDocumentPosition 返回的是数字，带组合意义的数据，不仅仅可以返回包含，还可以返回在之前之后等信息
contains 返回的是布尔值，仅仅告诉你是否有包含关系

取文本 `innerText`, `textContent`

HTMLElement.innerText^[8]

解析过程：

对HTML标签进行解析；
对CSS样式进行带限制的解析和渲染；
将ASCII实体转换为对应的字符；
剔除格式信息（如\t、\r、\n等），将多个连续的空格合并为一个

Node.textContent^[9]

解析过程：

对HTML标签进行剔除；
将ASCII实体转换为相应的字符。
需要注意的是：
对HTML标签是剔除不是解析，也不会出现CSS解析和渲染的处理，因此<br/>等元素是不生效的。
不会剔除格式信息和合并连续的空格，因此\t、\r、\n和连续的空格将生效

例子

    <p id="source">
        <style>
            #source {
                color: red;
            }
        </style>
        Take a look at<br>how this text<br>is interpreted
        below.
        <span style="display:none">HIDDEN TEXT</span>
    </p>
    
     <h3>Result of textContent:</h3>
    <textarea id="textContentOutput" rows="12" cols="50" readonly>...</textarea>
    <h3>Result of innerText:</h3>
    <textarea id="innerTextOutput" rows="12" cols="50" readonly>...</textarea>

    <script>
        const source = document.getElementById('source');
        const textContentOutput = document.getElementById('textContentOutput');
        const innerTextOutput = document.getElementById('innerTextOutput');

        textContentOutput.innerHTML = source.textContent;
        innerTextOutput.innerHTML = source.innerText;
    </script>

看看结果：

image.png

总结

innerText是会解析css的，<br/>有效，剔除格式信息（如\t、\r、\n等），将多个连续的空格合并为一个。
textContent是剔除html标签，<br/>无效，\t、\r、\n和连续的空格将生效。

节点取值 `value` , `nodeValue`

Node.nodeValue^[10]

对于text, comment, 和 CDATA 节点来说, nodeValue返回该节点的文本内容.
对于 attribute 节点来说, 返回该属性的属性值.

对应着下面表格的 nodeType的值 text 3,4,8

常量	nodeType 值	描述
Node.ELEMENT_NODE	1	一个元素节点，例如和
Node.TEXT_NODE	3	Element 或者 Attr 中实际的文字
Node.CDATA_SECTION_NODE	4	一个 CDATASection，例如 <!CDATA[[ … ]]>。
Node.PROCESSING_INSTRUCTION_NODE	7	一个用于XML文档的 ProcessingInstruction (en-US) ，例如声明。
Node.COMMENT_NODE	8	一个 Comment 节点。
Node.DOCUMENT_NODE	9	一个 Document 节点。
Node.DOCUMENT_TYPE_NODE	10	描述文档类型的 DocumentType 节点。例如就是用于 HTML5 的。
Node.DOCUMENT_FRAGMENT_NODE	11	一个 DocumentFragment 节点

value

特定的一些HTMLElement元素，用value属性获取其值。常见的有value属性的元素如下：

HTMLInputElement^[11] <input value="1" />
HTMLTextAreaElement^[12] <textarea value= "你哈" />
HTMLButtonElement^[13] <button value= "提交" />
HTMLDataElement^[14] <data value="21053">圣女果</data>
HTMLSelectElement^[15] <select><option value ="volvo">Volvo</option>
HTMLOptionElement^[16] <select><option value ="volvo">Volvo</option>
HTMLParamElement^[17]

<object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="Slider1" width="100" height="50">    
     <param name="BorderStyle" value="1" />
</object>

HTMLProgressElement^[18] <progress value="22" max="100"></progress>

总结

nodeValue 是文本节点，属性节点，注释节点等类型的节点用来取值的方法
vlaue是特定的元素节点用来取值的方法

节点复制 `adoptNode`, `importNode`, `cloneNode`

Document.adoptNode^[19]

将外部文档的一个节点拷贝一份,然后可以把这个拷贝的节点插入到当前文档中.

Document.importNode^[20]

从其他的document文档中获取一个节点。该节点以及它的子树上的所有节点都会从原文档删除 , 并且它的ownerDocument 属性会变成当前的document文档。之后你可以把这个节点插入到当前文档中。

Node.cloneNode^[21]

生成节点的一个副本。

实际上 Document 是继承自 Node，也具备cloneNode方法。

这里提一个问题：
Document.adoptNode与Document.importNode是操作外部文档的，那么操作所在的文档会有什么效果呢？

Node.cloneNode 有一个boolean类型的可选参数deep：

true: 则该节点的所有后代节点也都会被克隆
false: 则只克隆该节点本身.

注意

cloneNode deep参数在不同版本的浏览器实现中，默认值可能不一样，所以强烈建议写上值。
cloneNode 会克隆一个元素节点会拷贝它所有的属性以及属性值,当然也就包括了属性上绑定的事件(比如onclick="alert(1)"),但不会拷贝那些使用addEventListener()方法或者node.onclick = fn这种用JavaScript动态绑定的事件

总结

adoptNode 从外部文档进行拷贝
importNode 从外部文档进行拷贝，并从外部文档删除
cloneNode 从本文档进行复制，有浅复制和深复制

父节点 `childNodes` , `children`

Node.childNodes^[22]

节点的子节点集合，包括元素节点、文本节点还有属性节点

ParentNode.children^[23]

返回的只是节点的元素节点集合, 即 nodeType为1的节点。

例子

来实际看一段代码：

    <div id="root">
        1
        <span>2</span>
        3
        <!-- <div></div> -->
        <!CDATA[[ 4 ]]>
    </div>

    <script>
        const rootEl = document.getElementById("root");
        console.log(rootEl.children);
        console.log(rootEl.childNodes);
    </script>

返回结果截图：

Node.parentNode与Node.parentElement也是同样的道理。

总结

children只返回元素节点，也就是 nodeType为1的节点
childNodes 返回所有类型的节点

添加节点 `append`, `appendChild`

node.appendChild^[24]

将一个节点附加到指定父节点的子节点列表的末尾处

ParentNode.append^[25]

方法在 ParentNode的最后一个子节点之后插入一组 Node 对象或 DOMString 对象。被插入的 DOMString 对象等价为 Text 节点.

例子

我们一次append三个节点，其中两个文本节点，一个div节点。

  <div id="root"></div>
  <script>
    function createEl(type, innerHTML){
        const el = document.createElement(type);
        el.innerHTML = innerHTML;
        return el;
    }
    const rootEl = document.getElementById("root");

    rootEl.append("我们", createEl("div", "都是"), "好孩子");
  </script>

image.png

总结

ParentNode.append()允许追加 DOMString 对象，而 Node.appendChild() 只接受 Node 对象。
ParentNode.append() 没有返回值，而 Node.appendChild() 返回追加的 Node 对象。
ParentNode.append() 可以追加多个节点和字符串，而 Node.appendChild() 只能追加一个节点。

简直说， append强大太多了。

文档可见状态 `Document.hidden`, `Document.visibilityState`

document.hidden^[26]

返回布尔值，表示页面是（true）否（false）隐藏。

Document.visibilityState^[27]

返回document的可见性, 由此可以知道当前文档(即为页面)是在背后, 或是不可见的隐藏的标签页，或者(正在)预渲染.可用的值如下：

'visible' : 此时页面内容至少是部分可见. 即此页面在前景标签页中，并且窗口没有最小化.
'hidden' : 此时页面对用户不可见. 即文档处于背景标签页或者窗口处于最小化状态，或者操作系统正处于 '锁屏状态' .
'prerender' : 页面此时正在渲染中, 因此是不可见的 . 文档只能从此状态开始，永远不能从其他值变为此状态 .注意: 浏览器支持是可选的.

当此属性的值改变时, 会递交 visibilitychange 事件给Document.

例子

我们先输出当前状态，然后点击别的tab,等下再点击回来。

      console.log(
        "visibilityState:",
        document.visibilityState,
        " hidden:",
        document.hidden,
      );
      console.log("");
      document.addEventListener("visibilitychange", function () {
        console.log(
          "visibilityState:",
          document.visibilityState,
          " hidden:",
          document.hidden
        );
      });

image.png

我们日常可以用visibilitychange来监听当前页面处于隐藏时，去清除定时器或页面中的动画, 停止音乐视频等的播放。

我还想到一个有意思的

广告倒计时你离开后，不算倒计时，会不会被骂死
阅读某些协议你离开后，停止倒计时

总结

hidden 与 visibilityState 返回值不同，一个是布尔值，一个是字符串
visibilityState 的状态多一种 prerender, 其对应的hidden的值是true
visibilityState e有相关的事件

函数调用 `call`, `apply`, `bind`

Function.prototype.call^[28]

使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数

Function.prototype.apply^[29]

调用一个具有给定this值的函数，以及以一个数组（或类数组对象）的形式提供的参数

Function.prototype.bind^[30]

方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用

例子

function sum(...args) {
    const total = args.reduce((s, cur) => {
        return s + cur;
    }, 0);

    return (this.base || 0) + total;
}

const context = {
    base: 1000
};

const bindFun = sum.bind(context, 1, 2);

const callResult = sum.call(context, 1, 2, 3, 4);
const applyResult = sum.apply(context, [1, 2, 3, 4]);
const bindResult = bindFun(3, 4);


console.log("call:", callResult);  // 1010
console.log("apply:", applyResult); // 1010 
console.log("bind:", bindResult); // 1010

总结

相同点，都能改变被调用函数的this指向。

call: 第二个参数开始，可以接收任意个参数
apply: 第二个参数，必须是数组或者类数组
bind: 第二个参数开始，可以接收任意个参数 , 返回的是一个新的函数

注意点：

bind调用多次，this指向第一次第一个参数

log 调用了两次bind, 第一次bind{ val: 1 }, 第二次bind{ val: 2 }, 输出的this是一次bind的上下文

function log() {
    console.log("this", this);
}
console.log(log.bind({ val: 1 }).bind({ val: 2 })())  // { val: 1 }

再看一段类似的代码：
虽然this的指向不会再变改变，但是参数还是继续接受， arguments 长度为2，第一次bind的1，第二次bind的 2 , 都照单全收。


function log() {
    console.log("this", this);   // { val: 1 }
    console.log("arguments", arguments);  // { '0': 1, '1': 2 }
}

console.log(log.bind({ val: 1 }, 1).bind({ val: 2 }, 2)())  // 1

字符串截取 `substr`, `substring`

String.prototype.substr^[31]

返回一个字符串中从指定位置开始到指定字符数的字符

语法：第二参数，是需要截取的长度

str.substr(start[, length])

String.prototype.substring^[32]

返回一个字符串在开始索引到结束索引之间的一个子集, 或从开始索引直到字符串的末尾的一个子集。

语法：第二参数，结束索引

str.substring(indexStart[, indexEnd])

例子

提示：

两个参数都没设置的时候，效果相同
第一个参数是大于等于0的整数，没设置第二参数的时候，效果相同

const str = "我们都是好孩子";

console.log(str.substr())  // 我们都是好孩子
console.log(str.substring()) // 我们都是好孩子

console.log(str.substr(1))  // 们都是好孩子
console.log(str.substring(1)) // 们都是好孩子

console.log(str.substr(-1))  // 子
console.log(str.substring(-1)) // 我们都是好孩子

console.log(str.substr(1, 2))  // 们都
console.log(str.substring(1, 2))  // 们

总结

substr 第二个参数是需要截取的长度
substring 第二个参数是结束索引值的
没指定参数或者第一个参数是大于等于0的整数时，效果相同
第一个参数是负数或者第二个参数是负数，处理规则不通具体参见 substr^[33]和 substring^[34]

遍历 `for of`, `for in`

for in

获取enumerable:true的属性键

for of

遍历属性值。不受到enumerable限制。

例子

在数组原型上增加了方法gogo, for in结果中出现了，而 for of结果冲未出现。
定义了属性2不能被遍历， for in结果中未出现，而 for of结果中出现了。

// 原型上增加方法
Array.prototype.gogo = function(){
    console.log("gogo");
}

var a = [1,2,3];

// key值2不可以枚举
Object.defineProperty(a, 2, {
    enumerable: false
});
Object.defineProperty(a, "2", {
    enumerable: false
});

for(let p in a){
    // 索引被遍历出来是字符串类型
    console.log(p, typeof p); // 0 string; 1 string; gogo string
}

console.log("---")

for(let v of a){
    console.log(v);  // 1 2 3
}

总结

for in

获取enumerable:true的属性键。
可以遍历对象。
可以获取原型上的属性键。
数字属性键被遍历出来是字符串。比如索引值

for of：

遍历属性值。不受到enumerable限制。
可遍历数组。一般不可以遍历对象，如果实现了Symbol.iterator，可以遍历。如Array，Map，Set，String，TypedArray，arguments 对象等等
不能获取原型上的值

当前时间 `Date.now()`, `Performance.now()`

Date.now()^[35]

方法返回自 1970 年 1 月 1 日 00:00:00 (UTC) 到当前时间的毫秒数。

Performance.now^[36]

获取当前的时间戳的值（自创建上下文以来经过的时间），其值是一个精确到毫秒的 DOMHighResTimeStamp^[37].

<!DOCTYPE html>
<html lang="en">

<head>
    <script>
        console.log("p1", performance.now())
    </script>
</head>

<body>

    <script>
        console.log("p2", performance.now());

        setTimeout(() => {
            console.log("p3", performance.now());
        }, 1000)
    </script>
</body>

</html>

image.png

总结

Date.now()的基准是 1970 年 1 月 1 日 00:00:00 (UTC), 而Performance.now是上下文创建。
Date.now()返回的是整数，Performance.now返回的是double类型
理论上Performance.now精度更高

域名信息 `host`, `hostname`

location.host^[38]

其包含：主机名，如果 URL 的端口号是非空的，还会跟上一个 ':' ，最后是 URL 的端口号

location.hostname

返回域名

例子

https与http的默认端口号，是不会被 host包含的，看下面的代码

https://developer.mozilla.org:443 的host是 developer.mozilla.org, 因为443是https的默认端口。

      var anchor = document.createElement("a");

      anchor.href = "https://developer.mozilla.org:443/en-US/Location.host";      
      console.log(anchor.host == "developer.mozilla.org:443") // false
      console.log(anchor.host == "developer.mozilla.org") // true

      console.log(anchor.hostname == "developer.mozilla.org:443"); // false
      console.log(anchor.hostname == "developer.mozilla.org");  // true

      anchor.href = "https://developer.mozilla.org:4097/en-US/Location.host";
      console.log(anchor.host == "developer.mozilla.org:4097")  // true
      console.log(anchor.hostname == "developer.mozilla.org")  // true

总结

默认端口下， host等于hostname
host额外包含端口号

事件注册 `on`, `addEventListener`

内联事件

注册事件。

EventTarget.addEventListener^[39]

方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。

例子

分别注册两次onclick和click事件，onclick只输出一次，click输出两次.

   <button id="btn" >点我</button>

    <script>

        const btnEl = document.getElementById("btn");

        btnEl.onclick = () => console.log("onclick", 1);
        btnEl.onclick = () => console.log("onclick", 1);

        btnEl.addEventListener("click", ()=> console.log("click", 1));
        btnEl.addEventListener("click", ()=> console.log("click", 2));

    </script>

image.png

总结

内联事件是覆盖型，只能使用事件冒泡，addEventListener支持多个事件处理程序，并支持事件捕获。
内联事件特定情况下可以被Node.cloneNode复制，addEventListener的不行
更多细节参见 Node.cloneNode^[40]
addEventListener为DOM2级事件绑定，onclick为DOM0级事件绑定

按键时间 `keypress`, `keydown`

keypress^[41]

当按下产生字符值的键时触发按键事件。产生字符值的键的示例有字母键、数字键和标点键。不产生字符值的键的例子是修改键，如 Alt、 Shift、 Ctrl 或 Meta。

不再推荐使用此功能。尽管一些浏览器可能仍然支持它，但它可能已经从相关的 web 标准中删除

keydown^[42]

与keypress事件不同，无论是否生成字符值，所有键都会触发 keydown 事件。

例子

输入123，keydown和keypress的值keyCode一样

image.png

总结

触发顺序keydown -> keypress
keydown：当用户按下键盘上的任意键时触发；
keypress：当用户按下键盘上的字符键时触发；对中文输入法支持不好，无法响应中文输入
keypress的keyCode与keydown不是很一致；

异步加载脚本 `defer`,`async`

defer

异步加载，按照加载顺序执行脚本的

async

异步加载，乱序执行脚本。

这个一图胜千文

image.png

例子

四个script标签，两个async，两个defer。
代码内容如下：

async1：console.log("async1");
async2：console.log("async2");
defer1：console.log("defer1");
defer2：console.log("defer2");

    <script src="./async1.js" async ></script>
    <div>
        sdfsdfsdfsdfsdfsdfd
    </div>
    <script src="./async2.js" async ></script>

    <script src="./defer1.js" defer ></script>
    <script src="./defer2.js" defer ></script>

image.png

从上面可以看出，有时候 async2会比async1输出早，defer的输出也可能比async的输出早。但是defer的输出一定 defer1然后defer2

总结

都是异步加载，defer会按照加载顺序执行，async乱序执行

JS魔法堂：被玩坏的innerHTML、innerText、textContent和value属性^[43]
keydown,keypress,keyup三者之间的区别^[44]

参考资料

[1]

那些你熟悉而又陌生的函数: https://juejin.cn/post/6977239278145241101

[2]

Object.keys: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

[3]

Object.getOwnPropertyNames: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames

[4]

Object.getOwnPropertySymbols: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols

[5]

Reflect.ownKeys: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect/ownKeys

[6]

Node.compareDocumentPosition: https://developer.mozilla.org/zh-CN/docs/Web/API/Node/compareDocumentPosition

[7]

Node.contains: https://developer.mozilla.org/zh-CN/docs/Web/API/Node/contains

[8]

HTMLElement.innerText: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText

[9]

Node.textContent: https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent

[10]

Node.nodeValue: https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeValue

[11]

HTMLInputElement: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

[12]

HTMLTextAreaElement: https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement

[13]

HTMLButtonElement: https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement

[14]

HTMLDataElement: https://developer.mozilla.org/en-US/docs/Web/API/HTMLDataElement

[15]

HTMLSelectElement: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement

[16]

HTMLOptionElement: https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement

[17]

HTMLParamElement: https://developer.mozilla.org/en-US/docs/Web/API/HTMLParamElement

[18]

HTMLProgressElement: https://developer.mozilla.org/en-US/docs/Web/API/HTMLProgressElement

[19]

Document.adoptNode: https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptNode

[20]

Document.importNode: https://developer.mozilla.org/en-US/docs/Web/API/Document/importNode

[21]

Node.cloneNode: https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode

[22]

Node.childNodes: https://developer.mozilla.org/zh-CN/docs/Web/API/Node/childNodes

[23]

ParentNode.children: https://developer.mozilla.org/zh-CN/docs/orphaned/Web/API/ParentNode/children

[24]

node.appendChild: https://developer.mozilla.org/zh-CN/docs/Web/API/Node/appendChild

[25]

ParentNode.append: https://developer.mozilla.org/zh-CN/docs/orphaned/Web/API/ParentNode/append

[26]

document.hidden: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/hidden

[27]

Document.visibilityState: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/visibilityState

[28]

Function.prototype.call: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call

[29]

Function.prototype.apply: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

[30]

Function.prototype.bind: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

[31]

String.prototype.substr: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/substr

[32]

String.prototype.substring: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/substring

[33]

substr: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/substr#description

[34]

substring: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/substring#descriptio

[35]

Date.now(): https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/now

[36]

Performance.now: https://developer.mozilla.org/zh-CN/docs/Web/API/Performance/now

[37]

DOMHighResTimeStamp: https://developer.mozilla.org/zh-CN/docs/Web/API/DOMHighResTimeStamp

[38]

location.host: https://developer.mozilla.org/zh-CN/docs/Web/API/Location/host

[39]

EventTarget.addEventListener: https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener

[40]

Node.cloneNode: https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode

[41]

keypress: https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event

[42]

keydown: https://developer.mozilla.org/en-US/docs/Web/API/Document/keydown_event

[43]

JS魔法堂：被玩坏的innerHTML、innerText、textContent和value属性: https://www.cnblogs.com/fsjohnhuang/p/4319635.html

[44]

keydown,keypress,keyup三者之间的区别: https://www.cnblogs.com/mq0036/p/10416717.html

- EOF -

推荐阅读点击标题可跳转

1、toFixed 函数引起的 bug

2、Node.js 中的异步 Generator 函数和 Websockets

3、巩固一下 JS 可选 (?.)操作符号，原来函数也可以用可选写法，又学到了！

觉得本文对你有帮助？请分享给更多人

推荐关注「前端大全」，提升前端技能

点赞和在看就是最大的支持❤️

继续滑动看下一个

前端大全

向上滑动看下一个

常德悲剧：让谴责无差别杀戮之声更加响亮一点

魏加宁：日本之所以能走出“大衰退”，靠的是不断改革，而不是所谓“积极的财政政策”

泪目！8死17伤！江苏一职校持刀伤人案，背后隐情令人心惊！

突发！宜兴一学校发生持刀伤人案件！致8死17伤！太恶劣了！

一小学门口突发！多名学生被撞伤！

生成图片，分享到微信朋友圈

这16种原生函数和属性的区别，你真的知道吗？

前言

属性获取 keys, getOwnPropertyNames, getOwnPropertySymbols

Object.keys[2]

Object.getOwnPropertyNames[3]

Object.getOwnPropertySymbols[4]

Reflect.ownKeys[5]

例子

总结

节点位置关系 Node.contains, Node.compareDocumentPosition

Node.compareDocumentPosition[6]

Node.contains[7]

总结

取文本 innerText, textContent

HTMLElement.innerText[8]

Node.textContent[9]

例子

总结

节点取值 value , nodeValue

Node.nodeValue[10]

value

总结

节点复制 adoptNode, importNode, cloneNode

Document.adoptNode[19]

Document.importNode[20]

Node.cloneNode[21]

总结

父节点 childNodes , children

Node.childNodes[22]

ParentNode.children[23]

例子

总结

添加节点 append, appendChild

node.appendChild[24]

ParentNode.append[25]

例子

总结

文档可见状态 Document.hidden, Document.visibilityState

document.hidden[26]

Document.visibilityState[27]

例子

总结

函数调用 call, apply, bind

Function.prototype.call[28]

Function.prototype.apply[29]

Function.prototype.bind[30]

例子

总结

字符串截取 substr, substring

String.prototype.substr[31]

String.prototype.substring[32]

例子

总结

遍历 for of, for in

for in

for of

例子

总结

当前时间 Date.now(), Performance.now()

Date.now()[35]

Performance.now[36]

总结

域名信息 host, hostname

location.host[38]

location.hostname

例子

总结

事件注册 on, addEventListener

内联事件

EventTarget.addEventListener[39]

例子

总结

按键时间 keypress, keydown

keypress[41]

属性获取 `keys`, `getOwnPropertyNames`, `getOwnPropertySymbols`

Object.keys^[2]

Object.getOwnPropertyNames^[3]

Object.getOwnPropertySymbols^[4]

Reflect.ownKeys^[5]

节点位置关系 `Node.contains`, `Node.compareDocumentPosition`

Node.compareDocumentPosition^[6]

Node.contains^[7]

取文本 `innerText`, `textContent`

HTMLElement.innerText^[8]

Node.textContent^[9]

节点取值 `value` , `nodeValue`

Node.nodeValue^[10]

节点复制 `adoptNode`, `importNode`, `cloneNode`

Document.adoptNode^[19]

Document.importNode^[20]

Node.cloneNode^[21]

父节点 `childNodes` , `children`

Node.childNodes^[22]

ParentNode.children^[23]

添加节点 `append`, `appendChild`

node.appendChild^[24]

ParentNode.append^[25]

文档可见状态 `Document.hidden`, `Document.visibilityState`

document.hidden^[26]

Document.visibilityState^[27]

函数调用 `call`, `apply`, `bind`

Function.prototype.call^[28]

Function.prototype.apply^[29]

Function.prototype.bind^[30]

字符串截取 `substr`, `substring`

String.prototype.substr^[31]

String.prototype.substring^[32]

遍历 `for of`, `for in`

当前时间 `Date.now()`, `Performance.now()`

Date.now()^[35]

Performance.now^[36]

域名信息 `host`, `hostname`

location.host^[38]

事件注册 `on`, `addEventListener`

EventTarget.addEventListener^[39]

按键时间 `keypress`, `keydown`

keypress^[41]

keydown^[42]

异步加载脚本 `defer`,`async`