007JS-dom/bom

0.写在前面

前面介绍了许多关于JavaScript这门语言的核心之处，当然，JavaScript不仅仅如此，还有诸多的精妙核心之处，以后有机会再在JavaScript语言专栏中赘言。
前面也提到了JavaScript 这门语言的核心应用场景是交互，web客户端，可以说有了一个微型的操作系统的味道了，它有工具栏，有多个应用程序同时运行，有底层网络API、保存数据、绘制图像等功能，正因如此，web应用可以被定义为用JavaScript访问访问更过浏览器提供的高级web页面。这些高级服务中最有名的当属XMLRequest对象，它后来被封装改造成了大名鼎鼎的Ajax。
web应用本质上好不夸张的讲，就是JavaScript程序。
尽管HTML文档中提供了多种JavaScript 语言嵌入方式，但是根据unobtrusive JavaScript的编程哲学的推荐，即将JavaScript从HTML结构中分离出来，保证HTML结构的更加清晰，根据MVC原则将功能权责区分清楚，因此尽量使用<script>标签的src属性进行嵌入代码。

1.DOM

客户端JavaScriptde 的存在价值在于使得静态的HTML文档变成了交互式的web应用。将web页面脚本化是JavaScript的核心目标。这也就是文档对象模型，代表和操作文档的内容，核心对象就是Document对象，它是衣蛾巨大的API核心对象。

1.1选取文档元素

document.getElementById('id'); // 根据id获取元素，id唯一，只获取一个
docuemnt.getElementByName('name'); // 根据名字获取元素，name不唯一，可获取多个
document.getElementByTagName('tagName'); // 根据标签名获取元素，可获取多个
document.getElementByClassName('className'); // 根据类属性名获取元素，可获取多个
docuemnt.querySelector('选择器'); // 一个
document.querySelectorAll('选择器'); // 多个

docuement.querySelector('input[type="redio"]'); // 获取类型为redio的表单元素
// 选择器可以都有很多中，这里不再累赘

1.2 文档结构和遍历

el.parentNode; // 获取当前元素的父节点
el.childNodes; // 当前节点的所有子节点，是个类数组对象
el.firstChild; // 当前节点的第一个节点
el.lastChild; // 当前节点的最后一个节点
el.nextSibling; // 当前节点的下一个兄弟节点
el.previousSibling; // 当前节点的上一个兄弟节点

el.children; // 当前元素的子元素，类数组
el.firstElementChild; // 当前元素的第一个子元素
el.lastElementChild; // 当前元素的最后一个子元素
el.nextElementSibling; // 当前元素的下一个兄弟元素
el.previousElementSibling; // 当前元素的上一个兄弟元素
el。offsetParent； // 定位父级

el.nodeType; // 确定当前节点的类型，9表示Document节点，1表示Element节点，3表示Text节点，8表示Comment节点，11表示DocumentFragment节点
el.nodeValue; // Text节点或Comment节点的文本内容
el.nodeName; // 当前元素的标签名

1.3 属性

el.getAttribute('attr'); // 获取属性，获取到的属性值都属于字符串对待
el.setAttribute('attr',val); // 设置属性值
el.dataset.name; // H5,表示获取data-name值，可读可写

1.4 内容

el.innerHTML; // 获取元素内的所有内容，包括标签名，可读可写，可拼接
el.textContent; // 获取元素内的纯文本内容,可读可写
el.innerText; // 与textContent类似
el.value; // 表单元素内容

1.5 创建、插入、删除节点

docuemnt.createElement('标签名'); // 创建元素，返回新元素
document.createTextNode(''); // 创建text节点

el.appendChild(元素); // 将指定节点插入到当前节点内
el.insertBefore(node,node); // 将第一个节点插入到第二个节点前

