JavaScript 学习笔记继续篇

2018-12-04 本文已影响16人蜂子fightting

JavaScript 函数定义

JavaScript 使用关键字 function 定义函数。
函数可以通过声明定义，也可以是一个表达式。
函数声明
在之前的教程中，你已经了解了函数声明的语法 :

function functionName(parameters) {
  执行的代码
}

函数声明后不会立即执行，会在我们需要的时候调用到。

function myFunction(a, b) {
    return a * b;
}

分号是用来分隔可执行JavaScript语句。
由于函数声明不是一个可执行语句，所以不以分号结束。

函数表达式

JavaScript 函数可以通过一个表达式定义。

函数表达式可以存储在变量中：

var x = function (a, b) {return a * b};

尝试一下 »

在函数表达式存储在变量后，变量也可作为一个函数使用：

var x = function (a, b) {return a * b};
var z = x(4, 3);

尝试一下 »

以上函数实际上是一个匿名函数 (函数没有名称)。
函数存储在变量中，不需要函数名称，通常通过变量名来调用。
上述函数以分号结尾，因为它是一个执行语句。

Function() 构造函数

在以上实例中，我们了解到函数通过关键字 function 定义。

函数同样可以通过内置的 JavaScript 函数构造器（Function()）定义。

var myFunction = new Function("a", "b", "return a * b");

var x = myFunction(4, 3);

尝试一下 »

实际上，你不必使用构造函数。上面实例可以写成：

var myFunction = function (a, b) {return a * b}

var x = myFunction(4, 3);

尝试一下 »
在 JavaScript 中，很多时候，你需要避免使用 new 关键字。

函数提升（Hoisting）

在之前的教程中我们已经了解了 "hoisting(提升)"。
提升（Hoisting）是 JavaScript 默认将当前作用域提升到前面去的的行为。
提升（Hoisting）应用在变量的声明与函数的声明。
因此，函数可以在声明之前调用：

myFunction(5);

function myFunction(y) {
    return y * y;
}

使用表达式定义函数时无法提升。

自调用函数

函数表达式可以 "自调用"。

自调用表达式会自动调用。

如果表达式后面紧跟 () ，则会自动调用。

不能自调用声明的函数。

通过添加括号，来说明它是一个函数表达式：

(function () {
    var x = "Hello!!";      // 我将调用自己
})();

尝试一下 »

以上函数实际上是一个 匿名自我调用的函数 (没有函数名)。

函数是对象

在 JavaScript 中使用 typeof 操作符判断函数类型将返回 "function" 。

但是JavaScript 函数描述为一个对象更加准确。

JavaScript 函数有属性和方法。

arguments.length 属性返回函数调用过程接收到的参数个数：

function myFunction(a, b) {
    return arguments.length;
}

尝试一下 »

toString() 方法将函数作为一个字符串返回:

function myFunction(a, b) {
    return a * b;
}

var txt = myFunction.toString();

箭头函数

ES6 新增了箭头函数。
箭头函数表达式的语法比普通函数表达式更简洁。

(参数1,  参数2,  …,  参数N)  =>  {  函数声明  }  (参数1,  参数2,  …,  参数N)  =>  表达式(单一)  // 相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }

当只有一个参数时，圆括号是可选的：

(单一参数)  =>  {函数声明}  单一参数  =>  {函数声明}

没有参数的函数应该写成一对圆括号:

()  =>  {函数声明}

// ES5 
 var  x = function(x, y)  {  return  x * y; }  
// ES6 
 const  x = (x, y) => x * y;

尝试一下 »

有的箭头函数都没有自己的 this。不适合顶一个 对象的方法。

当我们使用箭头函数的时候，箭头函数会默认帮我们绑定外层 this 的值，所以在箭头函数中 this 的值和外层的 this 是一样的。

箭头函数是不能提升的，所以需要在使用之前定义。

使用 const 比使用 var 更安全，因为函数表达式始终是一个常量。

如果函数部分只是一个语句，则可以省略 return 关键字和大括号 {}，这样做是一个比较好的习惯:

const  x = (x, y) => {  return  x * y  };

