《javascript DOM 编程艺术》学习笔记（一）——JS的发展与基本概念

关于这篇文章：最近开始学习javascript，在学习过程中，因为涉及到各种函数、方法、对象等许多的概念，自己往往给搞的晕头转向。于是自己好好理清了下头绪，并且回到这里，写一篇笔记，希望对初学朋友有所帮助。

        初学者朋友，可能会不知道从哪学起，这里分享一下自己的学习路线：

        1.了解UI，然后自学PS、AI。现在基本可以熟练操作。
        2.了解前端，直接在W3Cschool开始学习HTML、CSS。看完这两部分，开始练习写网页了，这里一定用记事本写网页，可以帮助加深理解。至于写什么网页，可以写个人导航页，个人博客和静态网页模板模仿。这里有很多选择的，重要的是一定多练。练习时，会遇到很多问题，想办法解决，这很重要的。
        3.学习Javascript。在完成几个练习后，因为想要给网页加交互与动态效果。这里知乎上有推荐入门书籍，《javascript DOM编程艺术》、《javascript王者归来》这两本推荐。我在读前一本

——————————————————————————————————我是分割线———————————————————————————————————

这里是我总结整理的笔记：

一 javascript的出现
        js出现以前，浏览器仅仅用于显示超文本文档的软件，此时网页并不具备动态效果和交互性。为实现这样的效果，JS应运而生。之后js不断完善，成为现在我们看到的javascript浏览器脚本语言。所以它的作用就是，让网页更丰富了。

二 HTML DOM的出现
       
        定义：DOM= Document Object Model，文档对象模型，是一种API标准编程接口（就是一种有关各方共同认可的基本约定）。DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构.javascript通过它可以对HTML文档的元素、属性和样式进行访问与修改。

        背景：JS出现后，各个浏览器厂商为了不断拓展功能，推出了js对HTML文档操作的规范，也即DOM。不过这时候，不同浏览器的DOM也不同。于是出现了这样的局面：开发者进行javascript脚本编写时，不得不考虑每个不同的浏览器，于是大部分脚本代码需要写不同几份。这时候各大浏览器都力争让自己DOM占据最大份额。主要竞争者则是IE与Netscape两大浏览器。
在这样环境下，三方组织W3C不动声色的推出了标准的DOM，而各大浏览器也乐于接受这一新的DOM，于是沿袭至今。

三 javascript学习前准备工作
       
        js基础学习同样是先在W3Cschool里面学习，然后借阅书籍进行进阶。
        js基本概念：语法、语句、变量（数据类型、数组）、操作符、条件语句、循环语句、函数、对象。——w3cshcool自学。

        理解：
        语句：一个脚本文件是由一系列指令构成的，这里指令即语句。
        变量：存储数据的容器。
        函数：就是一组允许我们在代码里随时调用的语句。
        对象：是一种数据集合，里面的数据可以通过两种形式——属性（property)和方法（method)访问：
                object.property
                object.method()
        附：
                ！属性时隶属于某个特定对象的变量；
                ! 方法是只有某个特定对象才能调用的函数。

        所以，js理解语法、语句、变量、函数、对象各自实质后，就比较容易理解力。


四 DOM
       
        DOM把网页结构表示为元素的家谱树，如图；
       
       
        节点：DOM是由节点组成的。在上面模型中，是由很多种节点的，但主要三类： 元素节点、文本节点、属性节点。
       
        JS是如何对HTML文档进行操作的？

        HTML DOM中，javascript通过DOM定义的方法对以上三种节点进行访问与修改。这里DOM定义的方法中四个常用的：

        getElementById()、getElementByTagName()、getAttribute()和setAttribute()
       
        getElementById方法实例，给p元素属性赋值。语法为：

                var object = getElementById（"p");
                        object.style.color="red"

        之后，我们用实例来学习理解js工作原理。