JavaWeb学习之JavaScript基础学习_会javaweb学js-CSDN博客

本文链接：https://blog.csdn.net/wod_maaya/article/details/108147961

三 JavaScript

1 JS介绍

JS语言诞生主要是完成页面的数据验证，因此它运行在客户端，需要运行浏览器来解析执行JS代码。JS是Netscape公司的产品，最初命名为LiveScript，但为了吸引Java程序员呢，更名为JavaScript
特点：

JS是弱类型，Java是强类型
交互性——JS可以做到信息的动态交互
安全性——JS不允许直接访问本地硬盘
跨平台性——只要是可以解释JS的浏览器都可以执行，与平台无关

2 JS和HTML的结合方式

注意，使用script标签来将JS与HTML结合时，同一个标签中两种方式只能选择一种

第一种方式

只需要在head或者body标签中使用script标签来编写JS代码即可。

<!DOCTYPE html>biankb
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的第一种结合方式</title>
    <script type="text/javascript">
        /*alert是JS语言提供的一个警告框函数,
        他可以接受任何类型的参数，这个参数就是警告框的提示信息
        */
        alert("你现在看到的是什么界面呢？")
        alert("hello JS!");
    </script>
</head>
<body>

</body>
</html>

第二种方式

使用script标签的src属性来引入单独的JS代码文件实现JS与HTML的结合

//为被引入的js文件中的代码内容
alert("HELLO JS!")

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的第二种结合方式</title>
    <!-- 这里结合第一种JS结合方式来展现 -->
    <script type="text/javascript">
        alert("这里是直接写入html的方式")
    </script>
    <!--使用script标签导入JS文件-->
    <script type="text/javascript" src="JS的第二种结合方式.js"></script>
</head>
<body>

</body>
</html>

3 变量

JS中的变量是可以存放某些值的内存的命名。

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>JS中的变量举例</title>
    <script type="text/javascript">
        var i;
        alert("变量i的初始值为" + i);//undefined

        i = 12;
        //typeof()是js语言提供的函数
        alert("变量i类型为" + typeof (i));//number


        i="abc";
        alert("变量i类型为" + typeof (i));//number

        var a = 12;        var b = "abc";
        alert("a*b的值为：" + a*b);

    </script>
</head>
<body>
这是JS中的变量举例
</body>
</html>

关系运算

其他关系运算与java中类似，不赘述。
等于：“= =” ，做简单的字面值的比较
全等于： “===”，不但做字面值的比较，还会对变量的数据类型进行比较

<!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) + "(a==b)");
        alert((a===b) + "(a===b)");
    </script>
</head>
<body>
这是JS中的关系运算
</body>
</html>

逻辑运算

在JS语言中，逻辑运算符为：(且或运算符为短路运算符)

且运算：&&
当表达式全为真时，返回最后一个表达式的值。
当表达式有一个为假，返回假的表达式的值。
或运算：||
当表达式全为假，返回最后一个表达式的值。
当表达式有一个为真，返回真的表达式的值
取反运算：！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逻辑运算</title>
    <script type="text/javascript">
        //注意，在JS语言中，所有的变量都可以作为一个boolean类型的变量使用
        //0，null，undefined，“”都会被认为是false，而其他形式的变量这会被认为是true

        /*如var a = 0;
        * if(a){
        *     alert("a为真");
        * }else{
        *     alert("a为假");
        * }
        * */

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

        alert(b&&a);//abc
        alert(d||a);//abc
        alert(d&&a);//null
    </script>
</head>
<body>

</body>
</html>

4 数组

数组定义方式

JS中数组的定义：
var 数组名 = []；定义一个空数组
var 数组名 = [1,“abc”,true]；定义数组的同时赋值元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组</title>
    <script type="text/javascript">
        var arr = [true , 1];
        alert(arr.length);//2

        //在JS语言中数组，只要通过数组下标赋值，那么最大的下标值就会对数组进行自动扩容操作
        arr[10] = 2;
        alert(arr.length);
        for (var i = 0; i < arr.length; i++) {
            alert(arr[i]);
        }

    </script>
</head>
<body>
JS中的数组定义方式
</body>
</html>

5 函数

函数的第一种定义方式

可以使用function关键字来定义函数

function 函数名(形参列表){
    函数体
}