尝试一下 »

注意：IE11 及更早 IE 版本不支持箭头函数。

JavaScript 函数参数

JavaScript 函数对参数的值没有进行任何的检查。
函数显式参数(Parameters)与隐式参数(Arguments)
在先前的教程中，我们已经学习了函数的显式参数:

functionName(parameter1, parameter2, parameter3) {
    // 要执行的代码……
}

函数显式参数在函数定义时列出。
函数隐式参数在函数调用时传递给函数真正的值。

参数规则
JavaScript 函数定义显式参数时没有指定数据类型。
JavaScript 函数对隐式参数没有进行类型检测。
JavaScript 函数对隐式参数的个数没有进行检测。

ES6 函数可以自带参数

ES6 支持函数带有默认参数，就判断 undefined 和 || 的操作：

function  myFunction(x, y = 10)  {  
// y is 10 if not passed or undefined 
 return  x + y; }
  myFunction(0, 2)  // 输出 2 
 myFunction(5); // 输出 15, y 参数的默认值

尝试一下 »

Arguments 对象

JavaScript 函数有个内置的对象 arguments 对象。
argument 对象包含了函数调用的参数数组。
通过这种方式你可以很方便的找到最大的一个参数的值：

x = findMax(1, 123, 500, 115, 44, 88);
 
function findMax() {
    var i, max = arguments[0];
    
    if(arguments.length < 2) return max;
 
    for (i = 0; i < arguments.length; i++) {
        if (arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}

通过值传递参数
在函数中调用的参数是函数的隐式参数。

JavaScript 隐式参数通过值来传递：函数仅仅只是获取值。

如果函数修改参数的值，不会修改显式参数的初始值（在函数外定义）。

隐式参数的改变在函数外是不可见的。

通过对象传递参数
在JavaScript中，可以引用对象的值。

因此我们在函数内部修改对象的属性就会修改其初始的值。

修改对象属性可作用于函数外部（全局变量）。

修改对象属性在函数外是可见的。

JavaScript 函数调用

JavaScript 函数有 4 种调用方式。
每种方式的不同在于 this 的初始化。
this 关键字
一般而言，在Javascript中，this指向函数执行时的当前对象。

作为一个函数调用

function myFunction(a, b) {
    return a * b;
}
myFunction(10, 2);

以上函数不属于任何对象。但是在 JavaScript 中它始终是默认的全局对象。
在 HTML 中默认的全局对象是 HTML 页面本身，所以函数是属于 HTML 页面。
在浏览器中的页面对象是浏览器窗口(window 对象)。以上函数会自动变为 window 对象的函数。
myFunction() 和 window.myFunction() 是一样的：

function myFunction(a, b) {
    return a * b;
}
window.myFunction(10, 2);    // window.myFunction(10, 2) 返回 20

这是调用 JavaScript 函数常用的方法，但不是良好的编程习惯全局变量，方法或函数容易造成命名冲突的bug。

函数作为方法调用
在 JavaScript 中你可以将函数定义为对象的方法。

以下实例创建了一个对象 (myObject), 对象有两个属性 (firstName 和 lastName), 及一个方法 (fullName):

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();         // 返回 "John Doe"

fullName 方法是一个函数。函数属于对象。 myObject 是函数的所有者。
this对象，拥有 JavaScript 代码。实例中 this 的值为 myObject 对象。
测试以下！修改 fullName 方法并返回 this 值:

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this;
    }
}
myObject.fullName();          // 返回 [object Object] (所有者对象)

尝试一下 »

函数作为对象方法调用，会使得 this 的值成为对象本身。

使用构造函数调用函数

如果函数调用前使用了 new 关键字, 则是调用了构造函数。

这看起来就像创建了新的函数，但实际上 JavaScript 函数是重新创建的对象：

// 构造函数:
function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
}
 
// This    creates a new object
var x = new myFunction("John","Doe");
x.firstName;                             // 返回 "John"

构造函数的调用会创建一个新的对象。新对象会继承构造函数的属性和方法。
构造函数中 this 关键字没有任何的值。
this 的值在函数调用实例化对象(new object)时创建。

