JavaScript笔记（浏览器上--操作DOM）

1 浏览器

注意识别各种国产浏览器，如某某安全浏览器，某某旋风浏览器，它们只是做了一个壳，其核心调用的是IE，也有号称同时支持IE和Webkit的“双核”浏览器。
不同的浏览器对JavaScript支持的差异主要是，有些API的接口不一样，比如AJAX，File接口。对于ES6标准，不同的浏览器对各个特性支持也不一样。
在编写JavaScript的时候，就要充分考虑到浏览器的差异，尽量让同一份JavaScript代码能运行在不同的浏览器中。

---

2 window对象

JS的宿主对象中最为基础的就是window对象，这个对象的属性和方法通常称为BOM（浏览器对象模型）。

JavaScript可以获取浏览器提供的很多对象，并进行操作。
window对象不但充当全局作用域，而且表示浏览器窗口。window的innerWidth以及innerHeight属性可以获取可以获取浏览器窗口的内部宽度和高度。
window对象的属性方法有很多，以下列举一些常用的：

2.1 属性实例

• screen：screen对象包含用户的屏幕信息，常用的属性有：screen.width屏幕宽度，screen.height屏幕高度等
• navigator：navigator对象表示浏览器的信息，最常用的属性包括：
  
  • navigator.appName：浏览器名称；
  • navigator.appVersion：浏览器版本；
  • navigator.language：浏览器设置的语言；
  • navigator.platform：操作系统类型；
  • navigator.userAgent：浏览器设定的User-Agent字符串。
  • 注：浏览器信息很容易被用户修改
• location：location对象表示当前页面的URL信息，最常用的属性包括：
  
  • location.href：完整网址
  • location.protocol：协议
  • location.host：网站名， ‘www.example.com’
  • location.port：端口， ‘8080’
  • location.pathname：路径，/path/index.html’
  • 要加载一个新页面，调用location.assign(url)。
  • 要重新加载当前页面，调用location.reload()。
• history：记录浏览器历史，调用history.back()返回前一页面，调用history.forward()返回前一步。
• document：document对象表示当前页面，HTML在浏览器中以DOM形式表示为树形结构，而document对象就是整个DOM树的根节点。document对象还有一个cookie属性，可以获取当前页面的Cookie。
  Cookie是由服务器发送的key-value标示符。因为HTTP协议是无状态的，但是服务器要区分到底是哪个用户发过来的请求，就可以用Cookie来区分。当一个用户成功登录后，服务器发送一个Cookie给浏览器，例如user=ABC123XYZ(加密的字符串)…，此后，浏览器访问该网站时，会在请求头附上这个Cookie，服务器根据Cookie即可区分出用户。（服务器在设置Cookie时可以使用 httpOnly，设定了 httpOnly 的Cookie将不能被JavaScript读取）

2.2 方法

• alert(str)：用于弹出消息框
• confirm(str)：用于弹出选择确定消息框
• prompt(str)：用于弹出文本输入消息框
• open(url,name,features)：url必填，后两个选填，name有三个特殊值用于定义打开网页窗口的方式，如_top指的是在当前整个浏览器页面窗口替换后打开，_target指的是重新打开一个新浏览器窗口页面，_self指的是当前小窗口打开。features定义打开窗口时的小控件
• close()：关闭当前页面
• setTimeout(func,time)：多少秒后执行函数，注：第一个参数填写函数不要加括号
• cleaarTimeout(id)：取消计时器运作，把setTimeout(func,time)赋值给一个变量，这个变量的名字就是参数id
• setInterval(func,time)：每隔多少时间执行函数
• clearInterval(id)：取消计时器

---

3 操作DOM

HTML文档被浏览器解析后就是一棵DOM树（Document Object Modle），而浏览器实质显示的也就是这一课DOM树。
而JavaScript可以操作一个DOM节点，操作一个DOM节点实际上就是这么几个操作：

• 更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；
• 遍历：遍历该DOM节点下的子节点，以便进行进一步操作；
• 添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；
• 删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。

3.1 历遍DOM节点

DOM节点分为：元素节点，文本节点以及属性节点。属性节点一定是包含在元素节点中，而文本节点则大多数为元素节点的子节点。

在操作节点之前得先拿到这个节点，获取节点方法都是通过调用document对象属性获取的，常用的就是用document.getElementsBy..这样的形式，如：

