Js如何操作DOM? 网景公司开发的浏览器运行的脚本语音：livescript；
浏览器有html源码渲染功能，将html源码在内存里形成一个DOM对象，也就是文档对象;
还有javascript解释器，js代码被引擎执行操作DOM对象。
现在最快的js解释器是chrome里面的V8引擎；
服务器js解释器node.js；
学习内容：
1、javascript本身的语法；
2、DOM对象；文档对象模型；
3、BOM模型 browser，浏览器模型；
编程公用的东西：变量，控制语句（条件/分支/循环），表达式，语句；
编程语言都是生活中的一种抽象；
变量：
0、存储位置 ---> 内存存储地址；
1、变量名；
2、变量值；
3、变量类型；
变量名，并不能直接体现变量的值，只能体现该变量在内存中的位置；
如果没有任何一个变量名指向内存地址，则该地址会被回收；
引用赋值：（传地址）修改其中一个变量会影响另一个变量
在javascript中数组、对象、函数默认是引用赋值；
eg：var a = {'age':2; 'name':'tome'};
var b = a;
b.age = 5;//这时a.age = 5;
其它的为传值赋值；两个变量的值互不相关；
eg：var a = 3;
var b = a;
var b = 5;//这个时候a依然是3；
变量名：
1、以字母，数组，下划线组成；第一个字母只能是字母或者下划线；
2、新的js标准支持UNICODE字符作为变量名；也就是说可以使用中文命名了；
3、变量名区分大小写；html不区分大小写；
如果在定义变量时不使用var，则变量为全局变量；造成“全局污染”
变量类型：
1、数值类型；
2、字符串类型；
3、布尔值类型；//false or true;
4、null；//内存里有地址，没有任何结构化的空值；
5：undefined;//从来不存在，在内存就没有；
6、数组类型；
7、对象类型；
8、函数类型；
js引入方式：（和css非常的相似）
1、写在标签里面；链接内部
<script type='text/javascript'>
code...
</script>
2、写在专门的js里面；链接外部；
<script type='text/javascript' src='xx.html'></script>
3、内联
<a href='#' onclick="alert('hello')"></a>
javascript系统函数：
1、escape(string):转成计算机通用的unicode码；
2、unescape(string):对应的解码；
3、isFinite():判断一个数组是否为有限的；
4、isNaN():判断一个变量是否为“非数字”；
5、parseFloat():转换为浮点型；
6、parseInt():将字符串的前缀部分的数字转换为整型数组；如果第一个不是数字则停止查找返回NaN;NaN表示非数字；
7、eval（'json:json'):执行一段js代码；将字符串当作一段js代码进行执行；
数组：一组变量集合；
创建数组的方式：
a:创建空数组
1、var arr = new Array();
2、var arr = [];
b:创建一个有初始值的数组
1、var arr = new Array('a','b','c');
2、var arr = ['a','b','c'];
c:创建一个有初始单元数量的数组：
var arr = new Array(5);
对象：
和数组本质是一样的，都是组织一堆数据，只不过对象下标不为数字其无序；
数组的索引对应了对象的方法或者方法；
因为对象下标是无序的，所以在创建对象的时候必须指定对象的属性与方法，数组就不需要指定索引；
语法：
var obj = {name:value;age:value};
获取属性值：
1、var t = obj['name'];
2、var t1 = obj.name;
遍历：
使用for...in结构来遍历；
//该方法将obj里面的属性挨个取出来赋给per；
//有了属性就可以取得属性值了；但是在使用时只能使用第一种方法，即obj['name'];
var per;
for( per in obj ){
code...
}
删除对象属性：
delete obj.name;//则该对象的单元值就这样被删除了；
在js中函数本身也是变量，数组和对象存储的就是"变量"，如果对象的属性值是一个函数，那么我们通常称这样的属性为"方法"；
Js中内置属性：
在js中，所有的变量都可以被js引擎包装成"对象"来处理；并给属性赋予了一些属性和方法；
DOM操作：
DOM节点与层次；常用的三种节点类型：（节点对象）
1、元素节点；//
、<a>;
2、属性节点；//<p id='name'>
中的id;
3、文本节点；//<span>hello中的hello；
重要基础：对应DOM节点的查找；
获取元素方式：
1、document.getElementById('xx');//返回对拥有指定 ID 的第一个对象的引用。
2、document.getElementsByTagName('xx');//返回带有指定名称的对象的集合。数组；该属性除了document对象可以使用，其它的对象也可以使用，而其它两个属性其它对象不能使用；
3、document.getElementsByName('xx');可返回带有指定标签名的对象的集合。数组；
补充知识点：typeof [var]str;返回变量str的类型；
注意：早起浏览器认为name只出现在表单中，因此document.getElementsByName()最对表单中的元素发挥中用。
后来部分浏览器把那么属性扩展到一般的元素如div，但是ie没有改变，还是最能对表单使用byName，因此出于兼容性，尽量只对表单使用byName；
改变节点css：每个节点都有一个style子对象，该对象的属性就可以修改css了
如果通过上面三种方式没有查到想要的结果，还可以根据前面已经找到的节点再次定位，继续查找；
1、查找子元素：
childNodes/child[index] //查找子节点(xml属性)；缺点会将</div><div>之间的空白当作为空白文本节点；
children[index]://这个属性，会忽略空白文本节点；
firstChild,lastChild;
2、查找父元素：
node.parentNode ----->获取父元素；
3、查找兄弟元素：
nextSibling,previousSiblint;
添加节点：
步骤：
1、创建节点p；
2、把节点p附近到container里面；
代码：
var nodep = document.createElement('p');
var cont = document.getElementById('container');
cont.appendChild(nodep);
创建文本节点：document.createTextNode('ab');
插入元素，并插在最后：node.appendChild（childNode）；
复制克隆一个节点：oldNode.cloneNode(true/false);//true：复制所有子节点，false：只复制指定的节点和它的属性；
删除节点：objDocumentNode ＝ xmlDocumentNode.removeChild(oldChild);
DOM事件：“监听属性”
声明：
1、直接在元素标签中声明：<input type="text" />
类型：
1、页面上变化引起的，eg:onBlur,onLoad；
2、鼠标变化引起的，eg：点击，经过，离开；
3、键盘引起的事件，eg：onkeypress,onSubmit;
注:onsubmit事件比较特殊，在<form onsubmit="return function();"这样函数在return false时，才能阻拦住表单的提交行为； asdangjlvus
（转载请保留）文章出处：http://www.ajtrip.cn/ 安吉旅游网
