JavaScript DOM编程艺术笔记

JS语法：js的语法和C++还有JAVA的语法非常相似

JS变量：JS是弱类型语言，不需要再声明变量的时候就声明变量类型

        例如 var a = '1111'  此时a是字符串

                a = 111  此时a是number

也就是说，声明变量相当于是确定一个箱子，但是箱子里面是什么需要看他最后装的东西是什么。

变量名称不允许出现空格和标点符号（$除外），首字符不能是数字

JS数据类型：1.字符串、字符串用单引号和双引号都可以，是完全相等的。特殊情况需要转义，例如字符串中包含单引号或者双引号

 也就是说你用单引号，字符串中包含单引号，就需要在字符串中的单引号前加\  你用双引号同理

2.数值（Number）、不限定必须是整数，也可以是浮点数

3.布尔值（boolean）、首先必须强调的就是Boolean值绝对不可以用引号包起来！其次就是bool值只要true和false。

4.数组（Array）、数组中每个元素都会有他们自己的下标（注意下标是从0开始，也就是第一个元素的下标是0，第二个元素的下标是1....），数组中元素可以是任何数据类型。

        关联数组：数组中下标不一定非得是数字，你可以在后期添加新元素的时候直接明确出新元素的下标，例如 arr['name'] = 'John'，但是这种不推荐使用，因为所有变量实质上都是某种类型的对象。在上面的例子中，实际上是给数组添加了name属性，所以应该使用的是对象（Object）

5.对象（Object）、声明对象的时候需要用到{}，给对象添加元素可以直接写到大括号中

        例如：var obj = {

                               name：‘john’，

                                age：14，

                                isMan:true

                        }

引用时直接用 . 就可以。obj.name,打印出来就是john

JS操作：

1.算术运算符 +、-、*、/

加号允许字符串和数值类型的拼接，但是得到的是更长的字符串，而不是数值类型

也可以 ++ 这样表明此数值上+1，--则相反

操作DOM元素(这五个方法是编写的许多DOM脚本的基石)

1.getElementById('XX')   根据节点中id拿到整个节点

2.getElementByTagName('XXX') 根据节点名称找当前名称为XXX的所有节点，返回的是数组。xxx也可以是‘*’符号，这样找的就是所有节点

3.getElementByClassName('XXX') 根据class属性中的类名找节点，用法和上一个类似，但是参数会有一些差异，这个方法参数允许是多个，比如一个节点的类名有多个，‘XXX’中可以写成'xxx XXX'中间用空格分开，不分前后顺序

4.getAttribute('属性名') 这个方法不属于document对象，只能通过元素节点对象调用。用以上三种方法获取到元素节点之后，在调用该方法，可以获取到元素节点的属性

5.setAttribute('属性名'，修改后的值) 这个方法也不属于document对象，但是可以对dom元素对象进行修改。

DOM几个常用属性

1.childNodes  用元素对象直接调用，没有参数。可以获取任何一个元素的所有子元素，他是包含这个元素的所有子元素（返回也是数组）。

2.nodeType 因为childNodes返回的不只是元素节点，事实上文档中所有东西都是一个节点，甚至连空格和换行都是节点，每一个节点都有nodeType属性，所以我们可以根据nodeType属性返回值判断我们在和那种类型的节点打交道。注意：返回值不是英文字符串，而是数字！

        nodeType属性共有12中可取值，但其中只有3种具有具体实用价值（书中原文）

        元素节点的nodeType是1。

        属性节点的nodeType是2。

        文本节点的nodeType是3。

3.nodeValue 可以通过这个属性得到一个节点的值，但是不能直接用getElementById获取的数据直接调用，因为这样拿到的数据是根据ID找到的当前节点，但是我们要修改的不是当前节点，而是当前节点中的文本，这个文本是另一种节点，他是我们getElementById获取到的节点中的子节点（可能有点绕，简单的说就是我们p标签中写了’我要学习‘，但是getElementById获取到的是p标签，而我们要的是p标签中的’我要学习‘四个字）。

        所以我们就需要用childNodes来获取getElementById返回后的节点的子元素！

4.firtsChild  node.firstChild 完全等价于 node.childNodes[0]，也就是这个属性相当于childNodes属性，差别的是这个返回的不是数组，而是childNodes返回数组中的第一个！

5.lastChild 与firstChild相反，它获取到的是childNodes返回数组中的最后一个！