javascript基础

一、js的简介
    1、js是什么
        js是可以嵌入到html中,是 基于对象 和 事件驱动 的 脚本语言(不需要编译,可以嵌入到其它语言)
        特点:
            (1)交互性
            (2)安全性:js不能访问本地磁盘
            (3)跨平台:浏览器中都具备js解析器
    2、js能做什么
        (1)js能动态的修改(增删)html和css的代码
        (2)能动态的校验数据
        
    3、js历史及组成
        ECMAScript    BOM(浏览器对象模型)  DOM(文档对象模型)    
    4、js被引入的方式
        (1)内嵌脚本
            <input type="button" value="button" onclick="alert('xxx')" />            
        (2)内部脚本
            <script type="text/javascript">
                alert("xxx");
            </script>
        (3)外部脚本
            首先先创建一个js文件
            其次在html中引入
                <script type="text/javascript" src="demo1.js"></script>
        
        js代码放在哪?
            放在哪都行 但是在不影响html功能的前提下 越晚加载越好

二、js基本语法
    1、变量
        (1)
        var x = 5;
        x = 'javascript';
        var y = "hello"; 在js中单引和双引一致
        var b = true;
        (2)
        x = 5;
    
    2、原始(基本)数据类型
        (1)number:数字类型
        (2)string:字符串类型
        (3)boolean:布尔类型
        (4)null:空类型
        (5)undefined:未定义 typeof 判断类型
        
        注意:number、boolean、string是伪对象,能调方法
        
        类型转换:
            numberoolean转成string
                toString();
            stringoolean转成number
                parseInt()   
                parseFloat()
                boolean不能转  parseInt(true)得到NaN
                string可以将数字字符串转换成number 如果“123a3sd5” 转成123(parseInt(123a3sd5)默认舍去非数字后的字符)
            强制转换
                Boolean()     强转成布尔
                    数字强转成布尔  非零就是true Boolean(123)   零就是false Boolean(0)
                    字符串强转成布尔  非“”(空字符串)就是true Boolean(true)  空字符串“”就是false
                Number()    强转成数字
                    布尔转数字 true转成1  false转成0
                    字符串转数字 不能强转 NaN
    
    3、引用数据类型
        java:    Object obj = new Object();
        js:     var obj = new Object();  object类型
                 var num = new Number();    
    
    4、运算符
        (1)赋值运算符
            var x = 5;
        (2)算数运算符
            + - * / %
            +: 遇到字符串变成连接
            -:先把字符串转成数字然后进行运算
            *: 先把字符串转成数字然后进行运算
            /: 先把字符串转成数字然后进行运算
        (3)逻辑运算符
            &&    ||  短路作用
        (4)比较运算符
            <    >    >=    <=    !=    ==
            ===:全等:类型与值都要相等
        (5)三元运算符
            3>2?"大于":"小于"  大于
        (6)void运算符
            <a href="javascript:void(0);">xxxxxx</a> 不会跳转
        (7)类型运算符
            typeof:判断数据类型 返回我的数据类型
            instanceof:判断数据类型 是否是某种类型 返回true/false
            var obj = new Object();
            alert(typeof obj);//object
            alert(obj instanceof Object);//true
    
    
    5、逻辑语句
        (1)if-else
            //条件:true/false
            //数字非0 字符串非空====true
                if(9){
                    alert("true--");
                }else{
                    alert("false--");
                }
        (2)switch
            var x = "java";
            switch(x){
                case "css":
                    alert("css");
                    break;
                case "js":
                    alert("js");
                    break;
                case "java":
                    alert("java");
                    break;
                default:
                    alert("def");
            }
                打印java
        (3)for
             for(var i = 0;i<5;i++){
                alert(i);
             }
        (4)for in
            var arr = [1,3,5,7,"js"];
             for(index in arr){//index代表角标
                //alert(index);  //0 1 2 3 4
                alert(arr[index]);  //1 3 5 7 js
             }
