使用 JS 操作 HTML 元素

档对象模型(DOM)

JS 有很多地方让咱们吐槽，但没那么糟糕。作为一种在浏览器中运行的脚本语言，它对于处理web页面非常有用。在本中，我们将看到我们有哪些方法来交互和修改HTML文档及其元素。但首先让我们来揭开文档对象模型的神秘面纱。

文档对象模型是一个基本概念，它是咱们在浏览器中所做的一切工作的基础。但那到底是什么? 当咱们访问一个 web 页面时，浏览器会指出如何解释每个 HTML 元素。这样它就创建了 HTML 文档的虚拟表示，并保存在内存中。HTML 页面被转换成树状结构，每个 HTML 元素都变成一个叶子，连接到父分支。考虑这个简单的HTML 页面：

<!DOCTYPE html>
<html lang="en">
<head>
 <title>A super simple title!</title>
</head>
<body>
<h1>A super simple web page!</h1>
</body>
</html

当浏览器扫描上面的 HTML 时，它创建了一个文档对象模型，它是HTML结构的镜像。在这个结构的顶部有一个 document 也称为根元素，它包含另一个元素:html。html 元素包含一个 head，head 又有一个 title。然后是含有 h1的 body。每个 HTML 元素由特定类型(也称为接口)表示，并且可能包含文本或其他嵌套元素

document (HTMLDocument)
 |
 | --> html (HTMLHtmlElement)
 | 
 | --> head (HtmlHeadElement)
 | |
 | | --> title (HtmlTitleElement)
 | | --> text: "A super simple title!"
 |
 | --> body (HtmlBodyElement)
 | |
 | | --> h1 (HTMLHeadingElement)
 | | --> text: "A super simple web page!"

每个 HTML 元素都是从 Element 派生而来的，但是它们中的很大一部分是进一步专门化的。咱们可以检查原型，以查明元素属于什么“种类”。例如，h1 元素是 HTMLHeadingElement

document.quertSelector('h1').__proto__
// 输出：HTMLHeadingElement

HTMLHeadingElement 又是 HTMLElement 的“后代”

document.querySelector('h1').__proto__.__proto__
// Output: HTMLElement

Element 是一个通用性非常强的基类，所有 Document 对象下的对象都继承自它。这个接口描述了所有相同种类的元素所普遍具有的方法和属性。一些接口继承自 Element 并且增加了一些额外功能的接口描述了具体的行为。例如， HTMLElement 接口是所有 HTML 元素的基本接口，而 SVGElement 接口是所有 SVG 元素的基础。大多数功能是在这个类的更深层级（hierarchy）的接口中被进一步制定的。

在这一点上(特别是对于初学者)，document 和 window 之间可能有些混淆。window 指的是浏览器，而 document 指的是当前的 HTML 页面。window 是一个全局对象，可以从浏览器中运行的任何 JS 代码直接访问它。它不是 JS 的“原生”对象，而是由浏览器本身公开的。window 有很多属性和方法，如下所示：

window.alert('Hello world'); // Shows an alert
window.setTimeout(callback, 3000); // Delays execution
window.fetch(someUrl); // makes XHR requests
window.open(); // Opens a new tab
window.location; // Browser location
window.history; // Browser history
window.navigator; // The actual device
window.document; // The current page

由于这些属性是全局属性，因此也可以省略 window：

alert('Hello world'); // Shows an alert
setTimeout(callback, 3000); // Delays execution
fetch(someUrl); // makes XHR requests
open(); // Opens a new tab
location; // Browser location
history; // Browser history
navigator; // The actual device
document; // The current page

你应该已经熟悉其中的一些方法，例如 setTimeout()或 window.navigator，它可以获取当前浏览器使用的语言：

if (window.navigator) {
 var lang = window.navigator.language;
 if (lang === "en-US") {
 // show something
 }
 if (lang === "it-IT") {
 // show something else
 }
}

要了解更多 window 上的方法，请查看MDN文档。在下一节中，咱们深入地研究一下 DOM。

