元素的继承
class Student extends Person{} 创建一个Student对象继承自Person对象本身会自带Person的属性并且可以创建属于自己的属性
什么是DOM？
◼ 前面我们花了很多时间学习JavaScript的基本语法，但是这些基本语法，但是这些语法好像和做网页没有什么关系，和前面学习的HTML、CSS也没有什么关系呢？这是因为我们前面学习的部分属于ECMAScript，也就是JavaScript本身的语法部分；除了语法部分之外，我们还需要学习浏览器提供给我们开发者的DOM、BOM相关的API才能对页面、浏览器进行操作；◼ 前面我们学习了一个window的全局对象，window上事实上就包含了这些内容：我们已经学习了JavaScript语法部分的Object、Array、Date等；另外还有DOM、BOM部分；◼ DOM：文档对象模型（Document Object Model）简称DOM，将页面所有的内容表示为可以修改的对象；◼ BOM：浏览器对象模型（Browser Object Model）简称BOM，由浏览器提供的用于处理文档（document）之外的所有内容的其他对象；比如navigator、location、history等对象；
深入理解DOM
浏览器会对我们编写的HTML、CSS进行渲染，同时它又要考虑我们可能会通过JavaScript来对其进行操作：于是浏览器将我们编写在HTML中的每一个元素（Element）都抽象成了一个个对象；所有这些对象都可以通过JavaScript来对其进行访问，那么我们就可以通过JavaScript来操作页面；所以，我们将这个抽象过程称之为文档对象模型（Document Object Model）；◼ 整个文档被抽象到document 对象中：比如document.documentElement对应的是html元素；比如document.body对应的是body元素；比如document.head对应的是head元素；◼ 下面的一行代码可以让整个页面变成红色：document.body.style.backgroundColor = "red"◼ 所以我们学习DOM，就是在学习如何通过JavaScript对文档进行操作的；
认识DOM Tree
◼ 一个页面不只是有html、head、body元素，也包括很多的子元素：在html结构中，最终会形成一个树结构；在抽象成DOM对象的时候，它们也会形成一个树结构，我们称之为DOM Tree；
document对象
◼ Document节点表示的整个载入的网页，它的实例是全局的document对象：对DOM的所有操作都是从document 对象开始的；它是DOM的入口点，可以从document开始去访问任何节点元素；◼ 对于最顶层的html、head、body元素，我们可以直接在document对象中获取到：html元素：<html> = document.documentElementbody元素：<body> = document.bodyhead元素：<head> = document.head文档声明：<!DOCTYPE html> = document.doctype
DOM的整体结构
◼ DOM相当于是JavaScript和HTML、CSS之间的桥梁通过浏览器提供给我们的DOM API，我们可以对元素以及其中的内容做任何事情；var htmlEl = document.documentElement;var bodyEl = document.bodyvar headEl = document.headvar docTypeEl = document.doctypeconsole.log(htmlEl,bodyEl,headEl,docTypeEl)
节点、元素导航
节点（Node）之间的导航（navigator）
◼ 如果我们获取到一个节点（Node）后，可以根据这个节点去获取其他的节点，我们称之为节点之间的导航。◼ 节点之间存在如下的关系： 父节点：parentNode 前兄弟节点：previousSibling 后兄弟节点：nextSibling 子节点：childNodes 第一个子节点：firstChild 最后一个子节点：lastChild
元素（Element）之间的导航（navigator）
◼ 如果我们获取到一个元素（Element）后，可以根据这个元素去获取其他的元素，我们称之为元素之间的导航。◼ 节点之间存在如下的关系： 父元素：parentElement 前兄弟元素：previousElementSibling 后兄弟元素：nextElementSibling 子元素：children 第一个子元素：firstElementChild 最后一个子元素：lastElementChild
表格（table）元素的导航（navigator）
◼ <table> 元素支持 (除了上面给出的，之外) 以下这些属性：table.rows — <tr> 元素的集合；table.caption/tHead/tFoot — 引用元素 <caption>，<thead>，<tfoot>；table.tBodies — <tbody> 元素的集合；◼ <thead>，<tfoot>，<tbody> 元素提供了 rows 属性：tbody.rows — 表格内部<tr> 元素的集合；◼ <tr>：tr.cells — 在给定 <tr> 中的 <td> 和 <th> 单元格的集合；tr.sectionRowIndex — 给定的 <tr> 在封闭的 <thead>/<tbody>/<tfoot> 中的位置（索引）；tr.rowIndex — 在整个表格中 <tr> 的编号（包括表格的所有行）；◼ <td> 和 <th>：td.cellIndex — 在封闭的 <tr> 中单元格的编号。
表单(form) 元素导航
1.form 元素可以直接通过document来获取:document.formsvar formEl = document.forms[0]2.form 元素中的内容可以通过elements来获取var elements = formEl.elements我们可以通过设置表单元素的name来获取它们<form action=""><input type="text" name="account" ><input type="password" name="password" autocomplete="off"><input type="checkbox" name="hobbies" checked><select name="fruits" ><option value="apple">苹果</option><option value="orange">橘子</option></select></form><script>// 获取form元素// var formEl =document.body.firstElementChildvar formEl = document.forms[0]// 获取form中的子元素var inputEl = formEl.elements.account// setTimeout(function(){console.log(inputEl.value)},2000)</script>
获取元素的方法
◼ 当元素彼此靠近或者相邻时，DOM 导航属性（navigation property）非常有用。但是，在实际开发中，我们希望可以任意的获取到某一个元素应该如何操作呢？方法名 搜索方式 可以在元素上调用？ 实时的？querySelector CSS-selector ✔ -querySelectorAll CSS-selector ✔ -getElementById id - -getElementsByName name - ✔getElementsByTagName tag or '*' ✔ ✔getElementsByClassName class ✔ ✔
Node节点的属性
◼ 目前，我们已经可以获取到节点了，接下来我们来看一下节点中有哪些常见的属性： 当然，不同的节点类型有可能有不同的属性； 这里我们主要讨论节点共有的属性；◼ nodeType属性： nodeType 属性提供了一种获取节点类型的方法； 它有一个数值型值（numeric value）；
其他类型可以查看MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeType
◼ nodeName：获取node节点的名字；◼ tagName：获取元素的标签名词；◼ tagName和nodeName之间有什么不同呢？tagName属性仅适用于Element 节点；nodeName是为任意Node 定义的：✓ 对于元素，它的意义与tagName相同，所以使用哪一个都是可以的；✓ 对于其他节点类型（text，comment 等），它拥有一个对应节点类型的字符串；
节点的属性-innerHTML、textContent
◼ innerHTML 属性将元素中的HTML 获取为字符串形式；设置元素中的内容；◼ outerHTML 属性包含了元素的完整HTMLinnerHTML 加上元素本身一样；◼ textContent 属性仅仅获取元素中的文本内容；◼ innerHTML和textContent的区别：使用innerHTML，我们将其“作为 HTML”插入，带有所有HTML 标签。使用textContent，我们将其“作为文本”插入，所有符号（symbol）均按字面意义处理。◼ nodeValue/data用于获取非元素节点的文本内容
节点的其他属性
◼ hidden属性：也是一个全局属性，可以用于设置元素隐藏。◼ DOM 元素还有其他属性：value✓ <input>，<select> 和 <textarea>（HTMLInputElement，HTMLSelectElement……）的 value。href✓ <a href="...">（HTMLAnchorElement）的 href。id✓ 所有元素（HTMLElement）的“id” 特性（attribute）的值。◼ class和style我们会在后续专门讲解的
元素的特性attribute
◼ 前面我们已经学习了如何获取节点，以及节点通常所包含的属性，接下来我们来仔细研究元素Element。◼ 我们知道，一个元素除了有开始标签、结束标签、内容之外，还有很多的属性（attribute）◼ 浏览器在解析HTML元素时，会将对应的attribute也创建出来放到对应的元素对象上。比如id、class就是全局的attribute，会有对应的id、class属性；比如href属性是针对a元素的，type、value属性是针对input元素的；◼ 接下来我们学习一下如何获取和设置这些属性。
attribute的分类
◼属性attribute的分类：标准的attribute：某些attribute属性是标准的，比如id、class、href、type、value等；非标准的attribute：某些attribute属性是自定义的，比如abc、age、height等；
attribute的操作
◼ 对于所有的attribute访问都支持如下的方法：elem.hasAttribute(name) — 检查特性是否存在。elem.getAttribute(name) — 获取这个特性值。elem.setAttribute(name, value) — 设置这个特性值。elem.removeAttribute(name) — 移除这个特性。attributes：attr对象的集合，具有name、value属性；◼ attribute具备以下特征：// 1.所有的attribute都支持的操作console.log(boxEl.hasAttribute("age"),boxEl.hasAttribute("abc"),boxEl.hasAttribute("id"))console.log(boxEl.getAttribute("age"),boxEl.getAttribute("abc"),boxEl.getAttribute("id"))boxEl.setAttribute("id","cba")boxEl.removeAttribute("id")var boxArributes = boxEl.attributesfor (var attr of boxArributes){console.log(attr.name,attr.value)}它们的名字是大小写不敏感的（id 与ID 相同）。它们的值总是字符串类型的。
元素的属性property
◼ 对于标准的attribute，会在DOM对象上创建与其对应的property属性：// 获取box元素var boxEl = document.querySelector(".box")console.log(boxEl.id,boxEl.title,boxEl.age,boxEl.height)var inputEl = document.querySelector("input")console.log(inputEl.checked)if(inputEl.checked){console.log(`checkbox处于选中状态`)}◼ 在大多数情况下，它们是相互作用的改变property，通过attribute获取的值，会随着改变；通过attribute操作修改，property的值会随着改变；✓ 但是input的value修改只能通过attribute的方法；◼ 除非特别情况，大多数情况下，设置、获取attribute，推荐使用property的方式：这是因为它默认情况下是有类型的
元素的class、style
◼ 有时候我们会通过JavaScript来动态修改样式，这个时候我们有两个选择：选择一：在CSS中编写好对应的样式，动态的添加class；选择二：动态的修改style属性；◼ 开发中如何选择呢？在大多数情况下，如果可以动态修改class完成某个功能，更推荐使用动态class；如果对于某些情况，无法通过动态修改class（比如精准修改某个css属性的值），那么就可以修改style属性；// 1.获取boxvar boxEl = document.querySelector(".box")console.log(boxEl)boxEl.onclick = function(){// 直接修改style属性// boxEl.style.color = "red"// boxEl.style.fontSize = "24px"// boxEl.style.backgroundColor = "green"//2. 动态添加classboxEl.className = "active"}
元素的className和classList
◼ 元素的class attribute，对应的property并非叫class，而是className：这是因为JavaScript早期是不允许使用class这种关键字来作为对象的属性，所以DOM规范使用了className；虽然现在JavaScript已经没有这样的限制，但是并不推荐，并且依然在使用className这个名称；◼ 我们可以对className进行赋值，它会替换整个类中的字符串。var boxEl = document.querySelector(".box")// 1.方法一:classNameboxEl.className = "abc"var obj = {}◼ 如果我们需要添加或者移除单个的class，那么可以使用classList属性。◼ elem.classList 是一个特殊的对象：elem.classList.add (class) ：添加一个类elem.classList.remove(class)：添加/移除类。elem.classList.toggle(class) ：如果类不存在就添加类，存在就移除它。elem.classList.contains(class)：检查给定类，返回 true/false。◼ classList是可迭代对象，可以通过for of进行遍历。
元素的style属性
◼ 如果需要单独修改某一个CSS属性，那么可以通过style来操作：对于多词（multi-word）属性，使用驼峰式camelCaseboxEl.style.backgroundColor = "red"◼ 如果我们将值设置为空字符串，那么会使用CSS的默认样式：◼ 多个样式的写法，我们需要使用cssText属性：boxEl.style.cssText = `width:100px;height:100px;background-color:red;`不推荐这种用法，因为它会替换整个字符串
元素style的读取- getComputedStyle
◼ 如果我们需要读取样式：对于内联样式，是可以通过style.*的方式读取到的;对于style、css文件中的样式，是读取不到的；◼ 这个时候，我们可以通过getComputedStyle的全局函数来实现：var boxEl = document.querySelector(".box")console.log(boxEl.style.backgroundColor)console.log(getComputedStyle(boxEl).fontSize)
元素的常见操作
创建元素
◼ 前面我们使用过document.write 方法写入一个元素：这种方式写起来非常便捷，但是对于复杂的内容、元素关系拼接并不方便；它是在早期没有DOM的时候使用的方案，目前依然被保留了下来；
◼ 那么目前我们想要插入一个元素，通常会按照如下步骤：步骤一：创建一个元素；步骤二：插入元素到DOM的某一个位置；
◼ 创建元素： document.createElement(tag)
var boxEl = document.querySelector(".box")
var h2El = document.createElement("h2")
h2El.innerHTML = "我是标题"
h2El.classList.add("title")
boxEl.append(h2El)
插入元素
◼ 插入元素的方式如下：node.append(...nodes or strings) —— 在 node 末尾 插入节点或字符串 ----->子元素的最后，node.prepend(...nodes or strings) —— 在 node 开头 插入节点或字符串 ---->子元素的最前方，node.before(...nodes or strings) —— 在 node 前面 插入节点或字符串 ----->变成兄弟元素放在前面，node.after(...nodes or strings) —— 在 node 后面 插入节点或字符串------->变成兄弟元素放在后面，node.replaceWith(...nodes or strings) —— 将 node 替换为给定的节点或字符串。
案例:// 将元素插入到boxEl里面// 方法一:追加到子元素最后boxEl.append(h2El)// 追加到子元素最前面boxEl.prepend(h2El)// 变成兄弟元素,放在前面boxEl.before(h2El)// 变成兄弟元素,放在后面boxEl.after(h2El)// 替换boxEl.replaceWith(h2El)
移除和克隆元素
◼ 移除元素我们可以调用元素本身的remove方法：setTimeout(()=>{h2El.remove()},2000)◼ 如果我们想要复制一个现有的元素，可以通过cloneNode方法：可以传入一个Boolean类型的值，来决定是否是深度克隆；深度克隆会克隆对应元素的子元素，否则不会案例:var cloneBoxEl = boxEl.cloneNode(true)document.body.append(cloneBoxEl)
旧的元素操作方法
◼ 在很多地方我们也会看到一些旧的操作方法：parentElem.appendChild(node)：✓ 在parentElem的父元素最后位置添加一个子元素parentElem.insertBefore(node, nextSibling)：✓ 在parentElem的nextSibling前面插入一个子元素；parentElem.replaceChild(node, oldChild)：✓ 在parentElem中，新元素替换之前的oldChild元素；parentElem.removeChild(node)：✓ 在parentElem中，移除某一个元素；
元素的大小和滚动
◼ clientWidth：contentWith+padding（不包含滚动条）◼ clientHeight：contentHeight+padding◼ clientTop：border-top的宽度◼ clientLeft：border-left的宽度◼ offsetWidth：元素完整的宽度◼ offsetHeight：元素完整的高度◼ offsetLeft：距离父元素的x◼ offsetTop：距离父元素的y◼ scrollHeight：整个可滚动的区域高度◼ scrollTop：滚动部分的高度
window的大小和滚动
◼ window的width和heightinnerWidth、innerHeight：获取window窗口的宽度和高度（包含滚动条）outerWidth、outerHeight：获取window窗口的整个宽度和高度（包括调试工具、工具栏）documentElement.clientHeight、documentElement.clientWidth：获取html的宽度和高度（不包含滚动条）◼ window的滚动位置：scrollX：X轴滚动的位置（别名pageXOffset）scrollY：Y轴滚动的位置（别名pageYOffset）◼ 也有提供对应的滚动方法：方法scrollBy(x,y) ：将页面滚动至 相对于当前位置的 (x, y) 位置；方法scrollTo(pageX,pageY) 将页面滚动至 绝对坐标
