DOM 基本操作

浏览器为js提供了一些可操作的对象，主要有下面几种：

window：不但是全局变量，也是浏览器的窗口。有innerWidth和innerHeigth属性，表示浏览器除去工具栏和菜单栏等占位元素后的高和宽。

navigator：表示浏览器的信息如版本，操作系统类型等。

screen：屏幕的信息，属性有宽度高度多高，以像素为单位。

location：表示当前url的信息，主要属性和方法：

------------获取当前url：location.href

------------重新加载当前页面：location.reload()

------------加载新页面：location.assign(url)

document：当前页面的信息，DOM是树形结构，document就是根节点。主要的属性和方法：

------------获取当前cookie：document.cookie

------------以ID名获取节点：document.getElementById( idname )

------------以HTML标签名获取节点：doucment.getElementsByTagName( tag )

------------以class名获取节点：document.getElementsByClassName( class name )

------------创建节点：document.createElement（“”标签名“”）

------------获取当前节点下的所有子节点：document.getElemtById("id name").children，这是个可迭代对象。

操作DOM节点

获取的一个DOM节点后，就可以对节点进行增加，更改和删除操作。

如果使用了getElemtngById方法得到一个节点：p=document.getElementById('test')

在节点更新HTML内容

更新内容有两种方法：

1·········修改节点的innerHTML属性：p.innerHTML=" 要修改的值 "，这个方法还可以增加HTML标签。

2·········修改innerText或者innerContent属性：p.innerText="......."，这个方法崩添加HTML标签

节点的style代表了所有的css样式，可以直接获取或者设置：

------------p.style.color="red"

------------p.style.fontSize="20px"

在节点中插入内容

有两种方法插入节点，假如有下面的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>

1-------使用appendChild在一个父节点的末尾添加一个子节点：  

----------------------  var js = document.getElementById('js'),  p=document.getElementById('list') // 要获取两个节点

---------------------  p.appendChild(js)

2------使用insertBefore(newElement, referenceElement)，子节点会添加到referenceElement前面：

---------------------  var js = document.getElementById('js'),  p=document.getElementById('list'),  py = document.getElementById('python') // 需要获取三个节点

--------------------   p.insertBefore(js,   py) // 在python 前插入javascript

删除节点

调用removeChild，需要获取父节点和子节点来调用：

-------------------  var js = document.getElementById('js'),  p=document.getElementById('list')

-------------------  p.removeChild(js)