JavaScript（04）BOM & DOM

浏览器对象

一、window对象

• window对象的属性和方法

window.open(url,'_self')：打开一个窗口；
window.close()：关闭一个窗口，最好是脚本打开，脚本关闭，不然会有一些问题；

• window相关事件：·onload、onscroll、onresize

• 窗口尺寸：innerWidth是指页面的宽度，对应有一个outerWidth指整个浏览器的宽度

var w = window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;
var h = window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight; 

• 滚动距离

document.body.scrollTop || document.documentElement.scrollTop

二、screen & location & history & navigator

1、screen

2、location

• location对象表示当前页面的URL信息
• 一个完整的URL可以用location.href获取
• location.href='https://www.baidu.com'直接赋值可以实现页面的跳转
• 要获得URL各个部分的值，可以这么写

location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'

• 刷新当前页面reload和加载新页面assign

if (confirm('重新加载当前页' + location.href + '?')) {
   
    location.reload();
} else {
   
    location.assign('https://www.baidu.com'); // 设置一个新的URL地址
}

3、history

• history.back() - 等同于在浏览器点击后退按钮
• history.forward() - 等同于在浏览器中点击前进按钮
• 这个对象已经过时了，最好不要使用了吧

4、navigator

• navigator对象表示浏览器的信息，最常用的属性包括：

navigator.appName：浏览器名称；
navigator.appVersion：浏览器版本；
navigator.language：浏览器设置的语言；
navigator.platform：操作系统类型；
navigator.userAgent：浏览器设定的User-Agent字符串。

• 来自 navigator 对象的信息通常是误导性的，不应该用于检测浏览器版本用于书写兼容代码
• 充分利用JavaScript对不存在属性返回undefined的特性，直接用短路运算符||计算才是书写兼容代码的正解

三、弹出框 & 定时器 & cookie

1、弹出框

• 对话框：alert（提示框）、confirm（确认框）、prompt（输入框）

2、定时器

• setTimeout() ：只执行一次；停止方法clearTimeout
• setInterval()：循环往复执行；停止方法clearInterval

3、cookie

• 参考JS 知识点拾遗的cookie部分
• cookie的安全问题：网页可以引用外部脚本的特性导致cookie容易被恶意的脚本窃取，就是遭到XSS攻击，防止的办法就是服务端设置 cookie 设置为 httpOnly 即可

---

操作DOM

一、节点获取

• 最重要的概念：html中万物都是节点（文本节点、元素节点、属性节点、文档节点、注释节点）
• DOM的操作无外乎就是一个节点的增删改查，无论进行什么操作第一步必须获取到相应的节点

1、通过 id、标签名、类名和选择器获取

• getElementById 和 getElementsByTagname
• getElementsByClassName 通过类名获取元素列表
• querySelector通过 css 选择器获取一个元素
• querySelectorAll通过 css 选择器获取元素列表
• 这些方法支持链式操作，可以先获取较近的父节点，再进一步获取目标节点

关于 element 和 node

• 严格地讲，上面所说的DOM节点是指Element，但是DOM节点实际上是Node，
• 在HTML中，Node包括Element、Comment、CDATA_SECTION、根节点Document类型等
• 绝大多数时候我们只关心Element，也就是实际控制页面结构的Node，其他类型的Node忽略即可

2、父子兄弟节点获取

• 父节点获取

parentNode
offsetParent（获取有定位的父节点）

• 子节点获取

childNodes 属性返回所有的节点，包括文本节点、注释节点
children   属性只返回元素节点

• 首尾子节点

firstChild（firstElementChild 不会获取到文本节点，IE9以下不可用）
lastChild（lastElementChild）

• 兄弟节点获取

nextSibling（nextElementSibling）
previousSibling（previousElementSibling）

二、更新DOM

• 用innerHTML时要注意，是否需要写入HTML
• 使用innerText或textContent属性只能设置文本，无法解析html
• DOM节点的style属性对应所有的CSS，可以直接获取或设置，类似font-sizeCSS属性在JavaScript中改写为驼峰式命名fontSize

innerText 和 textContent

• innerText基本的浏览器都支持，textContent 低版本的 IE 不支持；
• textContent 相对于 innerText 保留了一定的格式信息；

示例代码

<!-- HTML结构 -->
<div id="test-div">
  <p id="test-js">javascript</p>
  <p>Java</p>
</div>

// 获取<p>javascript</p>节点:
var js = document.getElementById('test-js');
// 修改文本为JavaScript:
js.innerText = 'JavaScript'
// 修改CSS为: color: #ff0000, font-weight: bold
js.style.color= '#ff0000';
js.style.fontWeight='bold'

三、插入DOM

1、直接使用innerHTML

• 这个方法很直接暴力，但是会直接替换掉父节点里面的html，有的时候这个是我们不希望发生的

2、获取已有节点插入

• 这里的操作是原先位置的节点会被删除，然后插入到新的位置

<!-- HTML结构 -->
<p id="js">JavaScript</p>
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

var
    js = document.getElementById('js'),
    list = document.getElementById('list');
list.appendChild(js);

3、创建新的节点插入

var
    list = document.getElementById('list'),
    haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);

• 创建 style 节点动态改变样式

var d = doc