核心提示：js构成：ECMAScript：解析器 this 我 010101DOM:文档对象模型：赋予js操控节点的能力：删除节点，新建节点，插入节点BOM:浏览器对象模型：赋予js操控浏览器窗口的能力：弹窗、...
js构成：
ECMAScript：解析器 this 我 010101
DOM:文档对象模型：赋予js操控节点的能力：删除节点，新建节点，插入节点
BOM:浏览器对象模型：赋予js操控浏览器窗口的能力：弹窗、关闭窗口、打开新窗口、获取网址 fireBug
页面是怎么加载的?
本地发送请求
响应：把找到的页面内容加载到本地，渲染
页面性能怎么提高?
代码整合，大图切小，js延时异步加载
1.对节点的操作：查找节点、创建节点、删除节点、替换节点、复制节点、包裹节点、插入节点
2.属性的操作：添加属性、修改属性、删除属性(class：添加样式名，删除样式名，替换样式名)
3.对节点值的操作：普通的节点 innerHtml input value
以下实例与自我操纵多了，可以看出，DOM也是与缺点的，因为代码加载上从上往下的，如果外部文件太多，太大，加载速度慢，出现页面空白 img，那么就可以进行改变，比如使用切小图或者简化代码等，如果谁有其他的方法，望留言一起讨论，谢谢!
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
height: 80px;
line-height: 80px;
border-bottom: 1px dashed #d8d8d8;
}
#box{
margin: 50px;
}
</style>
<script type="text/JavaScript">
window.onload=function(){
var oTex=document.getElementById('tex');
var oBtn=document.getElementById('btn');
var oList=document.getElementById('list');
var aLis=oList.getElementsByTagName('li');
// console.log(aLis.length);
oBtn.onclick=function(){
if(oTex.value){
var oLi=document.createElement('li');
oLi.innerHTML=oTex.value;
// console.log(aLis.length);
if(aLis.length){
oList.insertBefore(oLi,aLis[0]);
}
else{
oList.appendChild(oLi);
}
oTex.value='';
}
else{
alert('请输入内容再提交');
}
}
}
</script>
</head>
<body>
<p id="box">
<textarea id="tex" name="" rows="5" cols="50"></textarea>
<input type="button" name="" id="btn" value="提交" />
<ul id="list">
<!--<li>原来默认</li>-->
</ul>
</p>
</body>
</html>