el.remove(); // 删除元素自身
el.removeChild('节点); // 删除当前节点的指定子节点

el.replaceChild(oldNode,newNode); // 替换节点

1.6 其他

el.documentElement.scrollLeft;
el.documentElement.scrollTop; // 获取滚动条位置

innerWidth;innerHeight;
document.docuemntElement.clientWidth;document.documentElement.clientHeight;

el.getBoundingClientRect(); // 获取元素的四个边以及宽高数据，用来判断在视口九中元素的位置
document.elementFromPoint(x,y); // 获取指定坐标的元素，不经常使用

document.documentElement.offsetHeight; // 获取文档高度
innerHeight; // 获取视口高度
scrollTo();scrollIntoView();

e.offsetLeft;e.offsetTop; // 获取元素位置
e.offsetParent; // 指定元素的相对父元素，若为空，表示这些属性都是文档坐标
e.offsetWidth;e.offsetHeight; // 屏幕宽高

e.clientWidth;e.clientHeight; // 屏幕宽高，不包括边框，只包含内容和内边距，也不包括滚动条，内联元素为0
e.clientLeft;e.clientTop; 

e.scrollWidth;e.scrollHeight; // 内容区域加上它的内边距再加上任何溢出内容的尺寸，无溢出时与client相等
e.scrollLeft;e.scrollTop; // 没用

2.BOM

BOM（browser object model）浏览器对象模型，提供与浏览器交互的API。核心对象是window，表示浏览器的一个实例，window对象既是ECMAScript规定的Global对象，又是通过js访问浏览器窗口的一个接口。

2.1 定时器

setTimeout(),clearTimeout();
setInterval(),clearInterval();

2.2 location：URL地址

window对象和document的location属性都是引用location对象，表示当前窗口中显示文档的url,并定义一些方法使窗口载入新的文档。

location.href; // 字符串，包含完整的URL文本，可读可写
location.toString(); // 返回href属性的值
location.hash; // 返回url中的“片断标识符”部分，从#开始
loaction.search; // 返回问号之后的url,这部分通常是某种类型的查询字符串，从？开始
location.host; // 当前url的主机名名称和端口号，若为80端口，就没有端口，可读可写
location.hostname; // 当前url主机名名称，不包含端口，可读可写
location.origin; // 当前url的协议，主机名，端口号，只读
location.pathname; // 设置和返回当前url的路径部分，可读可写
location.port; // url端口部分，若为80端口，无需指定，可读可写
location.protocol; // 协议
location.reload(); // 重新载入当前文档
location.replace();// 将当前文档替换指定文档，会清楚当前文档浏览记录
location.assign(); // 载入一个新的文档，不会清除当前文档的浏览记录

2.3 history:浏览历史

window对象的histor属性引用的是History对象，用来将窗口的浏览历史用文档和文档状态列表的形式表示。

history.length; // 浏览历史列表中的元素数量，为了安全，不能访问已经保存的url
history.back(); // 与浏览器的后退按钮功能一致
history.forward(); // 与浏览器的前进按钮功能一致
history.go(); // 接收一个整数参数，可以在历史列表中向前或向后跳过多个页面
// 若一个窗口文件中包含了多个子窗口(例如iframe标签)，上面三个方法均会产生主页面不变，跳转子窗口。

history.pushState(); // 向历史浏览记录列表中添加一个新的浏览历史，一般浏览器默认加入
history.replaceState(); // 替换

在H5之前，对于历史管理是一个更复杂的难题，应用程序必须要在窗口浏览历史创建一个新的条目用以管理自身的历史记录，用历史条目关联自身的状态信息，判断什么时候用户使用了后退按钮来移动到了不同的历史条目，联合那些条目获取状态信息，且重新创建应用程序之前的状态。
但是在实际的工作中，在H5以前项目中，一般都是使用现成的解决方案，一般的JavaScript库都会封装。

2.4 navigator:浏览器信息

window对象的navigator属性引用的是包含浏览器厂商和版本信息的Navigator对象。

navigator.appname; // 浏览器全称，"Netscape"
navigator.appVersion; // 浏览器版本信息，"5.0 (Windows)"
navigator.userAgent; // 包含了appVersion中的所有信息，"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:71.0) Gecko/20100101 Firefox/71.0"
navigator.platform; // 运行浏览器的操作系统
navigator.onLine; // 表示浏览器当前是否连接网络
navigator.geolocation; // 用于确定与用户地理位置的接口
navigator.javaEnabled(); // 非标准方法，在浏览器可运行java小程序是返回true
navigator.cookieEnable(); // 非标准方法，若浏览器可保存永久cookie时，返回true
....
// 还有很多属性，这里就不再一一展开介绍了 

2.5 screen：屏幕信息

window对象的screen属性引用的是Screen对象。它提供有关窗口显示的大小和可用的颜色数量的信息。

screen.width; // 以像素为单位的窗口的宽
screen.height; // 以像素为单位的窗口的高
screen.availHeight; // 实际可用的显示高
screen.availWidth; // 实际可用的显示宽
..。
// 还要一些其他属性，这里就不再一一展开了，可以使用浏览器的console.log(screen)输出

2.6 其他属性

alert(); // 弹框并等待用户关闭
confirm(); // 显示一条消息，要求用户点击确定或取消按钮，并返回一个布尔值
prompt(); // 显示一条消息，等待用户输入字符串，并返回那个字符串

open(); // 打开一个新的浏览器窗口
close(); // 关闭当前窗口

document.docuemntElement.scrollTop;
document.documentElement.scrollLeft;
scrollX;
scrollY;
scrollTo();
innerWidth;
innerHeight;
document.body.scrollTop;
document.body.scrollLeft;

el.getBoundingClientRect().bottom; // 元素底部距离可视区顶部的距离
el.offsetTop; // 元素距离定位父级的高度
document.clientHeight; // 获取一屏幕可视区的高度
scroll事件;
onresize事件;
window.onpopstate事件; // 点击浏览器的前进后退按钮

// 。。。。
// window还有很多属性和方法以及事件

3. Next

event事件和css脚本化