作为函数方法调用函数

在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。

call() 和 apply() 是预定义的函数方法。两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。

function myFunction(a, b) {
    return a * b;
}
myObject = myFunction.call(myObject, 10, 2);     // 返回 20

function myFunction(a, b) {
    return a * b;
}
myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray);  // 返回 20

两个方法都使用了对象本身作为第一个参数。两者的区别在于第二个参数： apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。

在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值，即使该参数不是一个对象。

在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。
通过 call() 或 apply() 方法你可以设置 this 的值, 且作为已存在对象的新方法调用。

this 是 JavaScript 语言的一个关键字。
它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。比如：

function test() {
    this.x = 1;
}

随着函数使用场合的不同，this 的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。

JavaScript 闭包

变量声明时如果不使用 var 关键字，那么它就是一个全局变量，即便它在函数内定义。

变量生命周期
全局变量的作用域是全局性的，即在整个JavaScript程序中，全局变量处处都在。
而在函数内部声明的变量，只在函数内部起作用。这些变量是局部变量，作用域是局部性的；函数的参数也是局部性的，只在函数内部起作用。

JavaScript 内嵌函数

所有函数都能访问全局变量。

实际上，在 JavaScript 中，所有函数都能访问它们上一层的作用域。

JavaScript 支持嵌套函数。嵌套函数可以访问上一层的函数变量。

该实例中，内嵌函数 plus() 可以访问父函数的 counter 变量：

function  add()  {  
       var  counter = 0;
       function  plus()  {counter += 1;} 
       plus(); 
       return  counter;
 }

尝试一下 »

JavaScript 闭包

还记得函数自我调用吗？该函数会做什么？

var  add = (function  ()  { 
    var  counter = 0; 
    return  function  ()  {return  counter += 1;}  
})(); 
add(); 
add();
 add(); 
// 计数器为 3

尝试一下 »
实例解析
变量 add 指定了函数自我调用的返回字值。
自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。
add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。

这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。
计数器受匿名函数的作用域保护，只能通过 add 方法修改。

以上代码可以用更清晰的表达如下：

function A() {
    var counter = 0;
    function B() {
        counter++;
    }
  return B;
}
var add = A();
add();
add();
add();
// 计数器为 3

详细理解请点击：让你分分钟理解 JavaScript 闭包

JavaScript HTML DOM

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

HTML DOM (文档对象模型)

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树：

HTML DOM 树

DOM HTML tree

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素

通常，通过 JavaScript，您需要操作 HTML 元素。
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML

通过 id 查找 HTML 元素
在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。

本例查找 id="intro" 元素：

var x=document.getElementById("intro");

如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。
如果未找到该元素，则 x 将包含 null。

通过标签名查找 HTML 元素
本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素：

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

** 通过类名找到 HTML 元素**

本例通过 getElementsByClassName 函数来查找 class="intro" 的元素：

var x=document.getElementsByClassName("intro");

尝试一下 »

改变 HTML 内容

修改 HTML 内容的最简单的方法是使用 innerHTML 属性。
如需改变 HTML 元素的内容，请使用这个语法：
document.getElementById(id).innerHTML=新的 HTML

改变 HTML 属性

如需改变 HTML 元素的属性，请使用这个语法：
document.getElementById(id).attribute=新属性值
本例改变了 <img> 元素的 src 属性：

<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>

尝试一下 »

实例讲解：

上面的 HTML 文档含有 id="image" 的 <img> 元素
我们使用 HTML DOM 来获得 id="image" 的元素
JavaScript 更改此元素的属性（把 "smiley.gif" 改为 "landscape.jpg"）

改变 HTML 样式

如需改变 HTML 元素的样式，请使用这个语法：

document.getElementById(id).style.property=新样式
下面的例子会改变 <p> 元素的样式：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
 
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通过脚本修改。</p>
 
</body>
</html>

JavaScript HTML DOM 事件

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

HTML 事件属性
如需向 HTML 元素分配事件，您可以使用事件属性。
向 button 元素分配 onclick 事件：

