函数定义

JavaScript 使用关键字 function 定义函数。 函数可以通过声明定义，也可以是一个表达式。

函数声明

在之前的教程中，你已经了解了函数声明的语法 :

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

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

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

函数表达式

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);

函数提升（Hoisting）

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

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

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

自调用函数

函数表达式可以"自调用"。
自调用表达式会自动调用。
如果表达式后面紧跟 () ，则会自动调用。
不能自调用声明的函数。
通过添加括号，来说明它是一个函数表达式：
实例

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

函数参数

JavaScript 函数对参数的值没有进行任何的检查。

函数显式参数(Parameters)与隐式参数(Arguments)

在先前的教程中，我们已经学习了函数的显式参数:
functionName(parameter1, parameter2, parameter3) { // 要执行的代码…… }
函数显式参数在函数定义时列出。
函数隐式参数在函数调用时传递给函数真正的值。

参数规则

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

默认参数

ES5 中如果函数在调用时未提供隐式参数，参数会默认设置为： undefined
有时这是可以接受的，但是建议最好为参数设置一个默认值：

实例(ES5)

function myFunction(x, y) { 
    if (y === undefined) {
        y = 0;
    }  
}

ES6 函数可以自带参数

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

默认参数实例（ES6）

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

ES6 arguments 对象

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

ES6 实例

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 函数有 4 种调用方式。
每种方式的不同在于 this 的初始化。

this关键字

一般而言，在Javascript中，this指向函数执行时的当前对象。

E调用 JavaScript 函数

在之前的章节中我们已经学会了如何创建函数。
函数中的代码在函数被调用后执行。

作为一个函数调用

实例

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

以上函数不属于任何对象。但是在 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

全局对象

当函数没有被自身的对象调用时 this 的值就会变成全局对象。
在 web 浏览器中全局对象是浏览器窗口（window 对象）。
该实例返回 this 的值是 window 对象:
实例

function myFunction() {    
    return this; 
} 
myFunction();   
// 返回 window 对象

函数作为方法调用

在 JavaScript 中你可以将函数定义为对象的方法。
以下实例创建了一个对象 (myObject), 对象有两个属性 (firstName 和 lastName), 及一个方法 (fullName):
实例

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

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

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

使用构造函数调用函数

如果函数调用前使用了 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"

HTML DOM

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

HTML DOM (文档对象模型)

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

HTML DOM 树

通过可编程的对象模型，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");

通过标签名查找 HTML 元素

本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有

元素：
实例

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

通过类名找到 HTML 元素

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

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

HTML DOM 教程

在本教程接下来的篇幅中，您将学到：

• 如何改变 HTML 元素的内容 (innerHTML)
• 如何改变 HTML 元素的样式 (CSS)
• 如何对 HTML DOM 事件做出反应
• 如何添加或删除 HTML 元素

HTML DOM - 改变 HTML

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

改变 HTML 输出流

JavaScript 能够创建动态的 HTML 内容：
今天的日期是： Mon Jul 12 2021 22:05:31 GMT+0800 (中国标准时间)
在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。
实例

<!DOCTYPE html>
    <html>
    <body>
        <script>
            document.write(Date());
        </script>
    </body>
</html>

改变 HTML 内容

修改 HTML 内容的最简单的方法是使用 innerHTML 属性。
如需改变 HTML 元素的内容，请使用这个语法：

    document.getElementById(id).innerHTML=新的HTML

本例改变了 <p>元素的内容：
实例

<html>
    <body>
        <p id="p1">Hello World!</p>
        <script>
            document.getElementById("p1").innerHTML="新文本!";
        </script>
    </body>
</html>

实例

<!DOCTYPE html>
<html>
    <body>
        <h1 id="header">Old Header</h1>
        <script>
            var element=document.getElementById("header");
            element.innerHTML="新标题";
        </script>
    </body>
</html>

JavaScript HTML DOM - 改变CSS

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

改变 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>

使用事件

HTML DOM 允许我们通过触发事件来执行代码。
比如以下事件：

• 元素被点击。
• 页面加载完成。
• 输入框被修改。
• ……

在接下来的章节，你会学到更多关于事件的知识。
本例改变了 id="id1" 的 HTML 元素的样式，当用户点击按钮时：
实例

HTML DOM 事件

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

对事件做出反应

我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：

onclick=JavaScript

HTML 事件的例子：

• 当用户点击鼠标时
• 当网页已加载时
• 当图像已加载时
• 当鼠标移动到元素上时
• 当输入字段被改变时
• 当提交 HTML 表单时
• 当用户触发按键时

在本例中，当用户在 <h1> 元素上点击时，会改变其内容：
实例

<!DOCTYPE html>
<html>
    <body>
        <h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
    </body>
</html>

HTML 事件属性

如需向 HTML 元素分配 事件，您可以使用事件属性。
实例

向 button 元素分配 onclick 事件：

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

使用 HTML DOM 来分配事件

HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件：
实例

向 button 元素分配 onclick 事件：

<script>
    document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

onload 和 onunload 事件

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

<body onload="checkCookies()">

onchange 事件

onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。
实例

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

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")。
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

向原元素添加事件句柄

实例

当用户点击元素时弹出 "Hello World!" :

element.addEventListener("click", function(){ alert("Hello World!"); });

实例

当用户点击元素时弹出 "Hello World!" :

element.addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}

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

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

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

向 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 DOM 元素 (节点)

本章节介绍如何向文档中添加和移除元素(节点)。

创建新的 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>

HTML DOM 教程

在我们的 JavaScript 教程的 HTML DOM 部分，您已经学到了：

• 如何改变 HTML 元素的内容 (innerHTML)
• 如何改变 HTML 元素的样式 (CSS)
• 如何对 HTML DOM 事件作出反应
• 如何添加或删除 HTML 元素

HTML DOM 集合(Collection)

本章节介绍 DOM 集合的使用。

HTMLCollection 对象

getElementsByTagName() 方法返回 HTMLCollection 对象。
HTMLCollection 对象类似包含 HTML 元素的一个数组。
以下代码获取文档所有的 <p> 元素：
实例

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

集合中的元素可以通过索引(以 0 为起始位置)来访问。
访问第二个 <p> 元素可以是以下代码:

y = x[1];

HTMLCollection 对象 length 属性

HTMLCollection 对象的 length 属性定义了集合中元素的数量。
实例

var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = myCollection.length;

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];

HTML DOM 节点列表

NodeList 对象是一个从文档中获取的节点列表 (集合) 。
NodeList 对象类似 HTMLCollection 对象。
一些旧版本浏览器中的方法（如：getElementsByClassName()）返回的是 NodeList 对象，而不是 HTMLCollection 对象。
所有浏览器的 childNodes 属性返回的是 NodeList 对象。 大部分浏览器的 querySelectorAll() 返回 NodeList 对象。
以下代码选取了文档中所有的 <p> 节点：
实例

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

NodeList 中的元素可以通过索引(以 0 为起始位置)来访问。
访问第二个 <p> 元素可以是以下代码:

y = myNodeList[1];

NodeList 对象 length 属性

NodeList 对象 length 属性定义了节点列表中元素的数量。
实例

var myNodelist = document.querySelectorAll("p"); document.getElementById("demo").innerHTML = myNodelist.length;

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()