js进阶

　　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是一种精确地查找，

如果说我们要找一个表单对象呢，比如

在制作用户注册的时候 往往有多个表单元素要填写，如果填写错了一个提交了才发现就要全部重写了，最好的办法呢，是用户提交前知道那地方错了，这个时间的把握非常重要，也就是说这个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。或者，一个

里的所有 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 在 标签里，看起来像是一个属性。

但是，JS 还是把它当成一个对象来理解，因为它里面还有更多的属性和值。虽然没有什么方法。所以，style 其实应该算是一个子对象。而且，通过 CSS 对象，我们可以实现的效果更多。凡是 CSS 可以定义的属性，都是 CSS 对象的属性。对应的值，就是属性值。

红字

 

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 的宽度就产生变化，或者高度。这个效果，就常见于各种 下拉菜单的制作，或者干脆隐藏/显示。

 

js进阶,搜素材,soscw.com

js进阶

标签：style   blog   class   code   java   javascript   ext   get   color   html   cti   

原文地址：http://www.cnblogs.com/Stone--world/p/3702499.html