三、js内置对象

    (1)Number 数字对象
        创建方式:
            var myNum=new Number(value);
            var myNum=Number(value);     type:object
            参数 value 是要创建的 Number 对象的数值,或是要转换成数字的值。

        属性和方法:
            toString():转成字符串 type:string
            valueOf():返回一个 Number 对象的基本数字值 type:number
    (2)Boolean
        创建方式:
            var bool = new Boolean(value);    
            var bool = Boolean(value);
        属性和方法:
            toString():转成字符串
            valueOf():返回一个 Boolean 对象的基本值(boolean)            
    (3)String
        创建方式:
            var str = new String(s);
            var str = String(s);
        属性和方法:
            length:字符串的长度
            charAt():返回索引字符
            charCodeAt:返回索引字符unicode
            indexOf():返回字符的索引
            lastIndexOf();逆向返回字符的索引
            split();将字符串按照特殊字符切割成数组
            substr():从起始索引号提取字符串中指定数目的字符
            substring():提取字符串中两个指定的索引号之间的字符(包括头不包括尾)
            toLocalCase();转小写
            toUpperCase();转大写
        示例:  
            var str = "a-b-cdc-FG";伪对象,也可调用属性和方法
            var str = new String("a-b-cdc-FG");
            //alert(str.length);//10
            //alert(str.charAt(4));//c
            //alert(str.charCodeAt(4));//99
            //alert(str.indexOf("c"));//4
            //alert(str.lastIndexOf("c"));//6 角标还是从前往后数
            //var arr = str.split("-");
            /* for(var i=0;i<arr.length;i++){
                alert(arr[i]);       //a b c d c F G
            } */
            //alert(str.substr(2,3));//b-c
            //alert(str.substring(2,3));//b
            //alert(str.toUpperCase()); //A-B-CDC-FG
    (4)Array
        创建方式:
            var arr = new Array();//创建空数组
            var arr = new Array(size);//创建一个指定长度的数据
            var arr = new Array(element0, element1, ..., element n);//创建数组直接实例化元素
            var arr = [];//空数组
            var arr = [1,2,5,"java"];//创建数组直接实例化元素
        属性和方法:
            length:数组长度
            join():把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔一个
            pop():删除并返回最后元素
            push():向数组的末尾添加一个或更多元素,并返回新的长度
            reverse();反转数组
            sort();排序
        示例:
            //var arr = [3,"z",1,"java",'js',true,4];
            //alert(arr.length);//7
            //alert(arr.join("-"));//3-7-1-java-js-true-4
            //alert(arr.pop()); //4
            //alert(arr); //3,7,1,"java",'js',true
            //alert(arr.push("R")); 8
            //alert(arr); //3,7,1,"java",'js',true,4,R
            //alert(arr.reverse()); 4,true,'js',"java",1,"z",3
            //alert(arr.sort());//按照字符串字典顺序进行排序 1,3,4,"java","js",true,"z"
    (5)Date
        创建方式:    
            var myDate = new Date();
            var myDate = new Date(毫秒值);//代表从1970-1-1到现在的一个毫秒值
        属性和方法
            getFullYear():年
            getMonth():月 0-11
            getDate():日 1-31
            getDay():星期 0-6(星期天是0)
            getTime():返回1970年1月1日午夜到指定日期(字符串)的毫秒数
            toLocalString();获得本地时间格式的字符串
        示例:
            var date = new Date();
            //alert(date.toString());  //Sat Jan 14 2017 07:19:25 GMT+0800
            //alert(date.toLocaleString()); //2017/1/14 上午7:19:25
            /* alert("year:"+date.getFullYear());//2017
            alert("month:"+date.getMonth());//0
            alert("date:"+date.getDate());//14
            alert("day:"+date.getDay());//6 */
            /* var time1 = date.getTime();
            var time2 = 1*24*60*60*1000;
            alert(new Date(time1+time2).toLocaleString()); */  //显示明天的这个时间 2017/1/15 上午7:25:11
            
    (6)Math
        创建方式:    
            Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin() 这样的函数只是函数,
            不是某个对象的方法。您无需创建它,通过把 Math 作为对象使用就可以调用其所有属性和方法。
        属性和方法
            PI:圆周率
            abs():绝对值
            ceil():对数进行上舍入
            floor():对数进行下舍入
            pow(x,y):返回 x 的 y 次幂
            random():0-1之间的随机数,包含
            round():四舍五入
        示例:
            /* var x = "-897";
            alert(Math.abs(x));   897     */
            /* var x = 12.34;
            var y = 2;
            var z = 4; */
            /* alert(Math.ceil(x));//13
            alert(Math.floor(x));//12
            alert(Math.round(x));//12 */
            //alert(Math.pow(y, z));//16
            //alert(Math.random());
    (7)RegExp
        创建方式:    
            var reg = new RegExp(pattern);
            var reg = /^正则规则$/;
        规则的写法:
            [0-9]
            [A-Z]
            [a-z]
            [A-z]   大小写都可以
            d      代表数字(digit)
            D    非数字
            w    查找单词字符(word)
            W    查找非单词字符
            s    查找空白字符(space)
            S    查找非空白字符
            n+    出现至少一次
            n*    出现0次或多次
            n?    出现0次或1次
            {5}     出现5
            {2,8}   2到8次
        方法:    
            test(str):检索字符串中指定的值。返回 true 或 false
        需求:
            校验邮箱:邮箱的正则表达式: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
            var email = haohao_827@163.com
            var reg = /^[A-z]+[A-z0-9_-]*@[A-z0-9]+.[A-z]+$/;
            reg.test(email);

