JavaScript点滴记录（一）

最新推荐文章于 2024-09-11 22:09:42 发布

jeyson

最新推荐文章于 2024-09-11 22:09:42 发布

阅读量520

点赞数

分类专栏：前端文章标签： javascript web开发 helloworld html

本文链接：https://blog.csdn.net/js_sky/article/details/44044551

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

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

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

在body中定义一个button：

<button>ClickMe</button>

然后写JavaScript代码了：

<script type="text/javascript">
     window.οnlοad=function()//整个页面加载完成出发该事件
     {
        var btn=document.getElementsByTagName("button")[0];//通过获取页面的所有button节点并取得第一个元素
        btn.οnclick=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.οnlοad=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.οnlοad=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>

jeyson

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript点滴记录（一）

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

扫一扫

专栏目录