节点、元素和DOM 操作

document 接口有许多实用的方法，比如 querySelector()，它是用于选择当前 HTML 页面内的任何 HTML 元素：

document.querySelector('h1');

window 表示当前窗口的浏览器，下面的指令与上面的相同：

window.document.querySelector('h1');

不管怎样，下面的语法更常见，在下一节中咱们将大量使用这种形式：

document.methodName();

除了 querySelector() 用于选择 HTML 元素之外，还有很多更有用的方法

// 返回单个元素
document.getElementById('testimonials'); 
// 返回一个 HTMLCollection
document.getElementsByTagName('p'); 
// 返回一个节点列表
document.querySelectorAll('p');

咱们不仅可以选择HTML 元素，还可以交互和修改它们的内部状态。例如，希望读取或更改给定元素的内部内容：

// Read or write
document.querySelector('h1').innerHtml; // Read
document.querySelector('h1').innerHtml = ''; // Write! Ouch!

DOM 中的每个 HTML 元素也是一个“节点”，实际上咱们可以像这样检查节点类型：

document.querySelector('h1').nodeType;

上述结果返回 1，表示是 Element 类型的节点的标识符。咱们还可以检查节点名：

document.querySelector('h1').nodeName;
"H1"

这里，节点名以大写形式返回。通常我们处理 DOM 中的四种类型的节点

document: 根节点(nodeType 9)
类型为Element的节点：实际的HTML标签（nodeType 1）,例如 <p> 和 <div>
类型属性的节点：每个HTML元素的属性（属性）
Text 类型的节点:元素的实际文本内容(nodeType 3)

由于元素是节点，节点可以有属性(properties )(也称为attributes)，咱们可以检查和操作这些属性：

// 返回 true 或者 false
document.querySelector('a').hasAttribute('href');
// 返回属性文本内容，或 null
document.querySelector('a').getAttribute('href');
// 设置给定的属性
document.querySelector('a').setAttribute('href', 'someLink');

前面我们说过 DOM 是一个类似于树的结构。这种特性也反映在 HTML 元素上。每个元素都可能有父元素和子元素，我们可以通过检查元素的某些属性来查看它们:

// 返回一个 HTMLCollection
document.children;
// 返回一个节点列表
document.childNodes;
// 返回一个节点
document.querySelector('a').parentNode;
// 返回HTML元素
document.querySelector('a').parentElement;

了解了如何选择和查询 HTML 元素。那创建元素又是怎么样?为了创建 Element 类型的新节点，原生 DOM API 提供了 createElement 方法：

var heading = document.createElement('h1');

使用 createTextNode 创建文本节点：

var text = document.createTextNode('Hello world');

通过将 text 附加到新的 HTML 元素中，可以将这两个节点组合在一起。最后，还可以将heading元素附加到根文档中:

var heading = document.createElement('h1');
var text = document.createTextNode('Hello world');
heading.appendChild(text);
document.body.appendChild(heading);

还可以使用 remove() 方法从 DOM 中删除节点。在元素上调用方法，该节点将从页面中消失：

document.querySelector('h1').remove();

这些是咱们开始在浏览器中使用 JS 操作 DOM 所需要知道的全部内容。在下一节中，咱们将灵活地使用 DOM，但首先要绕个弯，因为咱们还需要讨论“DOM事件”。

DOM 和事件

DOM 元素是很智能的。它们不仅可以包含文本和其他 HTML 元素，还可以“发出”和响应“事件”。浏览任何网站并打开浏览器控制台。使用以下命令选择一个元素：

document.querySelector('p')

看看这个属性

document.querySelector('p').onclick

它是什么类型:

typeof document.querySelector('p').onclick // "object"

"object"! 为什么它被称为“onclick”? 凭一点直觉我们可以想象它是元素上的某种神奇属性，能够对点击做出反应? 完全正确。

如果你感兴趣，可以查看任何 HTML 元素的原型链。会发现每个元素也是一个 Element，而元素又是一个节点，而节点又是一个EventTarget。可以使用 instanceof 来验证这一点。

