03SGG_javaWeb_03javascript

最新推荐文章于 2024-07-25 09:24:40 发布

println("")

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量91

点赞数

分类专栏： # 02 javaWeb 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_46204947/article/details/122762792

版权

02 javaWeb 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

整理自尚硅谷Javaweb课程(后端）及其笔记js仅用作个人笔记留存

链接：尚硅谷javaWeb课程js部分

javaScript简介

javaScript语言诞生主要是为了完成页面的数据验证。需要运行浏览器来执行js代码
JS 是弱类型，java是强类型
- JavaScript定义的变量类型是可变的
- java定义的变量类型是不可变的
特点
- 交互性（可以做信息的动态交互）
- 安全性（不允许直接访问本地硬盘）
- 跨平台性（只要可以解释JS的浏览器都可以执行，和平台无关）

javaScript和html代码的结合方式

第一种方式

只要在head标签或者body标签中，使用script标签来书写JavaScript代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01_hello</title>
    <script type="text/javascript">
        alert("Hello javaScript!");
    </script>
</head>
<body>

</body>
</html>

第二种方式

使用script标签引入单独的JavaScript代码文件
- src属性用来引入JS文件路径（可以是绝对路径，也可以使相对路径）
- 注意：script定义JS代码和引入JS代码文件只能二选一，不能同时使用两种功能
html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_hello</title>
  <script type="text/javascript" src="02_hello.js"></script>
</head>
<body>

</body>
</html>

JS文件

alert("Hello JavaScript");

变量

JS变量类型

数值类型 number
字符串类型 string
对象类型 object
布尔类型 boolean
函数类型 function

JavaScript特殊值

undefined 未定义，所有JS变量在没有赋予初始值的时候，默认都是undefined
null 空值
NaN 非数值，非数字（全程：Not a Number）
JS定义变量的格式：
- var 变量名;
- var 变量名 =值;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量</title>
    <script type="text/javascript">
        var i;
        // alert(i); // undefined
        i = 12;
        // typeof()是JavaScript语言提供的一个函数。
        // alert( typeof(i) ); // number

        i = "abc";
        // 它可以取变量的数据类型返回
        // alert( typeof(i) ); // String

        var a = 12;
        var b = "abc";

        alert( a * b ); // NaN是非数字，非数值。

    </script>
</head>
<body>

</body>
</html>

关系（比较）运算符

等于 ==
- 做简单的字面上的比较
全等于 ===
- 除了字面上的比较之外，还会比较两个变量的数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关系运算</title>
    <script type="text/javascript">
        var a = "12";
        var b = 12;
        alert(a == b);
        alert(a === b);
    </script>
</head>
<body>

</body>
</html>

逻辑运算符

且运算符 &&
- 当表达式全为真的时候，返回值返回最后一个表达式的值
- 当表达式中，有一个为假的时候。返回第一个为假的表达式的值
或运算符 ||
- 当表达式全为假时，返回最后一个表达式的值
- 只要有一个表达式为真，就会返回第一个表达式为真的值
- 注意：&&运算符与||运算符有短路即当有了结果之后，后面的表达式便不再执行
取反运算符 !
在JS语言中，所有的变量，都可以作为一个boolean 类型的变量去使用
- 0 null undefined “”(空串)都默认是false

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>05逻辑运算符</title>
  <script type="text/javascript">
    /*         && 且运算。
            有两种情况：
            第一种：当表达式全为真的时候。返回最后一个表达式的值。
            第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值*/

    var a = "abc";
    var b = true;
    var d = false;
    var c = null;

    // alert( a && b );//true
    // alert( b && a );//abc
    // alert( a && d ); // false
    // alert( a && c ); // null

    /*      || 或运算
          第一种情况：当表达式全为假时，返回最后一个表达式的值
          第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值*/
    // alert( d || c ); // null
    // alert( c|| d ); //false
    // alert( a || c ); //abc
    // alert( b || c ); //true

  </script>
</head>
<body>

</body>
</html>

数组

JS中数组的定义方式
- var 数组名 =[] //空数组
- var 数组名 = [1,“abc”,true] //定义数组时同时赋值
数组的一些注意点
- JS语言中的数组，只要我们通过数组下标赋值，那么会根据最大的数组下标值，自动的给数组做扩容工作，扩容的值为undefined

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05数组</title>
  <script type="text/javascript">
    var arr=[]; //定义一个空数组
    alert("空数组长度:"+arr.length);  //0

    arr[0]=11;
    alert("赋值之后的值："+arr[0]); //11
    alert("赋值之后长度"+arr.length); //1

    //javaScript中的数组，只要我们通过数组下标赋值，那么会根据最大的下标值，自动的为数组做扩容操作
    arr[2]="abc";
    alert("自动扩容之后的长度："+arr.length);  //3
    alert("扩容的自动赋值的："+arr[2]);    //abc

    //数组遍历
    for(var i=0;i<arr.length;i++){
        alert("遍历输出"+i+":"+arr[i])
    }
  </script>
</head>
<body>

</body>
</html>

函数

函数的定义方式

第一种定义方式
- 格式
```
function 函数名(形参列表){
	函数体;
}
```
- 在JS中定义有返回值的函数，直接使用return 语句返回即可！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数的第一种定义方式</title>
    <script type="text/javascript">
        //定义一个无参的函数
        function test() {
            alert("这是JS函数第一种方式的测试");
        }

        //函数只有在被调用之后才会执行
        test();

        //定义有参函数
        function test2(a, b) {
            var c = a + b;
            alert("有参函数加法：" + a + "+" + b + "=" + c);
        }
        test2(2, 3);
        //定义有返回值的函数
        function test3(num1,num2){
            return num1+num2;
        }
        alert(test3(2,4));
    </script>
</head>
<body>

</body>
</html>

第二种方式
- 格式
```
var 函数名 =function(形参列表){
		函数体;
}
```
- 注意，在java中函数允许重载，但是在JS中函数的重载会直接覆盖上一次的定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数的第二种定义方式</title>
    <script type="text/javascript">
        var fun = function () {
            alert("无参函数1");
        }
        fun();
        var fun2 = function (a, b) {
            alert("有参函数：a=" + a + " b=" + b);
        }
        fun2(2, 3);
        var fun3 = function (num1, num2) {
            return num1 + num2;
        }
        alert(fun3(1, 9));
    </script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS不允许重载</title>
    <script type="text/javascript">
        function fun(a, b) {
            alert("有参函数fun(a,b)");
        }

        function fun() {
            alert("无参函数fun()");
        }

        fun(1, "ad");

    </script>
</head>
<body>

</body>
</html>

函数的arguments隐性参数

就是在function函数内不需要定义但可以直接获取所有参数的变量（指后续调用函数输入的所有参数）
- 隐形参数特别像java基础的可变长度参数一样
- JS的隐性参数类似java的可变长参数，操作类似数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可变长参数</title>
    <script type="text/javascript">
        function fun(a) {
            alert(arguments.length);    //可以看参数的长度

            for (var i = 0; i < arguments.length; i++) {
                alert(arguments[i]);
            }
        }

        //fun(false,12,"abc");

        //要求编写一个函数，用于计算所有参数相加的和并返回
        function sum(sum1, sum2) {
            var result = 0;
            for (var i = 0; i < arguments.length; i++) {
                if (typeof (arguments[i]) == "number") {    //判断去除非数值型数据
                    result += arguments[i];
                }

            }
            return result;
        }

        alert(sum(1, 2, 3, 4,"abcd", 5, 6, 7, 8, 9));
    </script>
</head>
<body>

</body>
</html>

JS的自定义对象

Object形式的自定义对象

对象的自定义

var 变量名 = new Object(); //对象实例（空对象）

变量名.属性值 =值; //定义一个属性

变量名.函数名 = function(){} //定义一个函数
对象的访问

变量名.属性/函数名();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Object形式的自定义对象</title>
</head>
<body>
<script type="text/javascript">
    //定义
    var obj = new Object();
    obj.name="华仔";
    obj.age=23;
    obj.fun = function(){
        alert("姓名："+this.name+",年龄："+this.age);
    };
    //访问
    obj.fun();
</script>
</body>
</html>

{}形式的自定义对象

对象的定义

var 变量名 ={ //空对象

属性名：值, //定义一个属性

属性名 : 值, //

函数名 : function(){} //定义一个函数

}
访问

变量名.属性/函数名（）;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{}形式自定义对象</title>
</head>
<body>
<script type="text/javascript">
  var obj ={
    name: "小明",
    age:  18,
    fun:function(){
      alert("姓名："+this.name+",年龄："+this.age);
    }
  }
  obj.fun();
</script>
</body>
</html>

JS中的事件

常用的事件

onload加载完成事件
页面加载完成之后，常用作页面JS代码初始化操作
onclick 单击事件
常用于按钮的点击响应操作
onblur失去焦点事件
常用于输入框失去焦点之后验证其内容是否输入合法
onchange内容发生改变事件
常用于下拉列表和输入框内容发生改变后操作
onsubmit表单提交事件
- 常用于表单提交时，验证所有表单项是否合法

事件注册

事件的注册（绑定）就是告诉浏览器当事件响应后要执行那些操作代码

静态注册事件

通过html标签的事件属性直接赋予事件响应后的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件注册，以onload事件为例</title>
    <script type="text/javascript">
        function onlaodFun() {
            alert("静态事件外部");
        }
    </script>
</head>
<!--               <body οnlοad="alert('静态事件内部')">            -->
<body onload="onlaodFun()">

</body>
</html>

动态注册事件
- 先通过js代码得到标签的dom对象，再通过dom对象.事件名 =function(){}这种形式赋予事件响应后的代码
- 基本步骤
  
  获取标签对象
  
  标签对象.事件名 = function(){}
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件注册绑定动态</title>
</head>
<body>
<script type="text/javascript">
  window.onload =function(){
    alert("动态注册的onload事件");
  }
</script>
</body>
</html>
```
  注意:此处动态注册并没有完整的体现，具体的可以看后面的具体事件代码

onload事件

页面加载完成之后，常用作页面JS代码初始化操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onload事件</title>
</head>
<body>
  <script type="text/javascript">
    window.onload =function (){
      alert("onload事件练习,极简");
    }
  </script>
</body>
</html>

onclick事件

常用于按钮的点击响应操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onclick事件</title>
    <script type="text/javascript">
        //静态注册onclick事件
        function onclickFun() {
            alert("静态注册onclick事件")
        }

        //动态注册onclick事件
        window.onload = function () {
            //获取标签对象
            var btnobj = document.getElementById("btn02");

            //通过标签.事件名 =function{}
            btnobj.onclick = function () {
                alert("动态注册的onclick事件");
            }
        }
    </script>
</head>
<body>
<!--静态注册onclick事件-->
<button onclick="onclickFun()">静态注册</button>
<!--动态注册onclick事件-->
<button id="btn02">动态注册</button>
</body>
</html>

onblur事件

常用于输入框失去焦点之后验证其内容是否输入合法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onblur事件</title>
    <script type="text/javascript">
        //静态注册失去焦点
        function onblurFun(){
            //console是控制台对象，由javascript提供，用于向浏览器的控制器打印输出，用于测试使用
            console.log("静态注册失去焦点事件");
        }

        //动态注册onblur事件
        window.onload =function(){
            //获取标签对象
           var passwordObj = document.getElementById("password");
           //通过标签对象.事件名 = function(){};
            passwordObj.onblur =function (){
                console.log("动态注册失去焦点事件");
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" onblur="onblurFun()"><br/>
    密&nbsp;&nbsp;&nbsp;码：<input type="text" id="password">
</body>
</html>

onchange事件

常用于下拉列表和输入框内容发生改变后操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onchange事件</title>
    <script type="text/javascript">
        //静态注册
        function onchangeFun() {
            alert("女神改变");
            console.log("onchange事件静态输出");
        }

        //动态注册
        window.onload = function () {
            var boy = document.getElementById("PrinceCharming");

            boy.onchange = function () {
                alert("男神改变");
                console.log("onchange事件动态输出");
            }
        }
    </script>
</head>
<body>
<!-- 静态注册onchange-->
<select onchange="onchangeFun()">
    <option>-----女神----</option>
    <option>芳芳</option>
    <option>佳佳</option>
    <option>娘娘</option>
</select>
<!-- 动态注册onchange-->
<select id="PrinceCharming">
    <option>-----男神----</option>
    <option>康康</option>
    <option>过儿</option>
    <option>林陌</option>
</select>
</body>
</html>

onsubmit事件

常用于表单提交时，验证所有表单项是否合法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onsubmit事件</title>
    <script type="text/javascript">
        //静态注册
        function onsubmitFun() {
            //要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
            alert("onsubmit静态注册...不合法");
            return false;
        }

        //动态注册
        window.onload = function () {
            var onsubmit01 = document.getElementById("form01");
            onsubmit01.onsubmit = function () {
                alert("onsubmit动态注册。。。不合法");
                return false;
            }
        }
    </script>
</head>
<body>
<!--return false可以阻止表单提交-->
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun()">
    <input type="submit" value="静态注册">
</form>
<!--动态注册-->
<form action="http://localhost:8080" id="form01">
    <input type="submit" value="动态注册">
</form>

</body>
</html>

DOM模型

DOM全称是Document Object Model 文档对象模型

Document对象的方法介绍

document.getElementById(elementId)

通过标签的id属性来查找标签DOM对象，elementId是标签的id属性值
document.getElementsByName(elementName)

通过标签的name属性查找标签DOM对象，elementName是标签的name属性值
document.getElementsByTagName(tagment)

通过标签名查找DOM对象，tagname是标签名
document.createElement(tagName)

方法，通过给定的标签名，新创建一个标签对象。tagName是要创建的标签名

getElementById

通过标签的id属性来查找标签DOM对象
test()方法用于测试某个字符串是不是匹配我的规则，如果匹配返回true,否则返回false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementById</title>
    <script type="text/javascript">
        /*
        * 需求：
        *   当用户点击校验按钮之后，取出输入框的内容，然后验证其是否合法
        *   验证的规则是：必须由字母，数字，下划线组成。并且长度是5到12位
        * */
        function onclickFun() {
            //当操作一个标签的时候，首先要获取这个标签对象
            var usernameobj = document.getElementById("username");
            //获取对象的文本的内容
            var usernameText = usernameobj.value;
            // 使用正则表达式技术（后面学）验证校验内容是否符合某个规则
            var patt = /^\w{5,12}$/;
            //test()方法用于测试某个字符串是不是匹配我的规则，如果匹配返回true,否则返回false
            if (patt.test(usernameText)) {
                alert("用户名合法");
            } else {
                alert("用户名不合法");
            }
        }
    </script>
</head>
<body>
<p>
    用户名：<input type="text" id="username" value="请输入用户名">
    <button onclick="onclickFun()">校验</button>
</p>

</body>
</html>

正则表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式</title>
    <script type="text/javascript">
        // 表示要求字符串中，是否包含字母e
        // var patt = new RegExp("e");
        // var patt = /e/; // 也是正则表达式对象
        // 表示要求字符串中，是否包含字母a或b或c
        // var patt = /[abc]/;
        // 表示要求字符串，是否包含小写字母
        // var patt = /[a-z]/;
        // 表示要求字符串，是否包含任意大写字母
        // var patt = /[A-Z]/;
        // 表示要求字符串，是否包含任意数字
        // var patt = /[0-9]/;
        // 表示要求字符串，是否包含字母，数字，下划线
        // var patt = /\w/;
        // 表示要求 字符串中是否包含至少一个a
        // var patt = /a+/;
        // 表示要求 字符串中是否 *包含* 零个 或 多个a
        // var patt = /a*/;
        // 表示要求 字符串是否包含一个或零个a
        // var patt = /a?/;
        // 表示要求 字符串是否包含连续三个a
        // var patt = /a{3}/;
        // 表示要求 字符串是否包 至少3个连续的a，最多5个连续的a
        // var patt = /a{3,5}/;
        // 表示要求 字符串是否包 至少3个连续的a，
        // var patt = /a{3,}/;
        // 表示要求 字符串必须以a结尾
        // var patt = /a$/;
        // 表示要求 字符串必须以a打头
        // var patt = /^a/;

        // 要求字符串中是否*包含* 至少3个连续的a
        // var patt = /a{3,5}/;
        // 要求字符串，从头到尾都必须完全匹配
        // var patt = /^a{3,5}$/;

        var patt = /^\w{5,12}$/;
        var str = "wzg168[[[";
        alert(patt.test(str));
    </script>
</head>
<body>

</body>
</html>

两种常见的验证提示效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>verifyHint(验证提示)</title>
    <script type="text/javascript">
        /*
        * 需求：
        *   当用户点击校验按钮之后，取出输入框的内容，然后验证其是否合法
        *   验证的规则是：必须由字母，数字，下划线组成。并且长度是5到12位
        * */
        function onclickFun() {
            //当操作一个标签的时候，首先要获取这个标签对象
            var usernameobj = document.getElementById("username");
            //获取对象的文本的内容
            var usernameText = usernameobj.value;
            // 使用正则表达式技术验证校验内容是否符合某个规则
            var patt = /^\w{5,12}$/;
            //test()方法用于测试某个字符串是不是匹配我的规则，如果匹配返回true,否则返回false
            var usernameSpanObj = document.getElementById("usernamespan");
            //innerHTML表示起始标签和结束标签之间的内容。这个属性可读 可写
            if (patt.test(usernameText)) {
                usernameSpanObj.innerHTML = "用户名合法";
            } else {
                usernameSpanObj.innerHTML = "用户名不合法";
            }
        }
    </script>
</head>
<body>
<p>
    用户名：<input type="text" id="username" value="请输入用户名">
    <button onclick="onclickFun()">校验</button>
    <span id="usernamespan" style="color:red;"></span>
</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>verifyHint(验证提示)</title>
    <script type="text/javascript">
        /*
        * 需求：
        *   当用户点击校验按钮之后，取出输入框的内容，然后验证其是否合法
        *   验证的规则是：必须由字母，数字，下划线组成。并且长度是5到12位
        * */
        function onclickFun() {
            //当操作一个标签的时候，首先要获取这个标签对象
            var usernameobj = document.getElementById("username");
            //获取对象的文本的内容
            var usernameText = usernameobj.value;
            // 使用正则表达式技术（后面学）验证校验内容是否符合某个规则
            var patt = /^\w{5,12}$/;
            //test()方法用于测试某个字符串是不是匹配我的规则，如果匹配返回true,否则返回false
            var usernameSpanObj = document.getElementById("usernamespan");
            //innerHTML表示起始标签和结束标签之间的内容。这个属性可读 可写
            if (patt.test(usernameText)) {
                usernameSpanObj.innerHTML = "<img src=\"right.png\" width=\"18\" height=\"18\">";
            } else {
                usernameSpanObj.innerHTML = "<img src=\"wrong.png\" width=\"18\" height=\"18\">";
            }
        }
    </script>
</head>
<body>
<p>
    用户名：<input type="text" id="username" value="请输入用户名">
    <span id="usernamespan" style="color:red;"></span>
    <button onclick="onclickFun()">校验</button>

</p>
</body>
</html>

getElementsByName

根据指定name查询返回多个标签对象合集
这个集合操作跟数组一样
checked表示复选框的状态，true表示被选中，false未被选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementsByName</title>
    <script type="text/javascript">
        function SelectAll() {   //全选
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++) {
                //checked表示复选框的状态，true表示被选中，false未被选中
                hobbies[i].checked = true;
            }
        }

        function SelectNone() {  //全不选
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++) {
                //checked表示复选框的状态，true表示被选中，false未被选中
                hobbies[i].checked = false;
            }
        }

        function SelectReverse() {//反选
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++) {
                //checked表示复选框的状态，true表示被选中，false未被选中
                // if(hobbies[i].checked){
                //     hobbies[i].checked = false;
                // }else{
                //     hobbies[i].checked = true;
                // }
                hobbies[i].checked = !hobbies[i].checked;
            }
        }
    </script>
</head>
<body>

兴趣爱好：<input type="checkbox" name="hobby" value="cpp">C++
<input type="checkbox" name="hobby" value="Java">java
<input type="checkbox" name="hobby" value="Python">Python
<input type="checkbox" name="hobby" value="JS">JS
<br>
<button onclick="SelectAll()">全选</button>
<button onclick="SelectNone()">全不选</button>
<button onclick="SelectReverse()">反选</button>

</body>
</html>

getElementsByTagName

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementsByTagName</title>
    <script type="text/javascript">
        function SelectAll() {
            var check = document.getElementsByTagName("input");
            for (var i=0; i < check.length; i++) {
                check[i].checked = true;
            }
        }

    </script>
</head>
<body>
<p>
    兴趣爱好：<input type="checkbox" value="cpp">C++
    <input type="checkbox" value="Java">java
    <input type="checkbox" value="Python">Python
    <input type="checkbox" value="JS">JS
    <br>
    <button onclick="SelectAll()">全选</button>
</p>

</body>
</html>

节点的常用属性和方法

节点就是标签对象

方法

通过具体的元素节点调用
- getElementsByTagName()方法，获取当前节点的指定标签名孩子节点
- appendChild( oChildNode )方法，可以添加一个子节点，oChildNode 是要添加的孩子节点

属性

childNodes属性，获取当前节点的所有子节点
firstChild属性，获取当前节点的第一个子节点
lastChild属性，获取当前节点的最后一个子节点
parentNode属性，获取当前节点的父节点
nextSibling属性，获取当前节点的下一个节点
previousSibling属性，获取当前节点的上一个节点
className用于获取或设置标签的class 属性值
innerHTML属性，表示获取/设置起始标签和结束标签中的内容
innerText属性，表示获取/设置起始标签和结束标签中的文本

<!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节点,即查找id=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 () {
                //获取id为city的节点
                //通过city节点按标签名查询子节点
                var lis = document.getElementById("city").getElementsByTagName("li");
                alert(lis.length);
            };
            //5.返回#city的所有子节点
            var btn05Ele = document.getElementById("btn05");
            btn05Ele.onclick = function () {
                //获取id为city的节点
                //通过city节点获取所有子节点
                var lis = document.getElementById("city").childNodes;
                alert(lis.length);
            };
            //6.返回#phone的第一个子节点
            var btn06Ele = document.getElementById("btn06");
            btn06Ele.onclick = function () {
                //获取id为phone的节点
                //通过phone节点获取第一个子节点
                //注意看下方phone处第一个li标签与上个标签是否有空白，如果有删除,否则第一个节点是空格，显示值便是undefined
                alert(document.getElementById("phone").firstChild.innerHTML);
            };
            //7.返回#bj的父节点
            var btn07Ele = document.getElementById("btn07");
            btn07Ele.onclick = function () {
                //查询id为bj的节点
                var bj =document.getElementById("bj");
                //bj节点获取父节点
                alert(bj.parentNode.innerHTML);
            };
            //8.返回#android的前一个兄弟节点
            var btn08Ele = document.getElementById("btn08");
            btn08Ele.onclick = function () {
                //获取id为android的节点
                var android =document.getElementById("android");
                //通过Android节点获取其兄弟节点
                //注意看下方上个标签是否有空白，如果有删除,否则第一个节点是空格，显示值便是undefined
               alert( android.previousSibling.innerHTML);
            };
            //9.读取#username的value属性值
            var btn09Ele = document.getElementById("btn09");
            btn09Ele.onclick = function () {
                alert(document.getElementById("username").value);
            };
            //10.设置#username的value属性值
            var btn10Ele = document.getElementById("btn10");
            btn10Ele.onclick = function () {
                document.getElementById("username").value="123456";
                alert(document.getElementById("username").value);
            };
            //11.返回#bj的文本值
            var btn11Ele = document.getElementById("btn11");
            btn11Ele.onclick = function () {
                //innerText只取文本，innerHTML取所有内容
                alert(document.getElementById("bj").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>

document对象的补充

createElement

注意：

也可以使用createTestNode创建文本节点对象，然后再添加子元素达到同样的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>createElement</title>
    <script type="text/javascript">
        //使用JS代码来创建html代码，并显示在页面上
        //标签的内容：<div>星月神话</div>
        window.onload = function () {
            var divobj = document.createElement("div");//在内存中创建<div></div>
            divobj.innerHTML = "星月神话";    //依旧在内存中，设置补充内容
            //添加子元素
            document.body.appendChild(divobj);
        }
    </script>
</head>
<body>

</body>
</html>

println("")

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
03SGG_javaWeb_03javascript

整理自尚硅谷Javaweb课程(后端）及其笔记js仅用作个人笔记留存链接：尚硅谷javaWeb课程js部分文章目录javaScript简介javaScript和html代码的结合方式第一种方式第二种方式变量JS变量类型JavaScript特殊值关系（比较）运算符逻辑运算符数组函数函数的定义方式函数的arguments隐性参数JS的自定义对象Object形式的自定义对象{}形式的自定义对象JS中的事件常用的事件事件注册onload事件onclick事件onblur事件onchange事件onsubmit事
复制链接

扫一扫