四、js的函数
    1、js函数定义的方式
        (1)普通方式
            语法:function 函数名(参数列表){函数体}
            示例:
                function method(){
                    alert("xxx");
                }
                method();
        (2)匿名函数
            语法:function(参数列表){函数体}
            示例:
                var method = function(){
                    alert("yyy");
                };
                method();
        (3)对象函数
            语法:new Function(参数1,参数2,...,函数体);
            注意:参数名称必须使用字符串形式、最后一个默认是函数体且函数体需要字符串形式
            示例:
                var fn = new Function("a","b","alert(a+b)");
                fn(2,5);  // 7
    2、函数的参数
        (1)形参没有var去修饰
        (2)形参和实参个数不一定相等
        (3)arguments对象 是个数组 会将传递的实参进行封装
        function fn(a,b,c){
            //var sum = a+b+c;
            //alert(sum);
            //arguments是个数组 会将传递的实参进行封装
            for(var i=0;i<arguments.length;i++){
                alert(arguments[i]);   //1 2 4 8
            }
        }
        fn(1,2);       //NaN
        fn(1,2,4,8);  //7
        
    3、返回值
        (1)在定义函数的时候不必表明是否具有返回值
        (2)返回值仅仅通过return关键字就可以了 return后的代码不执行
        function fn(a,b){
            return a+b;
            //alert("xxxx");
        }
        alert(fn(2,3));
    
    4、js的全局函数(js已经定义好的,直接可以调用)
        (1)编码和解码
            encodeURI()   decodeURI()
            encodeURIComponet()      decodeURIComponent()
            escape()    unescape()
            三者区别:
                进行编码的符号范围不同吧,实际开发中常使用第一种
        示例
            var url = "http://www.baidu.com?name=张&password=123";
            alert(encodeURI(url));
            //http://www.baidu.com?name=%E5%BC%A0&password=123 只转中文
            alert(encodeURIComponent(url));
            //http%3A%2F%2Fwww.baidu.com%3Fname%3Dzhangsan%26password%3D123
            alert(escape(url));
            //http%3A//www.baidu.com%3Fname%3Dzhangsan%26password%3D123
        (2)强制转换
            Number()
            String()
            Boolean()
        (3)转成数字
            parseInt()
            parseFloat()
        (4)eval()方法    
            将字符串当作脚本进行解析运行
            //var str = "var a=2;var b=3;alert(a+b)";
            //eval(str);  //5
            function print(str){
                eval(str);
            }
            print("自定义逻辑");