在JS语言中，只需要在函数体内直接使用return语句返回值就可以定义带有返回值的函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数1</title>
    <script type="text/javascript">
        function fun1(a){
            alert(a);//输出参数值
        }

        fun1(1258);//调用函数

        function func2(){
            alert("您调用了一个无参函数。");
        }

        func2();
    </script>
</head>
<body>
函数的第一种创建方式
</body>
</html>

函数的第二种定义方式

使用格式如下：

var 函数名 = function(形参列表){
    函数体
}

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数2</title>
    <script type="text/javascript">
        var func1 = function (a){
            alert(a);
        }

        func1(2323);

        var func2 = function (){
            alert("您调用的是无参函数！");
        }

        func2();
    </script>
</head>
<body>
函数的第二种创建方式
</body>
</html>

JS中的函数重载

注意，在Java中函数是可以重载的，但是在JS语言中，函数的重载会导致直接覆盖掉上一次对其的定义。也即JS语言中不支持函数的重载。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数重载</title>
    <script type="text/javascript">
        function func1(){
            alert("这是函数的第一重载形式。");
        }

        function func1(){
            alert("这是函数的第二重载形式。");
        }

        func1();
    </script>
</head>
<body>
JS中的函数重载
</body>
</html>

函数的arguments隐形参数（只在function函数内）

在function函数内不需要定义，但是可以直接用来获取所有参数的变量，叫做隐性参数。与java中的可变形参比较相似。
js中的隐性参数也跟java的可变长参数相似，操作是类似于数组的操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隐藏参数</title>
    <script type="text/javascript">
        //演示隐藏参数的使用方式
        function func1(a){
            alert(arguments.length);

            alert(arguments[0]);
            alert(arguments[1]);
            alert(arguments[2]);

            alert("a=" + a);

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

            alert("无参函数func1()");

        }
        func1(1,2,3);

        //编写一个函数，用于计算所有参数相加的和并返回
        function sum(num1 , num2){
            var result = 0;
            for (let i = 0; i < arguments.length; i++) {
                if (typeof(arguments[i])=="number"){
                    result += arguments[i];
                }
            }
            return result;
        }

        alert(sum(1,1,12,23,4,24,123,1));

    </script>
</head>
<body>
隐藏参数的使用举例
</body>
</html>

6 JS中的自定义对象

Object形式的自定义对象

对象的定义：

var 变量名 = new Object();//对象实例（空对象）
变量名.属性名 = 值;//定义一个属性
变量名.函数名 = function(){}//定义一个函数

对象的访问：

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

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS中的自定义对象</title>
    <script type="text/javascript">
        var object1 = new Object();
        object1.name = "xiaoxin";
        object1.age = 16;
        object1.getName = function (){
            return this.name;
        }
        alert(object1.name);
        alert(object1.getName());
    </script>
</head>
<body>

</body>
</html>

{}形式的自定义对象

对象的定义：

var 变量名 = {                    //空对象
    属性名:值,                    //定义一个属性
    属性名:值,                    //定义一个属性
    函数名:function(){}           //定义一个函数
};

对象的访问：

对象名.属性名/函数名();

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{}形式的自定义对象</title>
    <script type="text/javascript">
        var student1 = {
            name : "xiaoxiao",
            age : 10 ,
            getName(){
                return this.name;
            }
        };

        alert(student1.name);
        alert(student1.age);
        alert(student1.getName());
    </script>
</head>
<body>

</body>
</html>

JS中的事件

什么是事件？事件是电脑输入设备与页面进行交互的响应，称之为事件

常用的事件有：

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

事件的注册又分为静态注册和动态注册

什么是事件的注册（绑定）？其实就是告知浏览器，当事件响应后需要执行哪些操作代码，叫做事件注册或者事件绑定。

静态注册事件：通过html标签的事件属性直接赋予事件响应后的代码，叫做静态注册。
动态注册事件：是指先通过js代码得到标签的dom对象，然后通过dom对象.事件名 = function(){}的形式赋予事件响应后的代码，叫动态注册。
动态注册的基本步骤：（1）获取标签的dom对象（2）对象名.事件名 = function(){}

下面是代码演示
onload加载完成事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onload事件</title>
    <script type="text/javascript">
        //onload事件的方法
        function onloadFunc(){
            alert("静态注册onload事件，所有代码");
        }

        //onload事件动态注册的固定写法
        window.onload = function (){
            alert("动态注册onload事件。");
        }

    </script>

