window.alert('Hello world'); // Shows an alert
window.setTimeout(callback, 3000); // Delay execution
window.fetch(someUrl); // make XHR requests
window.open(); // Opens a new tab
window.location; // Browser location
window.history; // Browser history
window.navigator; // The actual user agent
window.document; // The current page
因为这些属性和方法也是全局的，所以也可以这样访问它们
alert('Hello world'); // Shows an alert
setTimeout(callback, 3000); // Delay execution
fetch(someUrl); // make XHR requests
open(); // Opens a new tab
location; // Browser location
history; // Browser history
navigator; // The actual user agent
document;// The current page
if (window.navigator) {
var lang = window.navigator.language;
if (lang === "en-US") {
// show something
}
if (lang === "it-IT") {
// show something else
}
}
var newElement = document.createElement('p');
var span = document.getElementById('span');
//查找被替换元素的父元素。
var parent = span.parentNode;
//替换旧元素为新元素，返回值是被替换掉的旧元素。
var replace = parent.replaceChild(newElement, span);
var text = document.createTextNode('Hello world');
接着将两个节点组合在一起，然后添加到 `body` 上：
var heading = document.createElement('h1');
var text = document.createTextNoe('Hello world');
heading.appendChild(text);
document.body.appendChild(heading)
在学习Dom操作时候，这些方法需要牢记并熟练使用的。<br />目前像咱们用这种方式创建和操作元素，是属于命令式DOM操作。现代前端库通过支持声明性方法来解决这个问题，如 JQuery,咱们可以声明需要什么HTML元素，其它就由库来完成。
<a name="urKVS"></a>
## DOM 操作和 jQuery
大部分可能会想，咱们直接使用 JQ 不就行了，为啥还要用如`createElement`这些原生的方法，多费劲。<br />请注意jQuery正在渐渐消失。Bootstrap 5将把它从依赖项中删除，还有很多项目也在删除它。这背后有一个合理的原因:原生DOM API提供了大量像JQ这样操作DOM的简便方法，足以替代jQuery一些常用的DOM操作。<br />如果只是想进行简单的交互和操作，请使用普通的JS。咱们甚至可以创建自己的迷你框架来抽象最常见的操作:创建元素、追加、创建文本。
<a name="1cwTi"></a>
## 总结
**DOM**是浏览器创建并保留在内存中的网页的虚拟副本。创建、修改、删除 HTML 元素，这些属于 “DOM 操作”。在过去即使对于更简单的任务，咱们也要依赖于 jQuery，但今天原生 API 已经互相兼容并且足够成熟足以替代 jQuery 了。<br />jQuery不会很快消失，但是每个JS开发人员都必须知道如何使用原生API操作DOM。这样做有很多原因，额外的库增加了JS应用程序的加载时间和大小，更不用说DOM操作在技术面试也经常出现。<br />操作 **DOM** 最常用的方法是 `document.createElement()` 用于创建新的 HTML 元素，`document.createTextNode()` 用于在 DOM 内创建文本节点。需要注意的是 `.appendChild()` 用于将新的 HTML 元素或文本节点附加到现有元素。<br />虽然很好的了解本机 API 是很好的，但是现代前端库也提供了无可置疑的好处。尽管用“原生” JS 去构建大型JS 程序确实是可行的，但有时 Angular、React、Vue可以提供很多帮助。仅使用 JavaScript 来处理更简单的原型和中小型应用也是明智之举。
<a name="q60hR"></a>
# 作业练习
<a name="78Tl7"></a>
### 任务一：
在你的IDE（Visual Studio Code或其它）中新建一个js_dom_task01.html（也可以其它名字）的文件，然后把下面代码复制粘贴到文件中：
document.getElementById('add-btn').onclick = function () {
var result = document.getElementById('first-number').value + document.getElementById('second-number').value;
document.getElementById('result').innerHTML = result;
}
document.getElementById('add-btn').onclick = function () {
var result = parseInt(document.getElementById('first-number').value) + parseInt(document.getElementById('second-number').value);
document.getElementById('result').innerHTML = result;
}
DOM基础
我们在js部分第一节课 JavaScript发展史 中有简单的说过DOM
Dom知识结构.xmind在线查看
什么是 DOM ?
DOM(文档对象模型)是针对于xml但是扩展用于HTML的应用程序编程接口，定义了访问和操作HTML的文档的标准。
W3C文档对象模型是中立于平台和语言之间的接口，它允许程序和脚本动态的访问和更新文档的内容、结构、样式。总之HTML是关于如何获取、修改、添加和删除HTML元素的标准。
DOM 分层节点
DOM的分层节点一般被称作是DOM树，树中的所有节点都可以通过脚本语言例如JS进行访问，所有HTMlL元素节点都可以被创建、添加或者删除。
在DOM分层节点中，页面就是用分层节点图表示的。
当咱们访问一个web页面时，浏览器会解析每个HTML元素，创建了HTML文档的虚拟结构，并将其保存在内存中。接着，HTML页面被转换成树状结构，每个HTML元素成为一个叶子节点，连接到父分支。 考虑以下 Html 结构：
在这个结构的顶部有一个
document，也称为根元素，它包含另一个元素：html。html元素包含一个head，而head又有一个title。 然后body包含一个h1。 每个HTML元素都由特定类型（也称为接口）表示，并且可能包含文本或其他嵌套元素：每个
HTML元素都来自Element，但其中很大一部分都是专用的。 咱们可以检查原型以查找元素所属的“种类”。 例如，h1元素是HTMLHeadingElement：而
HTMLHeadingElement则是HTMLElement的后代:此时（特别是初学者）可能会对document和window之间的区别产生一些混淆。接下来看看它们有何不同！
document 和 window 之间的区别
简单来说，
document是window的一个对象属性。window对象表示浏览器中打开的窗口。如果文档包含框架（frame或iframe标签），浏览器会为 HTML 文档创建一个window对象，并为每个框架创建一个额外的window对象。所有的全局函数和对象都属于window对象的属性和方法。区别:
window指窗体。document指页面。document是window的一个子对象。document.location(因为这是当前显示文档的位置)。但是,可以改变window.location(用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象。document接口有许多实用方法，比如
querySelector()，它是用于查找给定页面内HTML元素的方法：window表示当前的浏览器，下面代码与上面等价：当然，更常见的是用第一种方式。
window是一个全局对象，可以从浏览器中运行的任何JS代码直接访问。
window暴露了很多属性和方法，如：因为这些属性和方法也是全局的，所以也可以这样访问它们
其中有些咱们都已经很熟悉了，如
setTimeout()的方法。 例如，当咱们想要得知当前用户的浏览器语言时，window.navigator就非常有用：DOM 常用方法
获取节点
查找拥有指定id的第一个元素节点。
例如我们查找一个id属性值为“id”的元素。
查找所有带有class指定属性值的元素。
例如我们查找class属性值为“class”的元素。
查找所有指定标签名的元素，例如我们查找标签名为div的元素。
查找所有指定name属性值的元素，例如我们查找name属性值为name的元素。
例如我们查找css选择器为#id的元素。
var selectors = document.querySelectorAll('#id'); console.log(selectors);
// 括号传入属性名，返回对应属性的属性值 element.getAttribute(attributeName) // 传入属性名及设置的值 element.setAttribute(attributeName,attributeValue)
// 创建一个html元素，这里以创建h3元素为例 document.createElement("h3") // 创建div元素 var div = document.createElement('div'); cnosole.log(div);
// 创建一个文本节点； document.createTextNode(String);
var textNode = document.createTextNode('大家好'); console.log(textNode);
// 创建一个属性节点，这里以创建class属性为例 // 属性节点包含两类，一类是DOM元素的基本属性，还有一类是自定义属性。 // 基本属性既可以通过如下方式设置，也可以通过 createAttribute 方式设置。 document.body.id = 'container'; document.createAttribute("class");
// 注意：自定义属性是一定要使用 createAttribute 方式来创建的。 // 比如创建一个自定义属性 custom 。 var dataAttribute = document.createAttribute('custom'); cnosole.log(dataAttribute);
// 创建一个内容为“这一个标签”的注释节点 var comment = document.createComment('这是一个标签'); console.log(comment);
// 往element内部最后面添加一个节点，参数是节点类型 element.appendChild(Node); // 在element内部的中在existingNode前面插入newNode elelment.insertBefore(newNode,existingNode);
var newNode = document.createElement('div'); document.body.appendChild(newNode);
var newNode = document.createElement('div'); var div = document.getElementById('id'); document.body.insertBefore(newNode, div);
var div = document.getElementById('id') div.setAttribute('class', 'white');//第一个参数属性名，第二个参数属性值。
var div = document.getElementById('id'); document.body.removeChild(div);
var div = document.getElementById('id'); div.remove();
var div = document.getElementById('id'); div.removeAttribute('class');
var div = document.getElementById('id'); var attribute = div.getAttributeNode('class'); div.removeAttributeNode(attribute);
//删除当前节点下指定的子节点，删除成功返回该被删除的节点，否则返回null element.removeChild(Node)
var newElement = document.createElement('p'); var span = document.getElementById('span'); //查找被替换元素的父元素。 var parent = span.parentNode; //替换旧元素为新元素，返回值是被替换掉的旧元素。 var replace = parent.replaceChild(newElement, span);
// 返回当前元素的父节点对象 element.parentNode
// 返回当前元素所有子元素节点对象，只返回HTML节点 element.chlidren // 返回当前元素多有子节点，包括文本，HTML，属性节点。（回车也会当做一个节点） element.chilidNodes // 返回当前元素的第一个子节点对象 element.firstChild // 返回当前元素的最后一个子节点对象 element.lastChild
// 返回当前元素的下一个同级元素 没有就返回null element.nextSibling // 返回当前元素上一个同级元素 没有就返回 null element.previousSibling
// 返回元素的所有文本，包括html代码 element.innerHTML // 返回当前元素的自身及子代所有文本值，只是文本内容，不包括html代码 element.innerText
// 返回节点的类型,数字形式（1-12） // 常见几个1：元素节点，2：属性节点，3：文本节点。 node.nodeType
// 设置元素的样式时使用style element.style.color=“#eea”;
document.querySelector('h1').nodeType;
document.querySelector('h1').nodeName; "H1"
var heading = document.createElement('h1');
var text = document.createTextNode('Hello world');
var heading = document.createElement('h1'); var text = document.createTextNoe('Hello world'); heading.appendChild(text); document.body.appendChild(heading)
<!DOCTYPE html>
Demo
Hello World
<!DOCTYPE html>
Demo
你是谁？
<!DOCTYPE html>
运算结果
document.getElementById('add-btn').onclick = function () { var result = document.getElementById('first-number').value + document.getElementById('second-number').value; document.getElementById('result').innerHTML = result; }
string 要被解析的值。如果参数不是一个字符串，则将其转换为字符串(使用 ToString 抽象操作)。字符串开头的空白符将会被忽略。 radix 一个介于2和36之间的整数(数学系统的基础)，表示上述字符串的基数。比如参数"10"表示使用我们通常使用的十进制数值系统。始终指定此参数可以消除阅读该代码时的困惑并且保证转换结果可预测。当未指定基数时，不同的实现会产生不同的结果，通常将值默认为10。
document.getElementById('add-btn').onclick = function () { var result = parseInt(document.getElementById('first-number').value) + parseInt(document.getElementById('second-number').value); document.getElementById('result').innerHTML = result; }