五、js的事件
    事件
    事件源
    响应行为
    1、js的常用事件
        onclick:点击事件
        onchange:域内容被改变的事件
            需求:实现二级联动
            <select id="city">
                <option value="bj">北京</option>
                <option value="tj">天津</option>
                <option value="sh">上海</option>
            </select>
            <select id="area">
                <option>海淀</option>
                <option>朝阳</option>
                <option>东城</option>
            </select>
            <script type="text/javascript">
                var select = document.getElementById("city");
                select.onchange = function(){
                    var optionVal = select.value;
                    switch(optionVal){
                        case 'bj':
                            var area = document.getElementById("area");
                            area.innerHTML = "<option>海淀</option><option>朝阳</option><option>东城</option>";
                            break;
                        case 'tj':
                            var area = document.getElementById("area");
                            area.innerHTML = "<option>南开</option><option>西青</option><option>河西</option>";
                            break;
                        case 'sh':
                            var area = document.getElementById("area");
                            area.innerHTML = "<option>浦东</option><option>杨浦</option><option>长宁</option>";
                            break;
                        default:
                            alert("error");
                    }
                };                
            </script>
        onfocus:获得焦点的事件
        onblur:失去焦点的事件
            需求:    当输入框获得焦点的时候,提示输入的内容格式
                当输入框失去焦点的时候,提示输入有误
            <label for="txt">name</label>
            <input id="txt" type="text" /><span id="action"></span>
            <script type="text/javascript">
                var txt = document.getElementById("txt");
                txt.onfocus = function(){
                    //友好提示
                    var span = document.getElementById("action");
                    span.innerHTML = "用户名格式最小8位";
                    span.style.color = "green";
                };
                txt.onblur = function(){
                    //错误提示
                    var span = document.getElementById("action");
                    span.innerHTML = "对不起 格式不正确";
                    span.style.color = "red";
                };
            </script>
            
        onmouseover:鼠标悬浮的事件
        onmouseout:鼠标离开的事件
            需求:div元素 鼠标移入变为绿色 移出恢复原色
            #d1{background-color: red;200px;height: 200px;}
            <div id="d1"></div>
            <script type="text/javascript">
                var div = document.getElementById("d1");
                div.onmouseover = function(){
                    this.style.backgroundColor = "green";
                };
                div.onmouseout = function(){
                    this.style.backgroundColor = "red";
                };
            </script>
        
    
        onload:加载完毕的事件
            等到页面加载完毕在执行onload事件所指向的函数
            <span id="span"></span>
            <script type="text/javascript">
                window.onload = function(){
                    var span = document.getElementById("span");
                    alert(span);
                    span.innerHTML = "hello js";
                };
            </script>
            
    2、事件的绑定方式
        (1)将事件和响应行为都内嵌到html标签中
            <input type="button" value="button"  onclick="alert('xxx')"/>
        (2)将事件内嵌到html中而响应行为用函数进行封装
            <input type="button" value="button" onclick="fn()" />
            <script type="text/javascript">
                function fn(){
                    alert("yyy");
                }
            </script>
        (3)将事件和响应行为 与html标签完全分离
            <input id="btn" type="button" value="button"/>
            <script type="text/javascript">
                //找到标签
                var btn = document.getElementById("btn");
                btn.onclick = function(){
                    alert("zzz");
                };
            </script>
        
        ****this关键字
            this经过事件的函数进行传递的是html标签对象
            <input id="btn" name="mybtn" type="button" value="button123" onclick="fn(this)"/>
            <script type="text/javascript">
                function fn(obj){  
                    alert(obj.name);  //mybtn
                }
            </script>
    
    3、阻止事件的默认行为
        IE:window.event.returnValue = false;
        W3c: 传递过来的事件对象.preventDefault();
        //ie:window.event.returnValue = false;
        //W3c:传递过来的事件对象.preventDefault();
        //W3c标准
        if(e&&e.preventDefault){
            alert("w3c");
            e.preventDefault();
        //IE标签
        }else{
            alert("ie");
            window.event.returnValue = false;
        }
        
        
        //通过事件返回false也可以阻止事件的默认行为
        <a href="demo11.html" onclick="return false">点击我吧</a>
    
    4、阻止事件的传播
        IE:window.event.cancelBubble = true;
        W3c: 传递过来的事件对象.stopPropagation();
        if(e&&e.stopPropagation){
            alert("w3c");
            e.stopPropagation();
        //IE标签
        }else{
            alert("ie");
            window.event.cancelBubble = true;
        }    