</head>
<!--静态注册onload事件
    onload事件是浏览器解析完页面之后就会自动触发的事件
    <body οnlοad="onloadFunc()">
-->
<body>

</body>
</html>

onclick单击事件

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

        //动态注册onclick事件
        window.onload = function (){
        //document表示页面中的所有内容，通过id属性获取标签对象
            var btnObj = document.getElementById("btn01");
            btnObj.onclick = function (){
                alert("动态注册的onclick事件");
            }
        }
    </script>
</head>
<body>
<button onclick="onclickFunc()"><font>这是一个按钮,用于显示静态注册onclick事件</font></button>
<button id="btn01">这是一个按钮，用于显示动态注册onclick事件</button>
</body>
</html>

onblur失去焦点事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onblur事件</title>
    <script type="text/javascript">

        //静态注册onblur事件
        function onblurFunc(){
            //console是控制台对象，专门用来向浏览器的控制器打印输出，用于测试使用，F12打开网页控制台 
            //log是打印方法
            alert("静态注册失去焦点事件。");
        }

        window.onload = function (){
            var password = document.getElementById("password");

            password.onblur = function(){
                alert("动态注册失去焦点事件。");
            }
        }
    </script>
</head>
<body>
用户名：<input type="text" onblur="onblurFunc();"><br/>
密码：<input type="password" id="password">
</body>
</html>

onchange内容发生改变事件

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

        window.onload = function (){
            var selObj = document.getElementById("selection01");

            selObj.onchange = function (){
                alert("动态注册onchange事件。");
            }
        }


    </script>
</head>
<body>
<select onchange="onchangeFunc()">
    <option selected>--角色1--</option>
    <option>张圆圆</option>
    <option>范振钰</option>
    <option>郭富城</option>
    <option>洪金宝</option>
    <option>黎明</option>
</select>
<br/>
<select id="selection01">
    <option selected>--角色2--</option>
    <option>张圆圆</option>
    <option>范振钰</option>
    <option>郭富城</option>
    <option>洪金宝</option>
    <option>黎明</option>
</select>
</body>
</html>

表单提交事件
注意，onsubmit事件是以form为基础，不要将其添加到button或者是submit输入上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单提交事件</title>
    <script>
        //静态注册表单提交事件
        function staticOnSubmit() {
            //首先要验证所有表单项是否合法
            alert("表单提交失败！-----表单项不合法。")
            //不提交则return false ，提交则return true
            return false;
        }

        //动态注册表单提交事件
        window.onload = function () {
            var submit = document.getElementById("submitId");
            submit.onsubmit = function () {
                alert("表单提交失败！------表单项不合法。")
                //不提交则return false ，提交则return true
                return false;
            }
        }
    </script>
</head>
<body>
<!-- return false可以阻止表单的提交 -->
<form action="http://localhost:8080" method="get" onsubmit="return staticOnSubmit()">
    <input type="submit" value="静态注册表单提交">
</form>
<br/>
<form action="http://localhost:8080" method="get" id="submitId">
    <input type="submit" value="动态注册表单提交">
</form>


</body>
</html>

DOM模型

DOM全称是Document Object Model，即文档对象模型。就是将页面文档中的标签，属性，文本等转换为对象来管理。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>document对象</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一行文字<p>
<ul>
    <li>一</li>
    <li>二</li>
    <li>三</li>
</ul>
</body>
</html>

在这里插入图片描述

document对象

第一：document对象管理了所有的HTML文档内容
第二：document是一种树结构的文档，有层级关系
第三：他让我们可以把所有的标签都对象化
第四：我们可以通过document访问所有的标签对象

document对象的方法

getElementById方法。表明按照id属性在页面中获取标签对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按id查找对象</title>
    <script>
       /*
       * 需求:当用户点击了校验按钮，要获取输出框中的内容，并且验证其是否合法
       * 验证的规则是，必须由字母，数字，下划线组成。并且长度是5-12位
       * */

        function onclickFunc() {
            var usernameobj = document.getElementById("userName000");
            //得到的就是dom对象
            // alert(usernameobj);//输出验证dom对象
            // alert(usernameobj.id);//输出dom对象的id属性
            // alert(usernameobj.type);//输出dom对象的类型
            // alert(usernameobj.value);//用来得到输入框中的内容
            var userName = usernameobj.value;

            //如何验证字符串复合某个规则，需要使用到正则表达式的技术
            var patt = /^\w{5,12}$/;
            //正则表达式中的test函数可以判断字符串是否符合正则表达式的要求
            if (patt.test(userName)){
                alert("输入正确！校验成功！");
            }else{
                alert("输入错误！校验失败！")
            }

        }
    </script>
