浏览器的DOM元素

DOM （ Document Object Model）：文档对象模型

DOM是Javascript操作网页的接口，有文档，元素，节点。
整个文档是一个文档节点
每个标签是一个元素节点
包含在元素中的文本是文本节点
每一个属性是一个属性节点
注释属于注释节点
DOM树是有层级关系的结构。包括父级，子级。

浏览器对象

• window
  window对象有innerWidth和innerHeight属性，可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高。
• navigator，浏览器信息
  navigator.appName：浏览器名称；
  navigator.appVersion：浏览器版本；
  navigator.language：浏览器设置的语言；
  navigator.platform：操作系统类型；
  navigator.userAgent：浏览器设定的User-Agent字符串。
• screen ,表示屏幕信息
  screen.width：屏幕宽度，以像素为单位；
  screen.height：屏幕高度，以像素为单位；
  screen.colorDepth：返回颜色位数，如8、16、24。
• location对象表示当前页面的URL信息
  location.href//获得完整的URL信息
  location.assign()//加载新页面
  location.reload()//重新加载当前页面
• history
  history对象保存了浏览器的历史记录，JavaScript可以调用history对象的back()或forward ()，相当于用户点击了浏览器的“后退”或“前进”按钮
• document对象
  document是当前页面DOM树的根节点，当查找页面中的某个节点时，先从document开始查找。
  document对象的cookie属性可以获得Cookie，即服务器发送的key-value标示符，服务器为了识别不同的浏览器用户在页面加上的标识符，里面存有大量用户信息，服务器在设置Cookie时可以使用httpOnly，设定了httpOnly的Cookie将不能被JavaScript读取，保证用户信息安全。

操作DOM节点

获取节点方法：
document.getElementById()//一个节点
document.getElementsByTagName()//一组
CSS选择器document.getElementsByClassName()//一组

//选择第二个className是c-red的节点的所有子节点
var arr = document.getElementsByClassName('c-red')[1].children;
//选择第二个c-green节点的最后一个子节点
var haskell = document.getElementsByClassName('c-green')[1].lastElementChild;

document.querySelector()
document.querySelectorAll()

更新DOM元素
innerHTML：可以修改一个DOM节点的文本内容，DOM节点内部的子树
innerText或textContent：innerText不返回隐藏元素的文本，而textContent返回所有文本
p.style.color = ‘#ff0000’;//修改CSS

插入DOM元素
appendChild( )

var
    js = document.getElementById('js'),//一个已经存在的节点
    list = document.getElementById('list');//取父节点
list.appendChild(js);//将子节点插入到父节点的最后一个子节点
//重新创建新节点
 haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);

将子节点插入到指定位置
parentElement.insertBefore(newElement, referenceElement);

<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>
var
    list = document.getElementById('list'),//父节点
    ref = document.getElementById('python'),//参考节点
    haskell = document.createElement('p');生成插入节点
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.insertBefore(haskell, ref);

按字符串顺序排序DOM节点

<ol id="test-list">
    <li class="lang">Scheme</li>
    <li class="lang">JavaScript</li>
    <li class="lang">Python</li>
    <li class="lang">Ruby</li>
    <li class="lang">Haskell</li>
</ol>
// sort list:
var arr = [],i
    list = document.getElementById('test-list');
for (i = 0;i<list.children.length;i++){
 arr.push(list.children[i].innerText);
}
arr.sort();
for (i = 0;i<list.children.length;i++){
list.children[i].innerText = arr[i];
}

删除DOM元素
要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉.
children是一个只读属性，并且实时更新

<ul id="test-list">
    <li>JavaScript</li>
    <li>Swift</li>
    <li>HTML</li>
    <li>ANSI C</li>
    <li>CSS</li>
    <li>DirectX</li>
</ul>
// TODO
//children属性的索引一直在改变。
var parent = document.getElementById('test-list');
parent.removeChild(parent.children[1]);
parent.removeChild(parent.children[2]);
parent.removeChild(parent.children[3]);