/* 
js的命名：变量常用下划线，而函数名，方法名和对象属性名的命名常用骆驼命名法 
*/

var a = document.getElementById("idname");//注意Element后不跟s，因为id对应的元素只有一个

var b = document.getElementsByClassName("classname");//添加s，注意当想要选择一些带有多个类名的元素节点时，类名可以用空格隔开

var c = document.getElemantsByTagName("tagname");//添加s

document.getElementsByTagName()和document.getElementsByClassName()总是返回一组DOM节点，此时可以使用索引以缩小范围（搜索的参数可以写为通配符*）。
另外使用：

• Node.childNodes：来返回一组子节点，值得注意的是chrome等浏览器会把一些节点之间的空白文本都会作为子节点返回，所以使用时注意筛选。
• Node.firstChild：第一个子节点
• Node.lastChild：最后一个子节点
• Node.parentNode：父节点
• Node.nextSibling：返回紧跟其后的兄弟节点，没有返回null
• Node.proviousSibling：返回前一个的兄弟节点，没有返回null

那么返回一组子节点，如何筛选出空白文本呢？
这就需要用到一些节点的属性了:

• Node.nodeType：这返回的是数字，其中“元素”返回数字1，也就是说使用它能筛选出空白文本
• Node.nodeName：如果是“元素”，则返回元素名，如段落，返回p

更多可看下图：

3.2 更新DOM

拿到一个DOM节点，可以对其属性进行修改更新。

3.2.1 HTML

修改innerHTML属性，innerHTML属性不仅能修改HTML元素文本，还可以改变元素内部结构。

//获取<p id="sei">123</p>
var p = document.getElementById("sei");

//修改文本
p.innerHTML="ABC"; //变为 <p>ABC</p>

//修改结构
p.innerHTML="ABC<span>123</span>"; //变为 <p>ABC<span>123</span></p>

修改innerText或textContent属性，只能改变文本，不能修改结构：

p.innerText="ABC";
p.textContent="ABC";

3.2.2 CSS

DOM节点的style属性对应所有的CSS，可以直接获取或设置，但一些如font-size这样的名称，就要自动转化为驼峰式命名fontSize。

p.style.color="deeppink";
p.style.fontSize="small";

3.3 插入DOM

拿到一个DOM节点，可以运用其方法进行插入DOM节点。

3.3.1 appendChild

DOM节点使用appendChild()方法，可以将某DOM节点放进其尾部。

/*
<div id="list">
    <p id="java">Java</p>
    <p id="JavaScript">JavaScript</p>
    <p id="scheme">Scheme</p>
</div>
*/
//比如要创建一个python段落放置在list模块底下。

//创建JavaScript段落
var python = document.createElement("p"); //创建段落元素
python.id="python"; //绑定id
python.innerText="python" //绑定文本

//放置在listt模块底下。
var list = document.getElementById("list"); //获取节点
list.apppendChild(python); //运行节点的方法，末尾插入节点

/*此时的DOM文档树
<div id="list">
    <p id="java">Java</p>
    <p id="JavaScript">JavaScript</p>
    <p id="scheme">Scheme</p>
    <p id="python">python</p>
</div>
*/

3.3.2 insertBefore

上述的appendChild只能插进尾部，那么插进指定部位的就要使用到insertBefore了，insertBefore的用法是，首先要获得定位节点以及它的父节点，当然还有插入字节本身，然后调用父节点的insertBefore方法，语法：
parentElement.insertBefore(newElement, referenceElement); newElement会放置在referenceElement前头

/* 在上题文档树JavaScript前插进一个C */

var c = document.createElement("p");
c.innerText="C";
c.id="C";
var JavaScript = document.getElementById("JavaScript");
list.insertBefore(c,JavaScript)；//c在前

注意看一下如何创建DOM子节点：

• 使用document.createElement(str);,str为HTML元素名
• 然后绑定一些属性，如：id，innerText，样式要用到的setAttribute，如d.setAttribute('type', 'text/css');

3.4. 删除DOM

要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉。

// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
// 删除:
parent.removeChild(self);

注：平时遍历一个父节点的子节点并进行删除操作时，调用children属性要小心，以为删除的同时，children属性也是在缩小。
此时可使用while语句