</head>
<body>
请输入：
<input type="text" id="userName000" value="">
<button onclick="onclickFunc()">校验</button>
</body>
</html>

正则表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式的使用</title>
    <script type="text/javascript">
        //RegExp值正则表达式的缩写
        var pattern = /^\w{2,15}$/;
        //这是一个正则表达式，可以作为字符串的标准
        /**
         * 看一看是否包含字母：e
         * @type {RegExp}
         */
        // var pat = new RegExp("e")
        // 下面的也是正则表达式
        // var pat = /e/

        // var str = 'aaae'
        // alert((pat.test(str)))
        /**
         * 表示字符串中是否包含，a,b,c,中的任意一个！
         * @type {RegExp}
         */
        // var pat = /[abc]/

        // // var str = 'abcde'
        // var str = '123445'
        // alert((pat.test(str)))
        /**
         * 表示是否包含小写字母a到z！
         * @type {RegExp}
         */
        // var pat = /[a-z]/
        // //大写就变成A-Z！
        // //数字就变成0-9！

        // // var str = 'abcde'
        // var str = '12a3445'
        // alert((pat.test(str)))
        /**
         * 元字符
         * \w元字符用于查找单词字符
         * \W表示非单词
         * 单词字符：a-z.A-Z,0-9,下划线
         */
        //  var pat = /\w/

        // var str = '[[_]]'
        // alert((pat.test(str)))
        /**
         * 量词
         * n+:表示匹配至少包含一个n的字符串
         * n*:表示匹配包含零个或者一个的字符串
         * n?:表示匹配任何包含零个或者一个的n字符串
         * @type {RegExp}
         */
        // var pat = /a*/

        // var str = '[[aaaaaaab]]'
        // alert((pat.test(str)))
        /**
         * ^n:表示匹配任何开头为n的字符串
         *
         */
        // var pat = /^n/

        // var str = '[[aaaaaanb]]'
        // alert((pat.test(str)))
        /**
         * 必须以a结尾
         */
        // var pat = /a$/

        // // var str = '123'
        // // var str = '123a'
        // var str = '123ab'
        // alert((pat.test(str)))
        /**
         *^a{3,5}$:要求重头到尾都是小写字母a,数量在[3,5]
         */
        var pat = /^a{3,5}$/

        var str = 'aabaa'
        alert((pat.test(str)))
    </script>
</head>
<body>
</body>
</html>

常见的两种验证提示效果
第一种：在校验时使用文字提示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证提示效果（一）</title>
    <script>
        /*
        * 需求:当用户点击了校验按钮，要获取输出框中的内容，并且验证其是否合法
        * 验证的规则是，必须由字母，数字，下划线组成。并且长度是5-12位
        * */

        function onclickFunc() {
            var usernameobj = document.getElementById("userName000");
            //得到的就是dom对象
            // alert(usernameobj);
            // alert(usernameobj.id);
            // alert(usernameobj.type);
            // alert(usernameobj.value);//用来得到输入框中的内容
            var userName = usernameobj.value;

            var infoObj = document.getElementById("infoId");

            //如何验证字符串复合某个规则，需要使用到正则表达式的技术
            var patt = /^\w{5,12}$/;
            //正则表达式中的test函数可以判断字符串是否符合正则表达式的要求
            if (patt.test(userName)){
                // alert("输入正确！校验成功！");
                infoObj.innerHTML = "输入正确！校验成功！"

            }else{
                // alert("输入错误！校验失败！")
                infoObj.innerHTML = "输入错误！校验失败！"
            }

        }
    </script>
</head>
<body>
请输入：
<input type="text" id="userName000" value="">
<button onclick="onclickFunc()">校验</button>
<span style="color: red" id="infoId"></span>
</body>
</html>