六、js的bom
    (1)window对象
        弹框的方法:
            提示框:alert("提示信息");没有返回值
            确认框:confirm("确认信息");

                有返回值:如果点击确认返回true  如果点击取消 返回false
                var res = confirm("您确认要删除吗?");
                alert(res);
            输入框:prompt("提示信息");

                有返回值:如果点击确认返回输入框的文本 点击取消返回null
                var res =  prompt("请输入密码?");
                alert(res);
        open方法:
            window.open("url地址");            
            open("../jsCore/demo10.html");
            
        定时器:
            setTimeout(函数,毫秒值); 过了毫秒值之后去执行函数
                setTimeout(
                    function(){
                        alert("xx");
                    },
                    3000
                );  //3秒后弹xx框
            clearTimeout(定时器的名称);
            示例:
                //定义定时器
                var timer;
                var fn = function(){
                    alert("x");
                    timer = setTimeout(fn,2000);
                };
                var closer = function(){
                    clearTimeout(timer);
                };
                fn();

            setInterval(函数,毫秒值);
            clearInterval(定时器的名称)
                var timer = setInterval(
                function(){
                    alert("nihao");
                },
                2000
            );
            var closer = function(){
                clearInterval(timer);
            };
            
        需求:注册后5秒钟跳转首页
        恭喜您注册成功,<span id="second" style="color: red;">5</span>秒后跳转到首页,如果不跳转请<a href="../jsCore/demo10.html">点击这里</a>
        <script type="text/javascript">
            var time = 5;
            var timer;
            timer = setInterval(
                function(){
                    var second = document.getElementById("second");
                    if(time>=1){
                        second.innerHTML = time;
                        time--;
                    }else{
                        //关闭定时器
                        clearInterval(timer);
                        location.href="http://www.baidu.com";
                    }
                },
                1000
            );
        </script>
        
    (2)location    
        location.href="url地址";
    (3)history
        back();
        forward();
        go();
        <a href="demo7.html">后一页</a>
        <input type="button" value="上一页" onclick="history.back()">
        <input type="button" value="下一页" onclick="history.forward()">
        
        <input type="button" value="上一页" onclick="history.go(-1)">
        <input type="button" value="下一页" onclick="history.go(1)">
        