document.querySelector('p') instanceof EventTarget // true

我很乐意称 EventTarget 为所有 HTML 元素之父，但在JS中没有真正的继承，它更像是任何 HTML 元素都可以看到另一个连接对象的属性。因此，任何 HTML 元素都具有与 EventTarget相同的特性:发布事件的能力。

但事件到底是什么呢?以 HTML 按钮为例。如果你点击它，那就是一个事件。有了这个.onclick对象，咱们可以注册事件，只要元素被点击，它就会运行。传递给事件的函数称为“事件监听器”或“事件句柄”。

事件和监听

在 DOM 中注册事件监听器有三种方法。第一种形式比较陈旧，应该避免，因为它耦合了逻辑操作和标签

<!-- 不好的方式 -->
<button onclick="console.log('clicked')">喜欢，就点点我</button>

第二个选项依赖于以事件命名的对象。例如，咱们可以通过在对象.onclick上注册一个函数来监听click事件：

document.querySelector("button").onclick = handleClick;
function handleClick() {
 console.log("Clicked!");
}

此语法更加简洁，是内联处理程序的不错替代方案。还有另一种基于addEventListener的现代形式：

document.querySelector("button").addEventListener("click", handleClick);
function handleClick() {
 console.log("Clicked!");
}

就我个人而言，我更喜欢这种形式，但如果想争取最大限度的浏览器兼容性，请使用 .on 方式。现在咱们已经有了一个 HTML 元素和一个事件监听器，接着进一步研究一下 DOM 事件。

事件对象、事件默认值和事件冒泡

作为事件处理程序传递的每个函数默认接收一个名为“event”的对象

var button = document.querySelector("button");
button.addEventListener("click", handleClick);
function handleClick() {
 console.log(event);
}

它可以直接在函数体中使用，但是在我的代码中，我更喜欢将它显式地声明为参数：

function handleClick(event) {
 console.log(event);
}

事件对象是“必须要有的”，因为咱们可以通过调用事件上的一些方法来控制事件的行为。事件实际上有特定的特征，尤其是“默认”和“冒泡”。考虑一个HTML 链接。使用以下标签创建一个名为click-event.html的新HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Click event</title>
</head>
<body>
<div>
 <a href="/404.html">click me!</a>
</div>
</body>
<script src="click-event.js"></script>
</html>

在浏览器中运行该文件并尝试单击链接。它将跳转到一个404的界面。链接上单击事件的默认行为是转到href属性中指定的实际页面。但如果我告诉你有办法阻止默认值呢?输入preventDefault()，该方法可用于事件对象。使用以下代码创建一个名为click-event.js的新文件：

var button = document.querySelector("a");
button.addEventListener("click", handleClick);
function handleClick(event) {
 event.preventDefault();
}

在浏览器中刷新页面并尝试现在单击链接:它不会跳转了。因为咱们阻止了浏览器的“事件默认” 链接不是默认操作的惟一HTML 元素，表单具有相同的特性。

当 HTML 元素嵌套在另一个元素中时，还会出现另一个有趣的特性。考虑以下 HTML

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Nested events</title>
</head>
<body>
<div id="outer">
 I am the outer div
 <div id="inner">
 I am the inner div
 </div>
</div>
</body>
<script src="nested-events.js"></script>
</html>

和下面的 JS 代码：

// nested-events.js
var outer = document.getElementById('inner');
var inner = document.getElementById('outer');
function handleClick(event){
 console.log(event);
}
inner.addEventListener('click', handleClick);
outer.addEventListener('click', handleClick);

有两个事件监听器，一个用于外部 div，一个用于内部 div。准确地点击内部div，你会看到：

两个事件对象被打印。这就是事件冒泡在起作用。它看起来像是浏览器行为中的一个 bug，使用 stopPropagation() 方法可以禁用，这也是在事件对象上调用的

//
function handleClick(event) {
 event.stopPropagation();
 console.log(event);
}
///