第二种：在校验时使用图片标识

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证提示效果（一）</title>
    <script>
        /*
        * 需求:当用户点击了校验按钮，要获取输出框中的内容，并且验证其是否合法
        * 验证的规则是，必须由字母，数字，下划线组成。并且长度是5-12位
        * */

        function onclickFunc() {
            var usernameobj = document.getElementById("userName000");
            //得到的就是dom对象
            // alert(usernameobj);
            // alert(usernameobj.id);
            // alert(usernameobj.type);
            // alert(usernameobj.value);//用来得到输入框中的内容
            var userName = usernameobj.value;

            var infoObj = document.getElementById("infoId");

            //如何验证字符串复合某个规则，需要使用到正则表达式的技术
            var patt = /^\w{5,12}$/;
            //正则表达式中的test函数可以判断字符串是否符合正则表达式的要求
            if (patt.test(userName)){
                // alert("输入正确！校验成功！");
                infoObj.innerHTML = "<img src=\"对号.png\" width=\"35\" height=\"20\">"

            }else{
                // alert("输入错误！校验失败！")
                infoObj.innerHTML = "<img src=\"错号.png\" width=\"25\" height=\"20\">"
            }

        }
    </script>
</head>
<body>
请输入：
<input type="text" id="userName000" value="">
<button onclick="onclickFunc()">校验</button>
<span id="infoId">
</span>
</body>
</html>

getElementByName方法
根据name属性查找DOM对象返回的是带有指定名称的对象集合。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementsByName方法</title>
    <script>
        /*
        * 需求：使用全选、全不选、反选来对一些多选选项进行选择
        * 其中需要使用到多选选项的name属性
        * */
        window.onload = function () {
            var hobbys = document.getElementsByName("hobby");
            var selectAll = document.getElementById("SelectAll");
            var selectNone = document.getElementById("selectNone");
            var reverseSelected = document.getElementById("reverseSelected");

            selectAll.onclick = function () {
                for (var i = 0; i < hobbys.length; i++) {
                    hobbys[i].checked = true;
                }
            }

            selectNone.onclick = function () {
                for (var i = 0; i < hobbys.length; i++) {
                    hobbys[i].checked = false;
                }
            }

            reverseSelected.onclick = function () {
                for (var i = 0; i < hobbys.length; i++) {
                    if (hobbys[i].checked == true){
                        hobbys[i].checked = false;
                    }else{
                        hobbys[i].checked = true;
                    }
                }
            }
        }
    </script>
</head>
<body>
打球<input type="checkbox" name="hobby" id="001" value="ball"><br/>
跳舞<input type="checkbox" name="hobby" id="002" value="dance"><br/>
说唱<input type="checkbox" name="hobby" id="003" value="rap"><br/>
游戏<input type="checkbox" name="hobby" id="004" value="game"><br/>
<button id="SelectAll">全选</button>
<button id="selectNone">全不选</button>
<button id="reverseSelected">反选</button>
</body>
</html>

getElementsByTagName方法，即使用标签的名称来获得对应DOM对象的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementsByTagName方法</title>
    <script type="text/javascript">
        window.onload = function () {
            var inputs = document.getElementsByTagName("input");
            var selectAllButton = document.getElementById("selectAll000")
            selectAllButton.onclick = function () {
                for (var i = 0; i < inputs.length; i++) {
                    inputs[i].checked = true;
                }
            }
        }
    </script>
</head>
<body>
篮球<input type="checkbox" value="ball">
唱歌<input type="checkbox" value="sing">
说唱<input type="checkbox" value="rap">
跳舞<input type="checkbox" value="dance">
<br/>
<button id="selectAll000">全选</button>
</body>
</html>

document对象的以上三个查询方法使用时的注意事项

使用优先级：id优先，随后是name，最后是tagName
注意，只有当html页面加载完成之后才可以对标签对象进行查询

节点的常用属性和方法

节点就是标签对象（当然文字、注释等也是节点，只不过开发中只考虑标签）

方法

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

属性

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

document对象的补充说明

DOM对象的createElement方法。就是使用js代码在html页面中创建标签。
appendChild方法。即在指定的节点（即标签）下创建子节点（即子标签）的方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>createElement方法</title>
    <script>
        window.onload = function () {
            //现在所做的是使用js代码来创建html标签，并显示在页面上
            //标签的内容就是<div>你好<div>
            var divObj = document.createElement("div");
            alert(divObj);//在内存中是以<div></div>存在的
            divObj.innerHTML = "你好！";//但是还是只是在内存中，不能在页面中显示出来

            //给body加子元素即可显示
            document.body.appendChild(divObj);
        }

    </script>
</head>
<body>

</body>
</html>