JavaScript学习笔记8

浏览器环境，规格

平台可以是浏览器，一个Web服务器，或其他主机（host），甚至可以是一个“智能”的咖啡机，如果它能运行JavaScript的话，它们每个都提供了特定于平台的功能，JavaScript规范将其称为主机环境。主机环境提供了自己的对象和语言核心以外的函数，Web浏览器提供了一种控制网页的方法，Node.js提供了服务端功能等等。

文档对象模型（DOM）

文档对象模型（DOM），将所有页面内容表示为可以修改的对象。document对象是页面的主要“入口点”，我们可以使用它来更改或创建页面上的任何内容。

遍历DOM。DOM让我们可以对元素和它们中的内容做任何事，我们需要获取对应的DOM对象，进而对其进行操作。对DOM的所有操作都是以document对象开始，它是DOM的主“入口点”，从它我们可以访问任何节点。

在最顶层：documentElement和body，最顶层的树节点可以直接作为document的属性来使用

= document.documentElement，这是对应标签的DOM节点 = document.body ，document.body的值可能是null = document.head

给定一个DOM节点，我们可以使用导航（navigation）属性访问其直接的邻居，这些属性氛围两组：
对于所有节点：parentNode , childNodes , firstChild , lastChild , previousSibling , nextSibling
仅对于元素节点：parentElement , children , firstElementChild , lastElementChild ,previousElementSibling , nextElementSibling
某些类型的DOM元素，例如table，提供了用于访问其内容的其他属性和集合。DOM集合是只读的，实时的，它们反映了DOM的当前状态。

搜索：getElement* , querySelector*
document.getElementById或者只使用id，如果一个元素有id特性，就可以使用该方法获取元素。但不要使用id命名的全局变量来访问元素。id必须是唯一的，在文档中，只能有一个元素带有给定的id。

querySelectorAll，到目前为止，最通用的方法是elem . querySelectorAll(css)，它返回elem中与给定的CSS选择器匹配的所有元素，可以使用任何CSS选择器，也可以使用伪类选择器。

querySelector，elem . querySelector(css)调用会返回给定CSS选择器的第一个元素。

matches，elem . matches(css)不会查找任何内容，它只会检查elem是否与给定的CSS选择器匹配，返回true或者false。

每一个DOM节点都属于一个特定的类，这些类形成层次结构（hierarchy）。完整的属性和方法集是继承的结果。主要的DOM节点属性有：
nodeType：用于查看节点是文本节点还是元素节点，它具有一个数值型值，1表示元素，3表示文本节点，其他一些则代表其他节点类型，只读。
nodeName/tagName：用于元素名，标签名（除了XML模式，都要大写），对于非元素节点，nodeName描述了它是什么，只读。
innerHTML：元素的HTML内容，可以被修改。
outerHTML：元素的完整HTML，对element.outHTML的写入操作不会触及element本身，而是在外部上下文中将其替换为新的HTML。
nodeValue/data：非文本节点（文本、注释）的内容，两者几乎一样，常用data，可以被修改。
textContent：元素内的文本，HTML减去所有，写入文本会将文本放入元素内，所有特殊字符和标签均被视为文本，可以安全的插入用户生成的文本，并防止不必要的HTML插入。
hidden：当被设置为true时，执行与CSS中display：none相同的事。

特性和属性：当浏览器加载页面时，它会读取或者解析HTML并从中生成DOM对象，对于元素节点，大多数标准的HTML特性（attribute）会自动变成DOM对象的属性（properties）。例如标签是，那么DOM对象就会有body.id = “page”

DOM属性和方法的行为就像常规的JavaScript对象一样，它们可以有很多值，是大小写敏感的。

HTML特性，在HTML中，标签可能拥有特性，当浏览器解析HTML文本，并根据标签创建DOM对象时，浏览器会辨别标准的特性并以此创建DOM属性。非标准的特性则不会。
操作特性的方法：
elem.hasAttribute(name) — 检查是否存在这个特性。
elem.getAttribute(name) — 获取这个特性值。
elem.setAttribute(name, value) — 设置这个特性值。
elem.removeAttribute(name) — 移除这个特性。
elem.attributes — 所有特性的集合。

document中的方法
创新节点的方法：
document.createElement(tag) – 用给定的标签创建一个元素节点
document.createTextNode(value) – 创建一个文本节点
element.cloneNode(deep) – 克隆元素，如果deep == true则将其藕带一起克隆
插入和移除节点的方法
node.append(nodes or strings) – 在末尾插入
node.prepend() – 在开头插入
node.before() – 在node之前插入
node.after() – 在node之后插入
node.replaceWith() – 替换node
node.remove() – 移除node

样式和类：要管理class，有两个DOM属性
className – 字符串值，可以很好的管理整个类的集合
classList – 具有add/remove/toggle/contains方法的对象，可以很好的支持单个类
要改变样式：style属性是具有驼峰样式的对象，对其进行读取和修改与修改“style”特性中的各个属性具有相同的效果。style.cssText属性对应整个“style”特性，即完整的样式字符串
要读取已经解析的样式（对所有类，在应用所有CSS并计算最终值之后）：getComputedStyle(element,[pseudo])返回与style对象相类似的，且包含了所有类的对象

元素具有以下几何属性：
offsetParent — 是最接近的 CSS 定位的祖先，或者是 td，th，table，body。
offsetLeft/offsetTop — 是相对于 offsetParent 的左上角边缘的坐标。
offsetWidth/offsetHeight — 元素的“外部” width/height，边框（border）尺寸计算在内。
clientLeft/clientTop — 从元素左上角外角到左上角内角的距离。对于从左到右显示内容的操作系统来说，它们始终是左侧/顶部 border 的宽度。而对于从右到左显示内容的操作系统来说，垂直滚动条在左边，所以 clientLeft 也包括滚动条的宽度。
clientWidth/clientHeight — 内容的 width/height，包括 padding，但不包括滚动条（scrollbar）。
scrollWidth/scrollHeight — 内容的 width/height，就像 clientWidth/clientHeight 一样，但还包括元素的滚动出的不可见的部分。
scrollLeft/scrollTop — 从元素的左上角开始，滚动出元素的上半部分的 width/height。
除了 scrollLeft/scrollTop 外，所有属性都是只读的。如果我们修改 scrollLeft/scrollTop，浏览器会滚动对应的元素。

浏览器对象模型（BOM）

浏览器对象模型（BOM），表示由浏览器（主机环境）提供的用于处理文档（document）之外的所有内容的其他对象。
navigator对象：提供了有关浏览器和操作系统的背景信息，navigator最常用的两个属性是navigator.userAgent关于当前浏览器，navigator.platform关于平台（可以帮助区分Windows/Linux/Mac等）
location对象：允许我们读取当前URL，并且可以将浏览器重定向到新的URL。
函数alert/confirm/prompt也是BOM的一部分，他们与文档document没有直接关系，但它代表了与用户通信的纯浏览器方法。