尽管看起来实现效果很差，但在注册过多事件监听器确实对性能不利的情况下，冒泡还是会让人眼前一亮。考虑以下示例：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Event bubbling</title>
</head>
<body>
<ul>
 <li>one</li>
 <li>two</li>
 <li>three</li>
 <li>four</li>
 <li>five</li>
</ul>
</body>
<script src="event-bubbling.js"></script>
</html>

如果要兼听列表的点击事件，需要在列表中注册多少事件监听器?答案是:一个。只需要一个在ul上注册的侦听器就可以截获任何li上的所有单击:

// event-bubbling.js
var ul = document.getElementsByTagName("ul")[0];
function handleClick(event) {
 console.log(event);
}
ul.addEventListener("click", handleClick);

可以看到，事件冒泡是提高性能的一种实用方法。实际上，对浏览器来说，注册事件监听器是一项昂贵的操作，而且在出现大量元素列表的情况下，可能会导致性能损失。

用 JS 生成表格

现在咱们开始编码。给定一个对象数组，希望动态生成一个HTML 表格。HTML 表格由 <table> 元素表示。每个表也可以有一个头部，由 <thead> 元素表示。头部可以有一个或多个行 <tr>，每个行都有一个单元格，由一个 <th>元素表示。如下所示：

<table>
 <thead>
 <tr>
 <th>name</th>
 <th>height</th>
 <th>place</th>
 </tr>
 </thead>
 <!-- more stuff here! -->
</table>

不止这样，大多数情况下，每个表都有一个主体，由 <tbody> 定义，而 <tbody> 又包含一组行<tr>。每一行都可以有包含实际数据的单元格。表单元格由<td>定义。完整如下所示：

<table>
 <thead>
 <tr>
 <th>name</th>
 <th>height</th>
 <th>place</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>Monte Falco</td>
 <td>1658</td>
 <td>Parco Foreste Casentinesi</td>
 </tr>
 <tr>
 <td>Monte Falterona</td>
 <td>1654</td>
 <td>Parco Foreste Casentinesi</td>
 </tr>
 </tbody>
</table>

现在的任务是从 JS 对象数组开始生成表格。首先，创建一个名为build-table.html的新文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Build a table</title>
</head>
<body>
<table>
<!-- here goes our data! -->
</table>
</body>
<script src="build-table.js"></script>
</html>

在相同的文件夹中创建另一个名为build-table.js的文件，并使用以下数组开始：

