JavaScript点滴记录（一）

来源：互联网发布：淘宝不匿名购买会怎样编辑：程序博客网时间：2024/05/28 14:56

JavaScript这个东西其实一直在使用，但是从来没有系统的去学习过，或者去复习整理过。今天从网上下载了JavaScript专题的一系列教学视频，准备好好补一补这方面的相关知识，当然每天学完还是得及时整理，不然又得忘了，对于JavaScript的系统的学习，我记得大学的时候一门课叫web开发，那个时候就对JavaScript有一个系统的学习过，但是学完就基本上没用过了，所以对于这个东西的印象还是会用，但是用不好。

所以现在开始再次拾起来这些知识：

首先，像所有的入门课程一样，来个helloworld：

在body中定义一个button：

<button>ClickMe</button>

然后写JavaScript代码了：

<script type="text/javascript">     window.onload=function()//整个页面加载完成出发该事件     {        var btn=document.getElementsByTagName("button")[0];//通过获取页面的所有button节点并取得第一个元素        btn.onclick=function()//点击button相应事件        {        alert("Hello World");        }     }   </script>

这样，一个JavaScript版helloworld就好了，注释内容很重要哦。

接下来JavaScript获取节点的方法：

大致有四种，但是IE只是支持两种，所以就写这两种吧：

第一个是通过id获取节点，一种是通过TagName获取节点：

body中代码：

<body>    <p>你喜欢那个城市？</p>    <ul id="city" >     <li id="bj" name="beijing">北京</li>     <li>上海</li>     <li>深圳</li>     <li>广州</li>     </ul>  </body>

JavaScript代码：

<script type="text/javascript">      window.onload=function()     {        //1根据ID获取节点，该方法为document对象的方法        var bjNode=document.getElementById("bj");        alert(bjNode);        //2获取所有li节点,获取一个集合        //该方法是Node接点的方法，任何节点都有该方法        var liNodes=document.getElementsByTagName("li");        alert(liNodes.length);        //2方法，对应city节点也可以        var cityNode=document.getElementById("city");        var cityLiNodes=cityNode.getElementsByTagName("li");        alert(cityLiNodes.length);     }   </script>

今天最后一个是获取子节点的方法，如果是文本节点，我们还可以进行赋值操作。

获取子节点的步骤如下：

获取父节点
根据父节点来获取子节点

对子节点进行操作
相关代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>MyHtml3.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->    <script type="text/javascript">      window.onload=function()      {      //获取元素节点后可以给元素节点属性读写操作，就是所谓的赋值取值      var nameNode=document.getElementById("name");      nameNode.value="kitty";      alert(nameNode.value);      //获取元素节点的子节点      var cityNode=document.getElementById("city");      //利用childNodes方法获取所有子节点，现在已经不实用了      alert(cityNode.childNodes.length);      //(获取city下所有li节点)      var cityNodes=cityNode.getElementsByTagName("li");      alert(cityNodes.length);      //实用方法获取city下第一个和最后一个子节点      alert(cityNode.firstChild);      alert(cityNode.lastChild);      //操作文本节点      var bjNode=document.getElementById("bj");//获取文本节点所在的元素节点      var bjtextNode=bjNode.firstChild;//用元素节点获取文本几点      bjtextNode.nodeValue="kitty";//操纵文本节点            }    </script>  </head>    <body>   <p>你喜欢那个城市？</p>    <ul id="city" >     <li id="bj" name="beijing">北京</li>     <li>上海</li>     <li>深圳</li>     <li>广州</li>     </ul>     name:     <input type="text" name="username" id="name"/>       </body></html>

0 0