初识JavaScript（三）｜ 青训营笔记

以后想做什么呢
78 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的第5天

初学JavaScript，内容是基于JavaWeb内容所学，不同于前端，所以相对于前端删了很多内容，之前学过java，在java和javaScript语法或者用法相同的就没有列出，仅出于复习而编写的笔记，水平有限，还请大家多多指教。

本文介绍JS语言中DOM对象的作用、用法及其相关例子，以及正则表达式的使用介绍。

一、正则表达式

正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。 判断某个字符串是否符合某个要求。基本思想为把一些判断含义改成符号，通过多个组合符号等进行附加。

var patt = /^a{3,5}$/;   
为符合a{3，5}以及^还有$
简单来说，就是符合这三种定义就返回真
所以只要学习这些符号代表什么意思就可以看懂正则表达式。
a{3,5}表示至少有3个连续的a出现，当然最多为5个
^表示开头需满足a{3,5}
$表示结尾需满足a{3,5}
结合起来就是开头必需有3个a，结尾也同样有3个a，但是开头和结尾最多有5个a
即6个a为false，5个a为true，4个a为true，3个a为true，2个a为false

更多规则： 1.png 2.png 3.png

二、DOM对象

DOM对象：把文档中的标签，属性，文本，转换成为对象来管理
    一、document 管理了所有的 HTML文档内容
    二、document 它是一种树结构的文档。有层级关系
    三、它让我们把所有的标签都对象化
    四、我们可以通过 document 访问所有的标签对象
DOM标签对象的常用属性和方法
一、标签的各个属性
    1、private String tagName：标签名
    2、private Dom parentNode：当前元素的父亲节点
    3、private List<Dom> children：当前元素的孩子节点
    4、private String innerHTML：起始标签到结束标签中间的内容
    5、childNodes ：获取当前节点的所有子节点
    6、firstChild：获取当前节点的第一个子节点
    7、lastChild：获取当前节点的最后一个子节点
    8、nextSibling：获取当前节点的下一个节点
    9、previousSibling：获取当前节点的上一个节点
    10、className：用于获取或设置标签的 class 属性值
    11、innerText：表示获取/设置起始标签和结束标签中的文本
                   (如有HTML标签自动去除，仅保留文本
二、document对象中的方法：
    1、document.getElementById(elementId)
       通过标签的id属性查找标签dom对象
    2、document.getElementsByName(elementName)
       通过标签的name属性查找标签dom对象
    3、document.getElementsByTagName(tagname)
       通过标签名查找标签dom对象
    4、document.createElement(tagname)
       通过给定的标签名创建一个标签对象
    5、document.appendChild(oChildNode)
       可以添加一个子节点，oChildNode 是要添加的孩子节点

三、应用：

输入框输入信息后，鼠标移开就自动识别内容是否合法，并且显示在输入框的后面：

1.png 在复选框下面提供“全选”、“全不选”、“反选”按钮来一键操作复选框：

2.png DOM对象各个属性和方法的实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
   window.onload = function(){
      //1.查找#bj节点
      document.getElementById("btn01").onclick = function () {
         var bjObj = document.getElementById("bj");
         alert(bjObj.innerHTML);
      }
      //2.查找所有li节点
      var btn02Ele = document.getElementById("btn02");
      btn02Ele.onclick = function(){
         var lis = document.getElementsByTagName("li");
         alert(lis.length)
      };
      //3.查找name=gender的所有节点
      var btn03Ele = document.getElementById("btn03");
      btn03Ele.onclick = function(){
         var genders = document.getElementsByName("gender");
         alert(genders.length)
      };
      //4.查找#city下所有li节点
      var btn04Ele = document.getElementById("btn04");
      btn04Ele.onclick = function(){
         //1 获取id为city的节点
         //2 通过city节点.getElementsByTagName按标签名查子节点
         var lis = document.getElementById("city").getElementsByTagName("li");
         alert(lis.length)
      };
      //5.返回#city的所有子节点
      var btn05Ele = document.getElementById("btn05");
      btn05Ele.onclick = function(){
         //1 获取id为city的节点
         //2 通过city获取所有子节点
         alert(document.getElementById("city").childNodes.length);
      };
      //6.返回#phone的第一个子节点
      var btn06Ele = document.getElementById("btn06");
      btn06Ele.onclick = function(){
         // 查询id为phone的节点
         alert( document.getElementById("phone").firstChild.innerHTML );
      };
      //7.返回#bj的父节点
      var btn07Ele = document.getElementById("btn07");
      btn07Ele.onclick = function(){
         //1 查询id为bj的节点
         var bjObj = document.getElementById("bj");
         //2 bj节点获取父节点
         alert( bjObj.parentNode.innerHTML );
      };
      //8.返回#android的前一个兄弟节点
      var btn08Ele = document.getElementById("btn08");
      btn08Ele.onclick = function(){
         // 获取id为android的节点
         // 通过android节点获取前面兄弟节点
         alert( document.getElementById("android").previousSibling.innerHTML );
      };
      //9.读取#username的value属性值

      btn09Ele.onclick = function(){
         alert(document.getElementById("username").value);
      };
      //10.设置#username的value属性值
      var btn10Ele = document.getElementById("btn10");
      btn10Ele.onclick = function(){
         document.getElementById("username").value = "国哥你真牛逼";
      };
      //11.返回#bj的文本值
      var btn11Ele = document.getElementById("btn11");
      btn11Ele.onclick = function(){
         alert(document.getElementById("city").innerHTML);
         // alert(document.getElementById("city").innerText);
      };
   };
</script>
</head>
<body>
<div id="total">
   <div class="inner">
      <p>
         你喜欢哪个城市?
      </p>

      <ul id="city">
         <li id="bj">北京</li>
         <li>上海</li>
         <li>东京</li>
         <li>首尔</li>
      </ul>

      <br>
      <br>

      <p>
         你喜欢哪款单机游戏?
      </p>

      <ul id="game">
         <li id="rl">红警</li>
         <li>实况</li>
         <li>极品飞车</li>
         <li>魔兽</li>
      </ul>

      <br />
      <br />

      <p>
         你手机的操作系统是?
      </p>

      <ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
   </div>

   <div class="inner">
      gender:
      <input type="radio" name="gender" value="male"/>
      Male
      <input type="radio" name="gender" value="female"/>
      Female
      <br>
      <br>
      name:
      <input type="text" name="name" id="username" value="abcde"/>
   </div>
</div>
<div id="btnList">
   <div><button id="btn01">查找#bj节点</button></div>
   <div><button id="btn02">查找所有li节点</button></div>
   <div><button id="btn03">查找name=gender的所有节点</button></div>
   <div><button id="btn04">查找#city下所有li节点</button></div>
   <div><button id="btn05">返回#city的所有子节点</button></div>
   <div><button id="btn06">返回#phone的第一个子节点</button></div>
   <div><button id="btn07">返回#bj的父节点</button></div>
   <div><button id="btn08">返回#android的前一个兄弟节点</button></div>
   <div><button id="btn09">返回#username的value属性值</button></div>
   <div><button id="btn10">设置#username的value属性值</button></div>
   <div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>
avatar
文章
阅读
粉丝