js进阶
上篇博客提到js是纯oop思想的语言 也就是在使用js编程的时候注重的是：什么时候 什么东西 做什么。
之前提到Js一经加载会马上执行，如果我们要控制的对象在js代码的下面那么网页被打开时js会先被执行然后加载下面的html代码，当js被执行的时候，下面的html代码还没加载到，js控制的对象还没有存在于当前的页面这个时候js就会报错，提示找不到对象，根据这个原理呢，我们编写js代码的时候，要尽量把js代码写在html下面以确保所有的html代码全部被加载，而像一些自定义函数之类的js定义，则应该要写在html页面的最上面，比如<head>里面，以确保下面的js代码运行时可以找到这个自定义函数，之前说到了document对象，它是整个html文档对象，也是所有html对象的根源，因为所有的html代码都是写在页面内，不会写在页面的外面，我们想控制一个对象，就要得到代表这个对象的量，document最容易这个词就表示了这个量，但是，我们在实际效果中我们要控制的往往不是document本身，而是它里面的html元素，比如<div><input>之类的，为了方便的我们找到文档里的html元素，document给我们提供了两个常用的方法。
getElementById,getElementByTagName,这两个名字是区分大小写的，getElementByTagName可以让我们通过html标签名来找到这个html元素，getElementById可以通过我们定义的id来找到html元素，每个html元素都是一个对象，既然是对象就有自己的属性和方法，我们先说下document.getElementByTagName方法，这个可以通过标签名字找到，但一个html页面中往往不止一个叫这个名字的，所以这个方法会返回一个“数组”，“数组”中的每一个量就对应每一个用这个标签名的东西，下面实践一下，
<html> <body> <div>第一个</div> <div>第二个</div> <script type="text/javascript"> var divs = document.getElementsByTagName('div'); alert(divs); </script> </body> </html>
返回值还是一个对象，那怎么证明是一个数组呢，统计下它有多少个索引就可以了，由于在js中每一个常规的量都是用对象的方法来表达，如果真是一个数组对象的话它就会知道自己哟多少个索引，也就是属性length alert(divs.length);结果弹出div的总数，这个就是数组的总数，php中我们知道数组由多个量组成的，由于getElementsByTagName方法会返回使用这个标签的所有对象，它只能用数组的形式给我们装回来，那要怎么读取其中一个量呢，和php是一样的用[] divs[0]就是取回第一个量 也就是页面中第一个使用这个标签的对象，之前提到凡是自身有属性，又可以再标记中写东西的html标签都是DOM对象，<标签 属性=属性值>内容</标签>凡是符合的都是DOM对象，那上面的标记的属性是否可以直接读取呢，对象.属性，用这种方法我们可以试一试，
<html> <body> <div align="center">第一个</div> <div>第二个</div> <script type="text/javascript"> var divs = document.getElementsByTagName('div'); alert(divs[0].align); </script> </body> </html>
很显然是可以读取的 那么是否可以赋值呢？
alert(divs[0].align="right");可以看到产生的相应的变化，对于js和html来说这个很直观，如果要读取对象的内容，这意味着内容应该是一个属性，而不是方法，因为内容是名词 不是做什么（方法），DOM有两个属性表示内容，一个是innerHTML另一个是innerText,, innerHTML是指内容里的一切包含html代码在内，innerText只有文字，因为我们的html元素里面还可能嵌套额外的html标签，我们试一试，
<html> <body> <div align="center"><h1>第一个</h1></div> <div>第二个</div> <script type="text/javascript"> var divs = document.getElementsByTagName('div'); alert(divs[0].innerHTML); </script> </body> </html>
下面说说DOM对象的getElementById 网页做大之后div可能很多，要一个一个去算是很累人的，getElementById,提供了这个便利，只要在html某个标签中指定一个id属性，就可以通过getElementById方法找到，
<html> <body> <div align="center"><h1>第一个</h1></div> <div id="two">第二个</div> <script type="text/javascript"> var divs = document.getElementById("two"); alert(divs.innerHTML); </script> </body> </html>
通过id找到对象然后打印对象的内容，相对getElementsByTagName是一种精确地查找，
如果说我们要找一个表单对象呢，比如<input type="text" name="username" id="username" />
在制作用户注册的时候 往往有多个表单元素要填写，如果填写错了一个提交了才发现就要全部重写了，最好的办法呢，是用户提交前知道那地方错了，这个时间的把握非常重要，也就是说这个js不是一开始就运行的，那什么时候运行呢，我们在填写一个表单的时候填写完之后，当表单按钮被点击的时候，点击和提交之间，例子如下：
<form> <input type="text" name="username" id="username" /> <input type="submit" id="b" value="提交" /> </form>
表单如上，上面说到点击的时候说明是点击事件onclick 我们首先找到它
var but = document.getElementById('b');
but.onclick=click;
然后给它的oncilck事件绑定一个方法，要检查的是username填写的名字，先找到它，
var inp = document.getElementById("username");这是一个input对象 填写东西是什么呢，这不是一个DOM对象，它没有innerText,input对象都有value属性 默认是空的，
<form> <input type="text" name="username" id="username" /> <input type="submit" id="b" value="提交" /> </form> <script type="text/javascript"> function onclick(){ var inp = document.getElementById("username"); var con = inp.value; alert(con); } var but = document.getElementById("b"); but.onclick=click(); </script>
找到会被点击的东西 然后给它的点击事件绑定click方法，click方法的任务是找到表单 然后读取它的值，最后弹出这个值
全部代码如下，
<html> <body> <div align="center"><h1>第一个</h1></div> <div id="two">第二个</div> <form> <input type="text" name="username" id="username" /> <input type="submit" id="b" value="提交" /> </form> <script type="text/javascript"> function click(){ var inp = document.getElementById("username"); var con = inp.value; if(con=='') alert("用户名不能为空"); } var but = document.getElementById("b"); but.onclick=click; </script> </body> </html>
在此注意：but.onclick=click而不是but.onclick=click(),我换一种写法就会看懂了，在面向对象中由于有事件这一概念，而事件，要执行一个方法，或者说一个过程，更准确的表达代码如下
but.onclick= function(){
var inp = document.getElementById("username");
var con = inp.value;
if(con=='')
alert("用户名不能为空");
}
把一个过程交给一个事件，或者如下写
var click= function(){
var inp = document.getElementById("username");
var con = inp.value;
if(con=='')
alert("用户名不能为空");
}
这样写就清晰多了。
下面继续表单的问题，就是表单提交以后即使没有填写还是会被提交，因为submit的确被点击了，我们在此可以改成button，
<html> <body> <div align="center"><h1>第一个</h1></div> <div id="two">第二个</div> <form id=”form”> <input type="text" name="username" id="username" /> <input type="button" id="b" value="提交" /> </form> <script type="text/javascript"> function click(){ var inp = document.getElementById("username"); var con = inp.value; if(con==''){ alert("用户名不能为空"); return false; } document.getElementById("form").submit(); } var but = document.getElementById("b"); but.onclick=click; </script> </body> </html>
当检查到用户名为空的时候，弹出一个提示框，然后用 return 返回，以中断自定义函数的执行。不然提示完了，下面的代码还是会被执行的。
return 在 PHP 里说过的，是返回值，在自定义函数中出现的时候，会中断自定义函数的执行，并返回 值。在这里，其实返回什么不重要，只是为了中断自定义函数而已。如果不想弹出提示框，同学们可以自行发挥想像力。比如，指定哪个对象，或者 div 显示什么。div 是 DOM 对象，innerHTML 属性，即然可以用于读出内容，当然也可以用于写入内容了。
下面说说子对象，
document.getElementById() 这个的意思是，在文档里找到这个ID。如果我不想在一个文档里找呢？我想在指定范围里找呢？
比如，一个 DIV 里面还有N个 DIV。或者，一个 <ul> 里的所有 li。这就涉及一个子对象的问题，对象里面还有对象。虽然可以给 ul 里的每个 li 都指定 ID ，但是太麻烦了。我们可以先找到这个 ul 再找里面的 li。
<ul id="list"> <li>第一个</li> <li>第二个</li> </ul>
要找到这个 ul 很容易，只要用 getElementById 就可以。
var list = document.getElementById("list");
之前说过，符合这个格式的，都是 DOM 对象。而 getElementById 和 getElementsByTagName 方法，都是 DOM 对象的方法。也就是说，只要是 DOM 对象，就可以用这个方法，而不是局限于 document。document 是整个文档对象，也只是一个对象。
var list = document.getElementById("list");
var lis = list.getElementsByTagName("li");
这样，我们就可以得到所有的 li 了，而且，只是这个 ul 里的。为了方便起见，我们可以连起来写。
var lis = document.getElementById("list").getElementsByTagName("li");
在文档里找到 list ，然后在里面找到所有 li。li 就是 ul 的子对象。
所有的 HTML 标签，都是 document 的子对象。如果把它们用一个量来表示，可以写成长长的一串。
document.body.ul.li……
之后，就看最后这个对象是什么对象了，都有什么方法和属性可供我们操作了。
最常用的子对象，呵呵，应该要算是 style 对象。CSS 样式对象。
style 在 标签里，看起来像是一个属性。
<div style="color:red;">
但是，JS 还是把它当成一个对象来理解，因为它里面还有更多的属性和值。虽然没有什么方法。所以，style 其实应该算是一个子对象。而且，通过 CSS 对象，我们可以实现的效果更多。凡是 CSS 可以定义的属性，都是 CSS 对象的属性。对应的值，就是属性值。
<div id="f" style="color:red;">红字</div>
alert(document.getElementById("f").style.color);
（文档中找到 f 对象）这是一个对象了。对象的.style 的 颜色。相对的，也可以给它赋值。
<body> <script> function color(c) { document.getElementById("f").style.color = c; } </script> <div id="f" style="color:red;">文字</div> <input type="button" value="红色" onclick="color('red');" /> <input type="button" value="绿色" onclick="color('green');" /> <input type="button" value="蓝色" onclick="color('blue');" /> </body>
当不同按钮点击的时候，我可以通过参数，传递进不同的值，然后赋值给 style 的 color，文字的颜色也会跟着改变。
当然了，如果我们指定是 CSS 的隐藏属性的话，呵呵。那它就会，显示，隐藏。以此类推，就看我们改变的是对象的哪一个 CSS 属性了。什么时候，改变了对象的，样式的，啥……
配合不同的事件，比如窗口大小变化，滚动条位置变化。
当滚动时，读取滚动条位置，计算出对应 DIV 绝对定位的 Top 值。可以做到，让一个 DIV 一直跟着滚动条走。最常见的就是飘浮在网页左右两边的广告条，就是用这个原理制作出来的。
说到底，JS 的熟悉程度，完全取决于你对 JS 的对象的了解程度。然后跟据不同对象的属性、方法，进行相应的计算、控制，就可以做出各种千变万化的“动态”网页效果了。比如，当鼠标悬停在某个对象上面的时候，另一个 DIV 的宽度就产生变化，或者高度。这个效果，就常见于各种 下拉菜单的制作，或者干脆隐藏/显示。