"use strict";
var mountains = [
 { name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" },
 { name: "Monte Falterona", height: 1654, place: "Parco Foreste Casentinesi" },
 { name: "Poggio Scali", height: 1520, place: "Parco Foreste Casentinesi" },
 { name: "Pratomagno", height: 1592, place: "Parco Foreste Casentinesi" },
 { name: "Monte Amiata", height: 1738, place: "Siena" }
];

考虑这个表格。首先，咱们需要一个 <thead>：

document.createElement('thead')

这没有错，但是仔细查看MDN的表格文档会发现一个有趣的细节。<table> 是一个 HTMLTableElement，它还包含有趣方法。其中最有用的是HTMLTableElement.createTHead()，它可以帮助创建咱们需要的 <thead>。

首先，编写一个生成 thead 标签的函数 generateTableHead

function generateTableHead(table) {
 var thead = table.createTHead();
}

该函数接受一个选择器并在给定的表上创建一个 <thead>:

function generateTableHead(table) {
 var thead = table.createTHead();
}
var table = document.querySelector("table");
generateTableHead(table);

在浏览器中打开 build-table.html:什么都没有.但是，如果打开浏览器控制台，可以看到一个新的 <thead> 附加到表。

接着填充 header 内容。首先要在里面创建一行。还有另一个方法可以提供帮助:HTMLTableElement.insertRow()。有了这个，咱们就可以扩展方法了：

function generateTableHead (table) {
 var thead = table,createThead();
 var row = thead.insertRow();
}

此时，我们可以生成我们的行。通过查看源数组，可以看到其中的任何对象都有咱们需要信息：

var mountains = [
 { name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" },
 { name: "Monte Falterona", height: 1654, place: "Parco Foreste Casentinesi" },
 { name: "Poggio Scali", height: 1520, place: "Parco Foreste Casentinesi" },
 { name: "Pratomagno", height: 1592, place: "Parco Foreste Casentinesi" },
 { name: "Monte Amiata", height: 1738, place: "Siena" }
];

这意味着咱们可以将另一个参数传递给我们的函数:一个遍历以生成标题单元格的数组：

function generateTableHead(table, data) {
 var thead = table.createTHead();
 var row = thead.insertRow();
 for (var i = 0; i < data.length; i++) {
 var th = document.createElement("th");
 var text = document.createTextNode(data[i]);
 th.appendChild(text);
 row.appendChild(th);
 }
}

不幸的是，没有创建单元格的原生方法，因此求助于document.createElement("th")。同样值得注意的是，document.createTextNode(data[i])用于创建文本节点，appendChild()用于向每个标记添加新元素。

当以这种方式创建和操作元素时，我们称之为“命令式” DOM 操作。现代前端库通过支持“声明式”方法来解决这个问题。我们可以声明需要哪些 HTML 元素，而不是一步一步地命令浏览器，其余的由库处理。

回到我们的代码，可以像下面这样使用第一个函数

var table = document.querySelector("table");
var data = Object.keys(mountains[0]);
generateTableHead(table, data);

现在我们可以进一步生成实际表的数据。下一个函数将实现一个类似于generateTableHead的逻辑，但这一次咱们需要两个嵌套的for循环。在最内层的循环中，使用另一种原生方法来创建一系列td。方法是HTMLTableRowElement.insertCell()。在前面创建的文件中添加另一个名为generateTable的函数

function generateTable(table, data) {
 for (var i = 0; i < data.length; i++) {
 var row = table.insertRow();
 for (var key in data[i]) {
 var cell = row.insertCell();
 var text = document.createTextNode(data[i][key]);
 cell.appendChild(text);
 }
 }
}

调用上面的函数，将 HTML表和对象数组作为参数传递：

generateTable(table, mountains);

咱们深入研究一下 generateTable 的逻辑。参数 data 是一个与 mountains 相对应的数组。最外层的 for 循环遍历数组并为每个元素创建一行：

function generateTable(table, data) {
 for (var i = 0; i < data.length; i++) {
 var row = table.insertRow();
 // omitted for brevity
 }
}

最内层的循环遍历任何给定对象的每个键，并为每个对象创建一个包含键值的文本节点

function generateTable(table, data) {
 for (var i = 0; i < data.length; i++) {
 var row = table.insertRow();
 for (var key in data[i]) {
 // inner loop
 var cell = row.insertCell();
 var text = document.createTextNode(data[i][key]);
 cell.appendChild(text);
 }
 }
}

最终代码：

var mountains = [
 { name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" },
 { name: "Monte Falterona", height: 1654, place: "Parco Foreste Casentinesi" },
 { name: "Poggio Scali", height: 1520, place: "Parco Foreste Casentinesi" },
 { name: "Pratomagno", height: 1592, place: "Parco Foreste Casentinesi" },
 { name: "Monte Amiata", height: 1738, place: "Siena" }
];
function generateTableHead(table, data) {
 var thead = table.createTHead();
 var row = thead.insertRow();
 for (var i = 0; i < data.length; i++) {
 var th = document.createElement("th");
 var text = document.createTextNode(data[i]);
 th.appendChild(text);
 row.appendChild(th);
 }
}
function generateTable(table, data) {
 for (var i = 0; i < data.length; i++) {
 var row = table.insertRow();
 for (var key in data[i]) {
 var cell = row.insertCell();
 var text = document.createTextNode(data[i][key]);
 cell.appendChild(text);
 }
 }
}

其中调用：

var table = document.querySelector("table");
var data = Object.keys(mountains[0]);
generateTable(table, mountains);
generateTableHead(table, data);

执行结果：

当然，咱们的方法还可以该进，下个章节将介绍。

总结

DOM 是 web 浏览器保存在内存中的 web 页面的虚拟副本。DOM 操作是指从 DOM 中创建、修改和删除 HTML 元素的操作。在过去，咱们常常依赖 jQuery 来完成更简单的任务，但现在原生 API 已经足够成熟，可以让 jQuery 过时了。另一方面，jQuery 不会很快消失，但是每个 JS 开发人员都必须知道如何使用原生 API 操作 DOM。

这样做的理由有很多，额外的库增加了加载时间和 JS 应用程序的大小。更不用说 DOM 操作在面试中经常出现。

DOM 中每个可用的 HTML 元素都有一个接口，该接口公开一定数量的属性和方法。当你对使用何种方法有疑问时，参考MDN文档。操作 DOM 最常用的方法是 document.createElement()用于创建新的 HTML 元素，document.createTextNode() 用于在 DOM 中创建文本节点。最后但同样重要的是 .appendchild()，用于将新的 HTML 元素或文本节点附加到现有元素。

HTML 元素还能够发出事件，也称为DOM事件。值得注意的事件为“click”、“submit”、“drag”、“drop”等等。DOM 事件有一些特殊的行为，比如“默认”和冒泡。

JS 开发人员可以利用这些属性，特别是对于事件冒泡，这些属性对于加速 DOM 中的事件处理非常有用。虽然对原生 API 有很好的了解是件好事，但是现代前端库提供了不容置疑的好处。用 Angular、React 和 Vue 来构建一个大型的JS应用程序确实是可行的。

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

原文：https://github.com/valentinogagliardi/Little-JavaScript-Book/blob/v1.0.0/manuscript/chapter8.md

了执行Javascript，需要在HTML文件内以特定的方式书写JavaScript的代码，JavaScript的书写方法有多种，其执行的流程也各不相同：

1 <script>标签嵌入

此种嵌入方法无法操作<script>之后的DOM元素。因为<script>之后的DOM元素还未构造，因此在<script>标签内就无法取得位于其后的DOM元素。

2 读取外部JavaScript文件

此种嵌入方法可以指定defer、async属性。defer可以推迟执行，async可以异步执行。

3 onload嵌入

此种嵌入方法在页面读取完后再对其执行，所以可以对所有的DOM元素操作。

<body onload="alert('hello')">
window.onload = function(){alert('hello');};

当window.onload事件触发时，页面上所有的DOM、样式表、脚本、图片、flash都已经加载完成了。

//window.onload不能同时编写多个。
//以下代码无法正确执行，结果只输出第二个。
window.onload = function(){
  alert("test1");
};

window.onload = function(){
  alert("test2");
};

//$(document).ready()能同时编写多个
//结果两次都输出
$(document).ready(function(){ 
   alert("Hello World"); 
}); 
$(document).ready(function(){ 
   alert("Hello again"); 
});

window.onload和body中onload也有些许区别：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
    <script language="javascript">
        window.onload = haha;
        function haha(){console.log("window.onload");}

        if(document.addEventListener){
            function DOMContentLoaded(){
                console.log("DOMContentLoaded");
            }
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
        }</script>
</head>
<body onload="console.log('bodyonload');">
        <div id="div1">a</div>
</body>
</html>

在IE10和FireFox下，结果为：

"DOMContentLoaded"
"bodyonload"

说明body中的onload会覆盖window.onload

在chrome下，结果为：

DOMContentLoaded
window.onload
bodyonload

然后，如果把javascript代码移到最下面，结果又会是什么样呢？

chrome和IE10、FireFox的结果竟然是一样的：

DOMContentLoaded
window.onload

IE 10、Fire Fox可以理解，window.on load和body中的 on load 谁在下面就是谁覆盖谁，只会执行后面的那个。

4 DOM ContentLoaded嵌入

onload方法可能需要等待时间，而本方法可以在完成HTML解析后发生的事件，减少等待时间。

在chrome、IE10和FireFox中，执行结果是：DOMContentLoaded然后才是onload的输出。所以说一般情况下，DOMContentLoaded事件要在window.onload之前执行，当DOM树构建完成的时候就会执行DOMContentLoaded事件。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery2.js"></script>
    <script language="javascript">
        window.onload = haha;
        function haha(){console.log(document.getElementById("div1"));}
        if(document.addEventListener){
            function DOMContentLoaded(){
                console.log("DOMContentLoaded");
            }
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
        }
    </script>
</head>
<body>
    <div id="div1">a</div>
</body>
</html>

如果你是个jQuery使用者，你可能会经常使用$(document).ready();或者$(function(){})，这都是使用了DOMContentLoaded事件

5 动态载入JavaScript文件

5.1 使用原生js方法

动态创建script标签，并指定script的src属性

function loadJs(url, callback) {
    var script = document.createElement('script');
    script.type = "text/javascript";
    if (typeof(callback) != "undefined") {
        if (script.readyState) {
            script.onreadystatechange = function() {
                if (script.readyState == "loaded" || script.readyState == "complete") {
                    script.onreadystatechange = null;
                    callback();
                }
            }
        } else {
            script.onload = function() {
                callback();
            }
        }
    }
    script.src = url;
    document.body.appendChild(script);
}
loadJs("test.js", function() {
    alert('done');
});

还可以使用同样的原理动态加载css文件，只不过插入的的父节点是head标签。

5.2 使用document.write/writeln(）方式

该种方式可以实现js文件的动态加载，原理就是在重写文档流，这种方式会导致整个页面重绘。

document.writeln("<script src=\"http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js\"></script>");

需要注意的是特殊字符的转义。

5.3 使用jQuery

使用getScript(url,callback)方法实现动态加载js文件

$.getScript('test.js',function(){
    alert('done');
});

－End－

avaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

JavaScript 显示数据

JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。

使用 document.write() 方法将内容写到 HTML 文档中。

使用 innerHTML 写入到 HTML 元素。

使用 console.log() 写入到浏览器的控制台。

使用 window.alert()

你可以弹出警告框来显示数据：

实例

nbsp;html>

我的第一个页面

我的第一个段落。

操作 HTML 元素

如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。

请使用 “id” 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容：

实例

nbsp;html>

我的第一个 Web 页面

"demo">我的第一个段落

以上 JavaScript 语句（在标签中）可以在 web 浏览器中执行：

document.getElementById(“demo”) 是使用 id 属性来查找 HTML 元素的 JavaScript 代码。

innerHTML = “段落已修改。” 是用于修改元素的 HTML 内容(innerHTML)的JavaScript 代码。

在本教程中

在大多数情况下，在本教程中，我们将使用上面描述的方法来输出：

上面的例子直接把 id=”demo” 的

元素写到 HTML 文档输出中：

写到 HTML 文档

出于测试目的，您可以将JavaScript直接写在HTML 文档中：

实例

nbsp;html>

我的第一个 Web 页面

我的第一个段落。

Fri Apr 22 2022 16:20:12 GMT+0800 (中国标准时间)

请使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

实例

nbsp;html>

我的第一个 Web 页面

我的第一个段落。

"MYFUNCTION()">点我

写到控制台

如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。

浏览器中使用 F12 来启用调试模式，在调试窗口中点击 “Console” 菜单。

nbsp;html>

我的第一个 Web 页面

实例 console 截图：

您知道吗?

程序中调试是测试，查找及减少bug(错误)的过程。

在线咨询

上一篇：前端_CSS的字体
下一篇：打开网站就弹出网站公告提示框的JS弹窗代码

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

使用 JS 操作 HTML 元素

1 <script>标签嵌入

2 读取外部JavaScript文件

3 onload嵌入

4 DOM ContentLoaded嵌入

5 动态载入JavaScript文件

您的项目需求