<button onclick="displayDate()">点这里</button>

onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

<body onload="checkCookies()">

尝试一下 »

onchange 事件

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

<input type="text" id="fname" onchange="upperCase()">

尝试一下 »

JavaScript HTML DOM EventListener

addEventListener() 方法
在用户点击按钮时触发监听事件：

document.getElementById("myBtn").addEventListener("click", displayDate);

addEventListener() 方法用于向指定元素添加事件句柄。

addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

你可以向一个元素添加多个事件句柄。

你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。

你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。

addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。

当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强，在没有控制HTML标记时也可以添加事件监听。

你可以使用 removeEventListener() 方法来移除事件的监听。

语法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
注意:不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。

向同一个元素中添加多个事件句柄

addEventListener() 方法允许向同一个元素添加多个事件，且不会覆盖已存在的事件：

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

尝试一下
你可以向同个元素添加不同类型的事件：

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

向 Window 对象添加事件句柄

addEventListener() 方法允许你在 HTML DOM 对象添加事件监听， HTML DOM 对象如： HTML 元素, HTML 文档, window 对象。或者其他支出的事件对象如: xmlHttpRequest 对象。
当用户重置窗口大小时添加事件监听：

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = *sometext*;
});

尝试一下 »

传递参数

当传递参数值时，使用"匿名函数"调用带参数的函数：

element.addEventListener("click", function(){ myFunction(p1, p2); });

尝试一下 »

事件冒泡或事件捕获？

事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？

在 *冒泡 *中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。

在 *捕获 *中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发，然后再触发 <p> 元素的点击事件。

addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：

addEventListener(*event*, *function*, *useCapture*);

默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

document.getElementById("myDiv").addEventListener("click", myFunction, true);

尝试一下 »

removeEventListener() 方法

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

element.removeEventListener("mousemove", myFunction);

尝试一下 »

创建新的 HTML 元素 (节点) - appendChild()

要创建新的 HTML 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加它。

<div  id="div1"> 
 <p  id="p1">这是一个段落。</p> 
 <p  id="p2">这是另外一个段落。</p>  
</div> 
<script>
var para = document.createElement("p"); 
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node); 
var element = document.getElementById("div1"); 
element.appendChild(para); 
</script>

尝试一下 »

创建新的 HTML 元素 (节点) - insertBefore()

以上的实例我们使用了 appendChild() 方法，它用于添加新元素到尾部。

如果我们需要将新元素添加到开始位置，可以使用 insertBefore() 方法:

<div  id="div1"> 
 <p  id="p1">这是一个段落。</p> 
 <p  id="p2">这是另外一个段落。</p> 
 </div>  
<script> 
var para = document.createElement("p"); 
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 var element = document.getElementById("div1"); 
var child = document.getElementById("p1"); 
element.insertBefore(para, child); 
</script>

尝试一下 »

移除已存在的元素

要移除一个元素，你需要知道该元素的父元素。

<div  id="div1"> 
 <p  id="p1">这是一个段落。
</p>  <p  id="p2">这是另外一个段落。</p>  
</div> 
<script>
 var parent = document.getElementById("div1"); 
var child = document.getElementById("p1"); 
parent.removeChild(child);
</script>

尝试一下 »

替换 HTML 元素 - replaceChild()

我们可以使用 replaceChild() 方法来替换 HTML DOM 中的元素。

<div  id="div1"> 
 <p  id="p1">这是一个段落。</p>  
<p  id="p2">这是另外一个段落。</p> 
 </div>  
<script> 
var para = document.createElement("p"); 
var node = document.createTextNode("这是一个新的段落。"); 
para.appendChild(node);
 var parent = document.getElementById("div1"); 
var child = document.getElementById("p1"); 
parent.replaceChild(para, child); 
</script>

尝试一下 »

HTMLCollection 对象

getElementsByTagName() 方法返回 HTMLCollection 对象。

HTMLCollection 对象类似 HTML 元素的一个数组。

以下代码获取文档所有的 <p> 元素：

var  x = document.getElementsByTagName("p");

