JavaScript点滴记录（一）

最新推荐文章于 2025-12-21 13:28:14 发布

原创最新推荐文章于 2025-12-21 13:28:14 发布 · 565 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #web开发 #helloworld #html

前端专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了JavaScript基础知识的学习过程，包括helloworld示例、获取节点方法、文本节点操作等核心内容。通过实例和代码解析，帮助读者系统地掌握JavaScript入门到进阶的知识点。

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>