七、js的dom
    1、理解一下文档对象模型
        html文件加载到内存之后会形成一颗dom树,根据这些节点对象可以进行脚本代码的动态修改
        在dom树当中 一切皆为节点对象
    2、dom方法和属性
        (1) document.getElementById("id");
        示例:
                      //输出 <input type="text" name="username" value="IT精英培训"  id="tid" >标签value属性的值
             var inputNode = document.getElementById("tid");
             alert(inputNode.value);
                 //输出 <input type="text" name="username" value="IT精英培训"  id="tid" >标签type属性的值
                    var inputNode = document.getElementById("tid");
            alert(inputNode.type);
        (2) document.getElementById("id");
                //通过元素的name属性获取所有元素的引用
               var inputNodes = document.getElementsByName("tname");
               //测试该数据的长度
               //alert(inputNodes.length);
               //遍历元素,输出所有value属性的值
               /* for(var i=0;i<inputNodes.length;i++){
                   var inputNode = inputNodes[i];
                   alert(inputNode.value);
               } */
               //为每个文本框(<input type="text">)增加change事件,当值改变时,输出改变的值
               for(var i=0;i<inputNodes.length;i++){
                   var inputNode = inputNodes[i];
                   inputNode.onchange = function(){
                       alert(this.value);
                   };
               }
         (3) document.getElementsByTagName
             <form name="form1" action="test.html" method="post" >
                   <input type="text" name="tname" value="IT精英培训_1"  id="tid_1"  ><br>
              <input type="text" name="tname" value="IT精英培训_2"  id="tid_2"  ><br>
              <input type="text" name="tname" value="IT精英培训_3"  id="tid_3"  ><br>
              <input type="button" name="ok" value="保存1"/>
                 </form>
       
               <select name="edu" id="edu">
                     <option value="博士">博士^^^^^</option>
                  <option value="硕士" selected="selected">硕士^^^^^</option>
                  <option value="本科"  >本科^^^^^</option>
                  <option value="幼儿园">幼儿园^^^^^</option>
                </select>
       
           <select name="job" id="job" >
                     <option value="美容">美容^^^^^</option>
                  <option value="IT">IT^^^^^</option>
                  <option value="程序员">程序员^^^^^</option>
                  <option value="建筑师">建筑师^^^^^</option>
              </select>
       
           <br/>

           <input id="btn" type="button" value="输出select被选中的值" />            

            //获取所有的input元素,返回值是数组
                var inputNodes = document.getElementsByTagName("input");
            //测试长度
            //alert(inputNodes.length);
                //遍历value的值
               /* for(var i=0;i<inputNodes.length;i++){
                   var inputNode = inputNodes[i];
                   alert(inputNode.value);
               }  */
            //输出type="text"中 value属性的值 不包含按钮(button)
            /* for(var i=0;i<inputNodes.length;i++){
                   var inputNode = inputNodes[i];
                   if(inputNode.type=="text"){
                       alert(inputNode.value);
                   }
                } */
    
                //输出所有下拉选select的option标签中value的值
                /* var optionNodes = document.getElementsByTagName("option");
                    for(var i=0;i<optionNodes.length;i++){
                   var optionNode = optionNodes[i];
                       alert(optionNode.value);
                   } */
    
                //输出所有下拉选 id="edu"中option标签中 value属性的值
                /* var edu = document.getElementById("edu");
                var optionNodes = edu.getElementsByTagName("option");
                for(var i=0;i<optionNodes.length;i++){
                   var optionNode = optionNodes[i];
                   alert(optionNode.value);
               } */
       
              //点击按钮输出下拉框中被选中的值
              /* var btn = document.getElementById("btn");
              btn.onclick = function(){
                  var optionNodes = document.getElementsByTagName("option");
                for(var i=0;i<optionNodes.length;i++){
                   var optionNode = optionNodes[i];
                   if(optionNode.selected){  //返回true
                       alert(optionNode.value);
                       }
                   }
              }; */

          (4)hasChildNodes() 检查一个元素是否有子节点,返回true或false
            //查看id="edu"的节点是否含有子节点
                  var edu = document.getElementById("edu");
               //alert(edu.hasChildNodes());
         (5)<form name="form1" action="test.html" method="post" >
                   <input type="text" name="tname" value="IT精英培训_1"  id="tid_1"  ><br>
              <input type="text" name="tname" value="IT精英培训_2"  id="tid_2"  ><br>
              <input type="text" name="tname" value="IT精英培训_3"  id="tid_3"  ><br>
              <input type="button" name="ok" value="保存1"/>
                 </form>
       
               <p id="pid">明天上课</p>

            //元素节点  id="tid_1"  输出nodeName nodeType nodeValue
            //var node = document.getElementById("tid_1");
            /* alert(node.nodeName);//input  nodeName是只读属性
            alert(node.nodeType);//1  nodeType是只读属性
            alert(node.nodeValue);//null */
    
            //文本节点 id="pid"  输出nodeName nodeType nodeValue
            /* var node = document.getElementById("pid");
            var textNode = node.firstChild;
            alert(textNode.nodeName);//#text
            alert(textNode.nodeType);//3
            alert(textNode.nodeValue);//明天上课 */
    
            //属性节点  id="pid"   输出nodeName nodeType nodeValue
            /* var node = document.getElementById("pid");
            var p = node.getAttributeNode("id");
            alert(p.nodeName);//id
            alert(p.nodeType);//2
            alert(p.nodeValue);//pid  */

        (6)
               您喜欢的城市:<br>
               <ul>
                    <li id="bj" value="beijing">北京</li>
                 <li id="sh" value="shanghai">上海</li>
                 <li id="cq" value="chongqing"> 重庆</li>
               </ul>
      
              您喜欢的游戏:<br>
               <ul>
                    <li id="fk" value="fangkong">反恐<p>精英</p></li>
                 <li id="ms" value="moshou">魔兽</li>
                 <li id="cq" value="chuanqi">传奇</li>
               </ul>   
            
                 //点击北京节点, 将被反恐节点替换
                 var bj = document.getElementById("bj");
               var fk = document.getElementById("fk");
                bj.onclick = function(){
                    var parentNode = this.parentNode;
                    parentNode.replaceChild(fk,this);
                };

        (7)     得到属性值
              //<li id="xj" value="xingji">星际争霸</li>节点的value属性的值
              var xj = document.getElementById("xj");
               alert(xj.getAttribute("value"));
              设置属性值
             //给这个节点增加 name属性 <li id="xj" value="xingji" name="xingjizhengba">星际争霸</li>
             var xj = document.getElementById("xj");
             xj.setAttribute("name","xingjizhengba");
                 //测试
               alert(xj.getAttribute("name")); //xingjizhengba
        (8)     
              您喜欢的城市:<br>
               <ul id="city">
                    <li id="bj" value="beijing">北京</li>
                 <li id="sh" value="shanghai">上海</li>
                 <li id="cq" value="chongqing">重庆</li>
               </ul>
      
              您喜欢的游戏:<br>
               <ul>
                    <li id="fk" value="fangkong">反恐</li>
                 <li id="ms" value="moshou">魔兽</li>
                 <li id="xj" value="xingji">星际争霸</li>
               </ul>
             //增加城市节点 <li id="tj" v="tianjin">天津</li>放置到city下
              var li = document.createElement("li");
            li.setAttribute("id","tj");
             li.setAttribute("v","tianjin");
             
            //添加文本节点
             var txt = document.createTextNode("天津");
             li.appendChild(txt);
    
             var city = document.getElementById("city");
    
             city.appendChild(li);
        (9)  <ul>
                   <li id="bj" name="beijing">北京</li>
                <li id="sh" name="shanghai">上海</li>
                <li id="cq" name="chongqing">重庆</li>
               </ul>
            // 创建新的节点 <li id="tj" name="tianjin">天津</li>
                var li = document.createElement("li");
             li.setAttribute("id","tj");
             li.setAttribute("v","tianjin");
    
             var txt = document.createTextNode("天津");
             li.appendChild(txt);
            // 在 <li id="cq" name="chongqing">重庆</li>的前面
            var ul = document.getElementsByTagName("ul");
            var cq = document.getElementById("cq");
            ul[0].insertBefore(li,cq);  
            
            示例2:
            // 在 上海节点的后面 插入天津节点<li id="tj" name="tianjin">天津</li>
              var li = document.createElement("li");
             li.setAttribute("id","tj");
             li.setAttribute("v","tianjin");
    
             var txt = document.createTextNode("天津");
             li.appendChild(txt);
    
             var ul = document.getElementsByTagName("ul");
             var sh = document.getElementById("sh");
             var cq = sh.nextSibling; (得到重庆节点)
    
             ul[0].insertBefore(li,cq);
        (10)   
            //删除<ul id="city"> 下<li id="bj" name="beijing">北京</li>这个节点</ul>
                var city = document.getElementById("city");
             var bj = document.getElementById("bj");
             city.removeChild(bj);
        (11) innerHTML
            <body>
                     <div id="subject">jquery</div>
              </body>
              <script language="JavaScript">
      
                //使用innerHTML读出id=subject中的文本内容
                /* var div = document.getElementById("subject");
                alert(div.innerHTML); */
        
            //将<h1>今天</h1>写到div的层中
            /* var div = document.getElementById("subject");
            div.innerHTML = "<h1>今天</h1>"; */
        
              </script>

原文地址:https://www.cnblogs.com/jx17/p/6286884.html