集合中的元素可以通过索引(以 0 为起始位置)来访问。

访问第二个 <p> 元素可以是以下代码:

y = x[1];

尝试一下 »

注意
HTMLCollection 不是一个数组！

HTMLCollection 看起来可能是一个数组，但其实不是。

你可以像数组一样，使用索引来获取元素。

HTMLCollection 无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。

JavaScript HTML DOM 节点列表

NodeList 对象是一个从文档中获取的节点列表 (集合) 。

NodeList 对象类似 HTMLCollection 对象。

一些旧版本浏览器中的方法（如：getElementsByClassName()）返回的是 NodeList 对象，而不是 HTMLCollection 对象。

所有浏览器的 childNodes 属性返回的是 NodeList 对象。

大部分浏览器的 querySelectorAll() 返回 NodeList 对象。

以下代码选取了文档中所有的 <p> 节点：

var  myNodeList = document.querySelectorAll("p");

NodeList 中的元素可以通过索引(以 0 为起始位置)来访问。

访问第二个 <p> 元素可以是以下代码:

y = myNodeList[1];

尝试一下 »

HTMLCollection 与 NodeList 的区别

HTMLCollection 是 HTML 元素的集合。

NodeList 是一个文档节点的集合。

NodeList 与 HTMLCollection 有很多类似的地方。

NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, ...) 来获取元素。

NodeList 与 HTMLCollection 都有 length 属性。

HTMLCollection 元素可以通过 name，id 或索引来获取。

NodeList 只能通过索引来获取。

只有 NodeList 对象有包含属性节点和文本节点。

节点列表不是一个数组！

节点列表看起来可能是一个数组，但其实不是。

你可以像数组一样，使用索引来获取元素。

节点列表无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。

JavaScript 学习笔记继续篇

JavaScript 函数定义

函数表达式

Function() 构造函数

自调用函数

函数是对象

箭头函数

JavaScript 函数参数

ES6 函数可以自带参数

JavaScript 函数调用

使用构造函数调用函数

作为函数方法调用函数

JavaScript 闭包

JavaScript 内嵌函数

JavaScript 闭包

JavaScript HTML DOM

HTML DOM (文档对象模型)

HTML DOM 树

改变 HTML 内容

改变 HTML 属性

改变 HTML 样式

JavaScript HTML DOM 事件

onload 和 onunload 事件

onchange 事件

JavaScript HTML DOM EventListener

向同一个元素中添加多个事件句柄

向 Window 对象添加事件句柄

传递参数

事件冒泡或事件捕获？

removeEventListener() 方法

创建新的 HTML 元素 (节点) - appendChild()

创建新的 HTML 元素 (节点) - insertBefore()

移除已存在的元素

替换 HTML 元素 - replaceChild()

HTMLCollection 对象

JavaScript HTML DOM 节点列表

HTMLCollection 与 NodeList 的区别

猜你喜欢

热点阅读

JavaScript 学习笔记继续篇

JavaScript 函数定义

函数表达式

Function() 构造函数

自调用函数

函数是对象

箭头函数

JavaScript 函数参数

ES6 函数可以自带参数

JavaScript 函数调用

使用构造函数调用函数

作为函数方法 调用函数

JavaScript 闭包

JavaScript 内嵌函数

JavaScript 闭包

JavaScript HTML DOM

HTML DOM (文档对象模型)

HTML DOM 树

改变 HTML 内容

改变 HTML 属性

改变 HTML 样式

JavaScript HTML DOM 事件

onload 和 onunload 事件

onchange 事件

JavaScript HTML DOM EventListener

向同一个元素中添加多个事件句柄

向 Window 对象添加事件句柄

传递参数

事件冒泡或事件捕获？

removeEventListener() 方法

创建新的 HTML 元素 (节点) - appendChild()

创建新的 HTML 元素 (节点) - insertBefore()

移除已存在的元素

替换 HTML 元素 - replaceChild()

HTMLCollection 对象

JavaScript HTML DOM 节点列表

HTMLCollection 与 NodeList 的区别

猜你喜欢

热点阅读

作为函数方法调用函数