前端技术—5. javaScript内置对象与DOM操作

最新推荐文章于 2023-09-02 13:58:33 发布

以喻九州

最新推荐文章于 2023-09-02 13:58:33 发布

阅读量952

点赞数

分类专栏： J2EE学习 # 第四章前端技术文章标签： html dom js

本文链接：https://blog.csdn.net/weixin_43372836/article/details/107703355

版权

J2EE学习同时被 2 个专栏收录

57 篇文章 1 订阅

订阅专栏

第四章前端技术

11 篇文章 0 订阅

订阅专栏

8 JavaScipe对象

JavaScripe的对象的定义和使用

8.1 使用原始的方法创建对象

        //1.使用原始的方式创建对象
        var obj = new Object();
        obj.name = "zhangsan"; //为obj对象添加属性
        obj.age = 20;
        obj.say = function(){ //添加功能（函数/方法）
            console.log(this.name,":",this.age);
        }
        //测试
        console.log(obj.name);
        console.log(obj.age);
        obj.say()

8.2 使用工厂模式创建对象

        //2.使用工厂模式创建对象
        function createObject(name,age){
            var obj = new Object();
            obj.name = name; //为obj对象添加属性
            obj.age = age;
            obj.say = function(){ //添加功能（函数/方法）
                console.log(this.name,":",this.age);
            }
            return obj;
        }
        //测试
        var ob1 = createObject("lisi",20);
        console.log(ob1.name);
        ob1.say();
        var ob2 = createObject("wangwu",25);
        console.log(ob2.name);
        ob2.say();

8.3 使用自定义构造函数创建对象

        //3.使用自定义构造函数创建对象
        function Stu(name,age){
            this.name = name;
            this.age = age;
            this.say = function(){
                console.log(this.name,":",this.age);
            }
        }
        //测试
        var s1 = new Stu("zhaoliu",28);
        var s2 = new Stu("xiaoli",21);
        s1.say()
        s2.say()

8.4 直接创建自定义对象

     //4.直接创建自定义对象
        var ob = {name:"qq",age:26};
        console.log(ob.name);
        console.log(ob.age);

        var obj={};
        obj.name="小白";
        obj.say=function () {
        console.log("我叫: "+this.name);
        };
        obj.say();

        var obj2={
            name:"小明",
            age:20,
            say:function () {
                console.log("我叫: "+this.name+"; 年龄: "+this.age);
            },
        };
        obj2.say();

测试类型:

1.typeof() /global对象的其中一个方法，typeof()

2.对象.constructor; /查看当前对象的构造函数是谁

3.instanceof运算符:
变量instanceof类型的名字--布尔类型true就是这种类型,false不是这种类型

        var a = [10,20,30];
        console.log(typeof a);//object
        console.log(a.constructor == Array);//true
        console.log(s1 instanceof Stu);//true

9 JavaScripe内置对象

. JavaScript中的对象分为3种: 内置对象、浏览器对象、自定义对象。

9.1 Array（数组）

//内置对象--Array数组

        var a1 = new Array(); //定义一个空数组

        var a2 = new Array(10); //定义一个长度为10数组（值：undefined）

        var a3 = new Array(10,20,30); //定义一个指定数值的数组

  var a4 = [10,20,30,40,50]; //快捷定义数组

//内置对象--Array数组
        var a1 = new Array(); //定义一个空数组
        var a2 = new Array(10); //定义一个长度为10数组（值：undefined）
        var a3 = new Array(10,20,30); //定义一个指定数值的数组

        console.log(a1.length);
        console.log(a2.length);
        console.log(a3.length);

        var a4 = [10,20,30,40,50]; //快捷定义数组

 //数组的遍历
        for(var i=0; i<a4.length;i++){
            console.log(i,"=>",a4[i]);
        }

        for(var i=a4.length-1; i>=0;i--){
            console.log(i,"=>",a4[i]);
        }

        for(var i in a4){
            console.log(i,"=>",a4[i]);
        }

        a4.forEach(function(v){
            console.log(v);
        });

//数组的方法：
        console.log(a4.toString());//10,20,30,40,50
        console.log(a4.join(":"));//10:20:30:40:50
        var aa = [1,2,3];
        console.log(aa.concat(4,5));//[1,2,3,4,5]

        var b = [10,50,30,20,70,40];
        console.log(b.join(":"));
        console.log(b.sort().join(":"));//升序 10:20:30:40:50:60:70
        console.log(b.reverse().join(":"));//降序

        var aa = new Array(10,20,30); 
        console.log(aa.join(":"));
        aa.push(50);//在末尾添加
        aa.push(40);
        console.log(aa.join(":"));
        aa.pop();//在末尾删除
        console.log(aa.join(":"));

        //清空
        console.log(b.join(":"));
        b.length = 3;//方式一：保留三个元素
        console.log(b.join(":"));
        b = [];//方式二：清空
        console.log(b.join(":"));
        b.splice(0,b.length);//方式三

9.2 基本包装类型

为了方便操作基本数据类型，JavaScript还提供了三个特殊的引用类型: String/Number/Boolean

String

属性	描述
constructor	对创建该对象的函数的引用
length	字符串的长度
prototype	允许您向对象添加属性和方法

        var s1 = 'zhangsan';
        console.log(s1.substring(2,5))//ang
        //等价于
        var s2 = new String("zhangsan");
        console.log(s2.substring(2,5));
//内置对象--String字符串对象
    var s1 = "ZhangSanFeng";
    document.write(s1+"<br/>");
    document.write(s1[5]+"<br/>");//下标为5的字符
    document.write(s1.charAt(5)+"<br/>");//下标为5的字符
    document.write(s1.substr(5,3)+"<br/>");//截取从5开始长度为3的字符串
    document.write(s1.substring(5,8)+"<br/>");//截取[5,8)的字符串
    document.write("小写："+s1.toLowerCase()+"<br/>");//转小写
    document.write("大写："+s1.toUpperCase()+"<br/>");//转大写
    //子串查找
    document.write(s1.indexOf("an")+"<br/>");//返回2，从前往后找
    document.write(s1.lastIndexOf("an")+"<br/>");//返回6
    //替换
    document.write(s1.replace("SanFeng","WuJi")+"<br/>");//替换

    //全部替换
    document.write("10,20,30,40".replace(/,/g,":")+"<br/>");//将,全部替换为;

    var str = "10:23:45:67:87:65";
    console.log(str);
    //split()把字符串分割为字符串数组。
    console.log(str.split(":"));

    var s2 = " zhangsan ";
    console.log("#"+s2+"#");
    //去除两侧多余字符
    console.log("#"+s2.trim()+"#");

Number

toString	把数字转换为字符串，使用指定的基数。
toFixed	把数字转换为字符串，结果的小数点后有指定位数的数字。

        var num = 20.5678;
        //等价于
        var num = new Number(20.5678);
        console.log(num.toFixed(2));

Boolean

方法	描述
toSource()	返回该对象的源代码。
toString()	把逻辑值转换为字符串，并返回结果。
valueOf()	返回 Boolean 对象的原始值。

Date

var myDate=new Date()

方法	描述
Date()	返回当日的日期和时间。
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getFullYear()	从 Date 对象以四位数字返回年份。
getYear()	请使用 getFullYear() 方法代替。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。
valueOf()	返回 Date 对象的原始值。即时间戳

同上还有很多set用来设置

RengExp 正则表达式

方法	描述	FF	IE
compile	编译正则表达式。	1	4
exec	检索字符串中指定的值。返回找到的值，并确定其位置。	1	4
test	检索字符串中指定的值。返回 true 或 false。

Math 对象用于执行数学任务。

方法都是静态的，无需创建对象

//内置对象--Math对象
    console.log(Math.abs(-20));//取绝对值
    console.log(Math.ceil(10.000000001)); //进一取整
    console.log(Math.floor(10.9999999)); //舍去取整
    console.log(Math.round(10.5)); //四舍五入取整
    console.log(Math.max(10,20)); //最大
    console.log(Math.min(10,20)); //最小

    console.log(Math.random()) //0~1的随机数
    console.log(Math.ceil(Math.random()*1000000)%10+1) //1~10的随机数

Global 方法都是全局的

可以直接使用

10. JavaScript 事件

三部分：事件源、事件、事件处理程序。

HTML 事件

HTML 事件可以是浏览器或用户做的某些事情。

下面是 HTML 事件的一些例子：

HTML 网页完成加载
HTML 输入字段被修改
HTML 按钮被点击

通常，当事件发生时，用户会希望做某件事。

JavaScript 允许您在事件被侦测到时执行代码。

通过 JavaScript 代码，HTML 允许您向 HTML 元素添加事件处理程序。

使用单引号：
<element event='一些 JavaScript'>
使用双引号：
<element event="一些 JavaScript">

事件	描述
onchange	HTML 元素已被改变
onclick	用户点击了 HTML 元素
onmouseover	用户把鼠标移动到 HTML 元素上
onmouseout	用户把鼠标移开 HTML 元素
onkeydown	用户按下键盘按键
onload	浏览器已经完成页面加载
	https://www.w3school.com.cn/jsref/dom_obj_event.asp

10.1 JavaScript单击事件与元素标签操作

https://www.w3school.com.cn/js/js_htmldom_elements.asp

https://www.w3school.com.cn/jsref/dom_obj_document.asp

<button onclick="this.innerHTML=Date()">现在的时间是？</button>

属性	描述
body	提供对 <body> 元素的直接访问。对于定义了框架集的文档，该属性引用最外层的 <frameset>。
cookie	设置或返回与当前文档有关的所有 cookie。
domain	返回当前文档的域名。
lastModified	返回文档被最后修改的日期和时间。
referrer	返回载入当前文档的文档的 URL。
title	返回当前文档的标题。
URL	返回当前文档的 URL。

方法	描述
close()	关闭用 document.open() 方法打开的输出流，并显示选定的数据。
getElementById()	返回对拥有指定 id 的第一个对象的引用。
getElementsByName()	返回带有指定名称的对象集合。
getElementsByTagName()	返回带有指定标签名的对象集合。
open()	打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
write()	向文档写 HTML 表达式或 JavaScript 代码。
writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

<body>
    <h1 id="hid">JavaScript语言实例--单击事件</h1>
    <button onclick="fun()">点击我</button>
    <ul id="uid">
        <li>AAAAA</li>
        <li>BBBBB</li>
        <li>CCCCC</li>
        <li>DDDDD</li>
    </ul>
    <ol>
        <li>1111111</li>
        <li>2222222</li>
    </ol>
</body>
<script>
   function fun(){
        console.log('hello js');
        //获取id属性值为hid的元素标签
        var hid = document.getElementById("hid");
        //输出元素标签之间的文本内容
        console.log(hid.innerHTML);
        //修改标签之间的内容
        hid.innerHTML = "JavaScript语言实例--元素操作";
        //改变 HTML 元素的样式
        hid.style.color = "red";
        hid.style.backgroundColor = "#ddd";//CSS中标签有"-"此时需要删除并将后一个字母大写
   }

   //获取当前网页中的所有li元素标签
   //var mlist = document.getElementsByTagName("li");
   //获取当前网页中的id为uid的元素内的所有li元素标签
   var mlist = document.getElementById("uid").getElementsByTagName("li");
   
   //遍历输出
   for(var i in mlist){
       if(!isNaN(i)){//mlist是对象，除了数组外还有别的属性，遍历时按需要排除
          console.log(mlist[i].innerHTML);//mlist[i]返回数组下标
          mlist[i].style.color="red";
       }
   }

</script>

10.2 JavaScript中的Timing定时事件

https://www.w3school.com.cn/js/js_timing.asp

window 对象允许以指定的时间间隔执行代码。

这些时间间隔称为定时事件。

通过 JavaScript 使用的有两个关键的方法：

setTimeout(function, milliseconds)
在等待指定的毫秒数后执行函数。只执行一次
setInterval(function, milliseconds)
等同于 setTimeout()，但持续重复执行该函数。
setTimeout() 和 setInterval() 都属于 HTML DOM Window 对象的方法。

//定义时3秒后执行参数中的函数
    setTimeout(function(){
        console.log("Hello JS!");
    },3000);


    //定时每隔1秒执行参数回调函数一次
    var m = 0;
    setInterval(function(){
        m++;
        console.log("Hello "+m);
    },1000)

clearTimeout() 方法停止执行 setTimeout() 中规定的函数。
window.clearTimeout(timeoutVariable)
window.clearTimeout() 方法可以不带 window 前缀来写。

clearTimeout() 使用从 setTimeout() 返回的变量：
myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);

<body>
    <h1>JavaScript语言实例--定时器</h1>
    <h2  id="hid">计数器：0</h2>
    <button onclick="doStop()">停止</button>
</body>
<script>
    var m=0,mytime=null;

    function doRun(){
        m++;
        document.getElementById("hid").innerHTML = "计数器："+m;
        
        mytime = setTimeout(doRun,1000);
    }
    
    doRun();
    
    function doStop(){
        clearTimeout(mytime);
    }
    
    
    /*
    m = 0;
    var mytime = setInterval(function(){
        m++;
        document.getElementById("hid").innerHTML = "计数器："+m;
    },1000)

    function doStop(){
        clearInterval(mytime);
    }
</script>

10.3 JavaScript实现简单计算器实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>JavaScript语言实例--简单计算器</h1>
    <form action="" name="myform" method="get">
        数值1：<input type="text" name="num1" size="10"/><br/><br/>
        数值2：<input type="text" name="num2" size="10"/><br/><br/>
        结 果：<input type="text" name="res" readonly style="border:0px;" size="10"/><br/><br/>
        <input type="button" onclick="doFun(1)" value="加"/>
        <input type="button" onclick="doFun(2)" value="减"/>
        <input type="button" onclick="doFun(3)" value="乘"/>
        <input type="button" onclick="doFun(4)" value="除"/>
    </form>
</body>
<script>
    //处理函数
    function doFun(c){
        //document.myform.num1.value 取name为myform的表单中name为num1的值
        //表单里取出的值是字符串
        var m1 = parseInt(document.myform.num1.value);
        var m2 = parseInt(document.myform.num2.value);
        //console.log(m1,m2);
        switch(c){
            case 1: var res = m1+"+"+m2+"="+(m1+m2); break;
            case 2: var res = m1+"-"+m2+"="+(m1-m2); break;
            case 3: var res = m1+"*"+m2+"="+(m1*m2); break;
            case 4: var res = m1+"/"+m2+"="+(m1/m2); break;
        }
        //将结果放置到第三个输入框中
        document.myform.res.value = res;
    }
</script>
</html>

10.4 JavaScript简单操作元素标签实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>JavaScript语言实例--js操作元素标签属性（放大和缩小）</h1>
    <button onclick="dofun(1)">放大</button>
    <button onclick="dofun(2)">缩小</button>
    <button onclick="dofun(3)">隐藏</button>
    <br/><br/>
    <div style="width:200px;height:200px;background-color:#ddd;" id="did"></div>
</body>
<script>
    var width=200,height=200;
    var did = document.getElementById("did");

    function dofun(m){
        switch(m){
            case 1:
                width += 10;
                height += 10;
                did.style.width = width+"px";//拼接单位
                did.style.height = height+"px";
                break;
            case 2:
                width -= 10;
                height -= 10;
                did.style.width = width+"px";
                did.style.height = height+"px";
                break;
            case 3:
                did.style.display = "none";
                break;
        }
    }
</script>
</html>

10.5 JS事件处理

10.5.1 事件绑定方式

<body>
    <h1>JavaScript语言实例--事件处理(事件绑定方式)</h1>
    <!-- 方式一：主动绑定 -->
    <button onclick="fun()">按钮1</button>
    
    <button id="bid">按钮2</button>
</body>
<script>
     function fun(){
         console.log("按钮1被点击了");
     } 
    //  方式二：被动绑定
     document.getElementById("bid").onclick = function(){
        console.log("按钮2被点击了");
     }
</script>

10.5.2 获取事件源对象

<body>
    <h1>JavaScript语言实例--获取事件源对象</h1>
    <h2 onclick="fun(this)">2级标题1</h2>
    <h2 id="hid">2级标题2</h2>
</body>
<script>
    function fun(ob){
        console.log("aaaaaaaaaa");
        //console.log(ob);//传了参数可以获取当前调用函数的事件源
        ob.style.color = "green";
    }

    document.getElementById("hid").onclick = function(){
        console.log("bbbbbbbbbbb");
        //此种事件绑定方式，this就表示当前事件源对象
        //console.log(this);
        this.style.color = "red";
    }
</script>

10.5.3 ondblclick双击事件

<body>
    <h1>JavaScript语言实例--dblclick双击事件</h1>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
<script>
   //获取上面所有的li元素节点
   var mlist = document.getElementsByTagName("li");
   //遍历绑定事件
   for(var i=0;i<mlist.length;i++){
        //ondblclick 获取双击事件
       mlist[i].ondblclick = function(){
           //设置背景颜色
           this.style.backgroundColor = "#f0c";
       }
   }
</script>

10.5.4 oncontextmenu右击事件

属性	描述
oncontextmenu	当用户双击某个对象时调用的事件句柄。
clientX	返回当事件被触发时，鼠标指针的水平坐标。
clientY	返回当事件被触发时，鼠标指针的垂直坐标。

head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript语言实例</title>
    <style>
        ul,li{margin:0px;padding:0px;}
        ul{list-style:none;width:100px;text-align:center;position:absolute;display:none;}
        ul li{height:30px;line-height:30px;margin-top:4px;background-color:#ddd;}
        ul li:hover{background-color:#fc0;}
    </style>
</head>
<body>
    <h1>JavaScript语言实例--contextmenu鼠标右击事件</h1>
    <ul id="uid">
        <li>剪切</li>
        <li>复制</li>
        <li>粘贴</li>
    </ul>
</body>
<script>
   document.oncontextmenu = function(ent){
       //获取兼容的事件对象
       var event = ent || window.event;
       
       //获取鼠标在网页中的点击位置
       var x = event.clientX;
       var y = event.clientY;
        console.log(x,y);

        //显示自定义的快捷栏
        var uid = document.getElementById("uid");
        uid.style.top = y+"px";
        uid.style.left = x+"px";
        uid.style.display = "block";
       return false;//return false拦截右键，不会显示原本的快捷栏
   }
</script>

10.5.5 mouse鼠标移入移出事件（轮播图+图片切换）

onmousedown	鼠标按钮被按下。
onmousemove	鼠标被移动。
onmouseout	鼠标从某元素移开。
onmouseover	鼠标移到某元素之上。
onmouseup	鼠标按键被松开。

案例一：轮播图

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript语言实例</title>
    <style>
        div,img,ul,li{margin:0px;padding:0px;}
        #did{width:384px;height:240px;}
        #did img{display:none;}
        #did img:first-child{display:block}
    </style>
</head>
<body>
    <h1>JavaScript语言实例--mouse鼠标移入和移出事件</h1>
    <div id="did" onmouseover="doStop()" onmouseout="doStart()">
        <img src="./images/11.jpg" width="384"/>
        <img src="./images/22.jpg" width="384"/>
        <img src="./images/33.jpg" width="384"/>
        <img src="./images/44.jpg" width="384"/>
    </div>
</body>
<script>
    var m = 2;
    var mytime = null;
    //定义函数展示对应的图片
    function show(x){
        var mlist = document.getElementById("did").getElementsByTagName("img");
        for(var i=0; i<mlist.length; i++){
            if(x == i+1){//显示
                mlist[i].style.display = "block";
            }else{//隐藏
                mlist[i].style.display = "none";
            }
        }
    }

    //开启定时轮播图片
    function doStart(){
        if(mytime == null){
            mytime = setInterval(function(){
                m++;
                show(m);
                if(m>=4){
                    m = 0;
                }
            }, 2000);
        }
    }

    //停止轮播图片
    function doStop(){
        if(mytime != null){
            clearInterval(mytime);
            mytime = null;
        }
    }
    //默认启动
    doStart();
</script>

案例二：图片切换

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript语言实例</title>
    <style>
        div,img,ul,li{margin:0px;padding:0px;}
        #did{width:384px;height:240px;}
        #list img{width:85px;border:2px solid #fff;margin-right:2px;}
        #list img:hover{border:2px solid red;}
    </style>
</head>
<body>
    <h1>JavaScript语言实例--onmouseover鼠标移入事件</h1>
    <div id="did">
        <img id="mid" src="./images/11.jpg" width="384"/>
    </div>
    <div id="list">
        <img src="./images/11.jpg"/>
        <img src="./images/22.jpg"/>
        <img src="./images/33.jpg"/>
        <img src="./images/44.jpg"/>
    </div>
</body>
<script>
    //获取所有小图列表
    var mlist = document.getElementById("list").getElementsByTagName("img");
    //遍历这些图片
    for(var i=0; i<mlist.length; i++){
        //鼠标移入事件
        mlist[i].onmouseover = function(){
            document.getElementById("mid").src =  this.src;
        }
    }
</script>

10.5.6 放大镜效果

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript语言实例</title>
    <style>
        div,img,ul,li{margin:0px;padding:0px;}
        #did{width:300px;height:300px;overflow:hidden;display:none;position:absolute;}    
    </style>
</head>
<body>
    <h1>JavaScript语言实例--图片的放大镜效果</h1>
    <br/><br/><br/>
    <img id="mid" src="./images/33.jpg" width="384" height="240"/>
    <div id="did">
        <img src="./images/33.jpg"/>
    </div>
</body>
<script>
    //获取被放大图片和放大镜图片对象
    var mid = document.getElementById("mid");
    var did = document.getElementById("did");
    //为图片添加鼠标移入和移除事件
    mid.onmouseover = function(){
        //对放大镜进行定位
        //this.offsetTop获取当前对象上边距离屏幕顶部的距离值，使两张图片齐高
        did.style.top = this.offsetTop+"px";
        //+this.offsetWidth+10不让两张图片重叠
        did.style.left = this.offsetLeft+this.offsetWidth+10+"px";
        did.style.display = "block";//图片显示
    }
    mid.onmouseout = function(){
        did.style.display = "none";
    }
    //添加鼠标移动事件
    mid.onmousemove = function(ent){
        //获取兼容的鼠标事件对象
        var event = ent || window.event;

        //获取鼠标在图片上的位置
        var x = event.clientX - this.offsetLeft;
        var y = event.clientY -this.offsetTop;
        //定位放大镜位置
        //scrollTop上下滚动
        //*5两图原本像素差为5倍
        //-150让鼠标位置显示在放大图中间
        did.scrollTop = y*5-150;
        did.scrollLeft = x*5-150;
    }
</script>

10.5.7 拖动效果

onmousedown	鼠标按钮被按下。
onmouseup	鼠标按键被松开。
onmousemove	鼠标被移动。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript语言实例</title>
    <style>
        div{margin:0px;padding:0px;}
        #did{width:200px;height:200px;background-color:#ddd;cursor:move;position:absolute;}    
    </style>
</head>
<body>
    <h1>JavaScript语言实例--拖动效果</h1>
    <div id="did"></div>
</body>
<script>
   //获取div层对象
   var did = document.getElementById("did");
   //绑定鼠标按下事件
   did.onmousedown = function(ent){
        //获取兼容的事件对象
        var event = ent || window.event;
        //获取鼠标在div层上的位置
        var x = event.clientX-this.offsetLeft;
        var y = event.clientY-this.offsetTop;

        this.style.backgroundColor = "blue";
        //绑定鼠标移动事件
        //用document不用当前对象did是因为鼠标滑动过快容易丢失对象
        document.onmousemove = function(e){
            var myevent = e || window.event;
            //定位
            did.style.top = myevent.clientY-y+"px";
            did.style.left = myevent.clientX-x+"px";
        }
   }
   //绑定鼠标松开事件
   did.onmouseup = function(){
        this.style.backgroundColor = "#ddd";
        //取消移动事件
        document.onmousemove = null;
   }
</script>

10.5.8 keydown键盘事件

onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按下并松开。
onkeyup	某个键盘按键被松开。

属性	描述
ctrlKey	返回当事件被触发时，"CTRL" 键是否被按下。
metaKey	返回当事件被触发时，"meta" 键是否被按下。
shiftKey	返回当事件被触发时，"SHIFT" 键是否被按下。

keyCode

声明了被敲击的键生成的 Unicode 字符码

<script>
    window.document.onkeydown = function(ent){
        //获取兼容的事件对象
        var event = ent || window.event;

        //输出键盘值
        console.log(event.keyCode);
    }
</script>

10.5.9 onload事件

onload	一张页面或一幅图像完成加载。
onunload	用户退出页面。

<script>
        //当页面加载完成后才自动执行的程序
        window.onload = function(){
            var hid = document.getElementById("hid");
            hid.style.color="red";
        }
    </script>
</head>
<body>
    <h1 id="hid">JavaScript语言实例--onload事件</h1>
</body>

10.5.10 表单事件

onsubmit	确认按钮被点击。
onfocus	元素获得焦点。
onblur	元素失去焦点。

<body>
    <h1 id="hid">JavaScript语言实例--表单事件</h1>
    //onsubmit = "return false"会拦截跳转
    <form action="js10.html" name="myform" method="post" onsubmit="return doSubmit()">
        //onblur失去焦点事件
        账号：<input type="text" name="uname" onblur="checkUname()"/><br/><br/>
        密码：<input type="password" name="upass"  onblur="checkUpass()" /><br/><br/>
        邮箱：<input type="text" name="email"/><br/><br/>
        <input type="submit" value="提交"/>
    </form>
</body>
<script>
    //表单提交事件处理程序
    function doSubmit(){
        return checkUname() && checkUpass();
    }

    //验证账号
    function checkUname(){
        var name = document.myform.uname.value;
        if(name.length<=0){
            alert("账号不可以为空");
            return false;
        }
        return true;
    }

    //验证密码
    function checkUpass(){
        var pass = document.myform.upass.value;
        if(pass.length<6){
            alert("密码必须大于等于6位");
            return false;
        }
        return true;
    }
</script>

10.5.11 onchange事件

onchange

域的内容被改变。

Select 对象方法

add()

向下拉列表添加一个选项。

<body>
    <h1 id="hid">JavaScript语言实例--change事件</h1>
    <select name="sid" id="sid">
        <option value="">-请选择-</option>
        <option value="1">北京</option>
        <option value="2">河北</option>
        <option value="3">天津</option>
        <option value="4">河南</option>
        <option value="5">山西</option>
    </select>
    <select id="cid"></select>
</body>
<script>
    var data = new Array();
    data[1] = ["海淀区","朝阳区","丰台区","昌平区"];
    data[2] = ["石家庄","保定","邯郸","邢台"];
    data[3] = ["河东区","河西区","河北区","南开区"];
    data[4] = ["郑州","洛阳","开封","驻马店"];
    data[5] = ["太原","大同","吕梁","运城"];

    //获取两个下拉框元素对象
    var sid = document.getElementById("sid");
    var cid = document.getElementById("cid");
    //绑定change事件
    sid.onchange = function(){
        //获取下拉框中的值
        var v = this.value;
        cid.length = 0; //删除cid的下拉项
        //判断并循环对应城市信息
        if(v != ""){
            for(var i=0; i<data[v].length; i++){
                //创建一个下拉项并添加到cid下拉框中
                cid.add(new Option(data[v][i],i));
            }
        }
    }
</script>

10.5.12 scroll滚动事件

onscroll

当文档被滚动时发生的事件。

<body>
    <h1 id="hid">JavaScript语言实例--滚动条事件</h1>
    <div id="aid" style="height:500px;width:700px;background-color:#ddd;"></div>
    <div id="bid" style="height:500px;width:700px;background-color:#eee;"></div>
</body>
<script>
    window.onscroll = function(){
        var scrollTop = 0;
        if(document.documentElement && document.documentElement.scrollTop){
            scrollTop = document.documentElement.scrollTop;
        }else if(document.body){
            scrollTop = document.body.scrollTop;
        }
        document.getElementById("bid").innerHTML = scrollTop;
    }
</script>

11. JS中的BOM

浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话。

11.1 window

document

对 Document 对象的只读引用。请参阅 Document 对象。

open()

打开一个新的浏览器窗口或查找一个已命名的窗口。

<iframe src="js02.html" width="500" height="500"></iframe>
    <button onclick="window.open('js02.html',
'新窗口的名字，不写则打开多个新窗口','width=200,height=100');">打开一个新窗口</button>

confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()	显示可提示用户输入的对话框。
alert()	显示带有一段消息和一个确认按钮的警告框。

    window.alert("ok");
    b = window.confirm("确定要删除吗？");
    if(b){
        alert("yes");
    }else{
        alert("no");
    }

    var mstr = window.prompt("请输入你的邮箱？");
    alert(mstr);

11.2 navigator和screen

Navigator 对象包含有关浏览器的信息。
Screen 对象包含有关客户端显示屏幕的信息。
注释：没有应用于 Navigator 和screen 对象的公开标准，不过所有浏览器都支持该对象。

Navigator 对象属性

属性	描述
appCodeName	返回浏览器的代码名。
appName	返回浏览器的名称。
appVersion	返回浏览器的平台和版本信息。
userAgent	返回由客户机发送服务器的 user-agent 头部的值。
userLanguage	返回 OS 的自然语言设置。
platform	返回运行浏览器的操作系统平台。

<script type="text/javascript">
    with(document) {
         write ("你的浏览器信息：<ul>");
         write ("<li>代码："+navigator.appCodeName+"</li>");
         write ("<li>名称："+navigator.appName+"</li>");
         write ("<li>版本："+navigator.appVersion+"</li>");
         write ("<li>语言："+navigator.language+"</li>");
         write ("<li>编译平台："+navigator.platform+"</li>");
         write ("<li>用户表头："+navigator.userAgent+"</li>");
         write ("</ul>");
    }
    
    //判断当前浏览器
    var explorer =navigator.userAgent ;
    //ie 
    if (explorer.indexOf("MSIE") >= 0) {
        alert("ie");
    }
    //firefox 
    else if (explorer.indexOf("Firefox") >= 0) {
        alert("Firefox");
    }
    //Chrome
    else if(explorer.indexOf("Chrome") >= 0){
        alert("Chrome");
    }
    //Opera
    else if(explorer.indexOf("Opera") >= 0){
        alert("Opera");
    }
    //Safari
    else if(explorer.indexOf("Safari") >= 0){
        alert("Safari");
    } 
    //Netscape
    else if(explorer.indexOf("Netscape")>= 0) { 
        alert('Netscape'); 
    }
    
</script>

Screen 对象属性

availHeight	返回显示屏幕的高度 (除 Windows 任务栏之外)。
availWidth	返回显示屏幕的宽度 (除 Windows 任务栏之外)。
height	返回显示屏幕的高度。
width	返回显示器屏幕的宽度。

Window 对象属性

innerheight	返回窗口的文档显示区的高度。
innerwidth	返回窗口的文档显示区的宽度。

<script>
    document.write( "屏幕宽度："+screen.width+"px<br />" );
    document.write( "屏幕高度："+screen.height+"px<br />" );
    document.write( "屏幕可用宽度："+screen.availWidth+"px<br />" );
    document.write( "屏幕可用高度："+screen.availHeight+"px<br/>" );
    document.write( "宽度："+window.innerWidth+"px<br />" );
    document.write( "高度："+window.innerHeight+"px<br />" );
</script>

11.3 history和location

History 对象包含用户（在浏览器窗口中）访问过的 URL。

length

返回浏览器历史列表中的 URL 数量。

back()	加载 history 列表中的前一个 URL。
forward()	加载 history 列表中的下一个 URL。
go()	加载 history 列表中的某个具体页面。

<body>
    <h1>JavaScript中的BOM--history对象</h1>
    <button onclick="window.history.back();">后退一步</button>
    <button onclick="window.history.go(-1);">后退一步</button>
    <button onclick="window.history.go(-2);">后退二步</button><br/><br/>
    <button onclick="window.history.forward();">前进一步</button>
    <button onclick="window.history.go(1);">前进一步</button>
    <button onclick="window.history.go(2);">前进二步</button><br/><br/>
    <a href="js03.html">js03.html</a><br/><br/>
</body>

Location 对象包含有关当前 URL 的信息。

href	设置或返回完整的 URL。
reload()	重新加载当前文档。

<body>
    <h1>JavaScript中的BOM--location对象</h1>
    <button onclick="window.location.href='http://www.baidu.com'">点击跳转到百度</button>
    <button onclick="window.location.reload()">刷新</button>
    <script type="text/javascript">
        document.write("<br/>当前地址："+window.location.href);
    </script>
</body>

12. HTML中的 DOM操作

https://www.w3school.com.cn/js/js_htmldom.asp

https://www.w3school.com.cn/htmldom/dom_intro.asp

什么是 DOM？

DOM 是一项 W3C (World Wide Web Consortium) 标准。

DOM 定义了访问文档的标准：

“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分：

Core DOM - 所有文档类型的标准模型
XML DOM - XML 文档的标准模型
HTML DOM - HTML 文档的标准模型

什么是 HTML DOM？

HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：

作为对象的 HTML 元素
所有 HTML 元素的属性
访问所有 HTML 元素的方法
所有 HTML 元素的事件

换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。

HTML DOM（文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被结构化为对象树：

对象的 HTML DOM 树

DOM 节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

节点父、子和同胞

节点树中的节点彼此拥有层级关系。

父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子
同胞是拥有相同父节点的节点

下面的图片展示了节点树的一部分，以及节点之间的关系：

element.appendChild()	向元素添加新的子节点，作为最后一个子节点。
element.attributes	返回元素属性的 NamedNodeMap。
element.childNodes	返回元素子节点的 NodeList。
element.className	设置或返回元素的 class 属性。
element.nodeName	返回元素的名称。
element.nodeType	返回元素的节点类型。
element.nodeValue	设置或返回元素值。

<body>
    <!-- 注释说明 -->
    <h1>JavaScript语言中HTML DOM</h1>

    <h3>通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：</h3>
    <ul>
        <li>JavaScript 能改变页面中的所有 HTML 元素</li>
        <li class="cc">JavaScript 能改变页面中的所有 HTML 属性</li>
        <li>JavaScript 能改变页面中的所有 CSS 样式</li>
        <li class="cc">JavaScript 能删除已有的 HTML 元素和属性</li>
        <li>JavaScript 能添加新的 HTML 元素和属性</li>
        <li>JavaScript 能对页面中所有已有的 HTML 事件作出反应</li>
        <li>JavaScript 能在页面中创建新的 HTML 事件</li>
    </ul>
    

    <h3>我们重点学习HTML DOM的什么操作：</h3>
    <ul>
        <li>如何改变 HTML 元素的内容</li>
        <li>如何改变 HTML 元素的样式（CSS）</li>
        <li>如何对 HTML DOM 事件作出反应</li>
        <li>如何添加和删除 HTML 元素</li>
    </ul>

    <h3>W3C DOM 标准被分为 3 个不同的部分：</h3>
    <ol id="oid"><li>Core DOM - 所有文档类型的标准模型</li><li>XML DOM - XML 文档的标准模型</li><li>HTML DOM - HTML 文档的标准模型</li></ol>

    <a id="aid" href="http://www.baidu.com" title="百度链接">百度</a>
</body>
<script>
    var aa = document.getElementById("aid");
    console.log(aa);
    console.log(aa.href);
    console.log(aa.title);
    aa.title = "百度22"; //修改属性

    var h1 = document.getElementsByTagName("h1");
    console.log(h1[0]);
    h1[0].style.color = "red";

    var clist = document.getElementsByClassName("cc");
    for(var i=0;i<clist.length;i++){
        console.log(clist[i])
    }

    var ol = document.getElementById("oid");
    var olist = ol.childNodes;
    console.log(olist.length);
    for(var i=0;i<olist.length; i++){
        console.log(olist[i]);
    }
</script>

<body>
    <!-- 注释说明 -->
    <h1>JavaScript语言中HTML DOM</h1>
    <h3 id ="hid">我们重点学习HTML DOM的什么操作：</h3>
    <ul id="uid">
        <li>如何改变 HTML 元素的内容</li>
        <li>如何改变 HTML 元素的样式（CSS）</li>
        <li>如何对 HTML DOM 事件作出反应</li>
        <li>如何添加和删除 HTML 元素</li>
    </ul>
</body>
<script>
   //获取h3元素节点对象
   var hid = document.getElementById("hid");
   //输出当前节点的名字、值和类型
   console.log(hid.nodeName); //H3
   console.log(hid.nodeValue); //null
   console.log(hid.nodeType);  //1
   //获取当前节点对象的第一个子节点的值和类型
   console.log(hid.childNodes[0].nodeValue); //就是内容
   console.log(hid.childNodes[0].nodeType); //3
   
</script>

12.1 HTML DOM之a链接操作

href	设置或返回被链接资源的 URL。
hreflang	设置或返回被链接资源的语言代码。
id	设置或返回一个链接的 id。
innerHTML	设置或返回一个链接的内容。
name	设置或返回一个链接的名称。

className	设置或返回元素的 class 属性。
title	设置或返回元素的 title 属性。

Document 对象集合

links[]

返回对文档中所有 Area 和 Link 对象引用。

<body>
    <h1>JavaScript语言中HTML DOM 操作</h1>
    <ul>
        <li><a href="https://www.baidu.com">百度</a></li>
        <li><a href="https://www.163.com">网易</a></li>
        <li><a href="https://www.sina.com">新浪</a></li>
        <li><a href="https://www.qq.com">腾讯</a></li>
    </ul>
</body>
<script>
    //获取当前页面中的所有链接
    //var alist = document.getElementsByTagName("a");
    var alist = document.links;
    for(var i=0; i<alist.length; i++){
        console.log(alist[i].href,alist[i].innerHTML);
        alist[i].title = alist[i].innerHTML+"的链接";
    }
</script>

12.2 HTML DOM之img图片操作

name	设置或返回图像的名称。
src	设置或返回图像的 URL。
width	设置或返回图像的宽度。
height	设置或返回图像的高度。

案例：图片延迟加载

<body>
    <h1>JavaScript语言中HTML DOM 操作--图片延迟加载</h1>
    <img src="./images/HLL-11_xuandong.gif" res="./images/11.jpg"/>
    <img src="./images/HLL-11_xuandong.gif" res="./images/22.jpg"/>
    <img src="./images/HLL-11_xuandong.gif" res="./images/33.jpg"/>
    <img src="./images/HLL-11_xuandong.gif" res="./images/44.jpg"/>
</body>
<script>
    setTimeout(function(){
        //获取网页中所有的图片
        var mlist = document.images;
        //遍历
        for(var i=0; i<mlist.length; i++){
            //images中没有res属性的定义，可以用getAttribute来获取
            mlist[i].src = mlist[i].getAttribute("res");
            mlist[i].width = 100;
        }
    },3000);
    
</script>

12.3 HTML DOM之form表单操作

id	设置或返回表单的 id。
length	返回表单中的元素数目。
method	设置或返回将数据发送到服务器的 HTTP 方法。
name	设置或返回表单的名称。
target	设置或返回表单提交结果的 Frame 或 Window 名。
submit()	提交表单。
title	设置或返回元素的 title 属性。
className	设置或返回元素的 class 属性。

<body>
    <h1>JavaScript语言中HTML DOM 操作</h1>
    <form></form>
    <form action="js01.html" method="post" name="myform">
        账号：<input type="text" name="uname" value="wangwu7"/><br/>
    </form>
    <button onclick="doSubmit()">点击提交</button>
</body>
<script>
    console.log(document.forms.length);
    //获取上面form表单中账号信息
    console.log(document.forms[1].uname.value); //*
    console.log(document.forms.item(1).uname.value);
    console.log(document.myform.uname.value); //*
    console.log(document['myform'].uname.value);
    console.log(document.forms.myform.uname.value);
    console.log(document.forms['myform'].uname.value);

    function doSubmit(){
        document.myform.action = "js02.html";
        //document.myform.method = "get";
        document.myform.submit(); //获取form表单并执行提交
    }
</script>

12.4 HTML DOM之input多选框操作

type	返回 checkbox 的表单元素类型。
value	设置或返回 checkbox 的 value 属性的值
checked	设置或返回 checkbox 是否应被选中。
defaultChecked	返回 checked 属性的默认值。

<body>
    <h1>JavaScript语言中HTML DOM 操作</h1>
    <ul>
        <li><input type="checkbox" name="likes[]" value="篮球"/>篮球</li>
        <li><input type="checkbox" name="likes[]" value="足球"/>足球</li>
        <li><input type="checkbox" name="likes[]" value="羽毛球"/>羽毛球</li>
        <li><input type="checkbox" name="likes[]" value="乒乓球"/>乒乓球</li>
        <li><input type="checkbox" name="likes[]" value="棒球"/>棒球</li>
    </ul>
    <button onclick="dofun()">获取</button>
</body>
<script>
    function dofun(){
        //获取网页中所有input标签
        var list = document.getElementsByTagName("input"); 
        var res = new Array();
        //遍历
        for(var i=0; i<list.length; i++){
            //判断是否是多选框并且已选中
            if(list[i].type == "checkbox" && list[i].checked){
                res.push(list[i].value);
            }
        }
        alert(res);
    }
</script>

12.5 HTML DOM之select操作

multiple	设置或返回是否选择多个项目。
options[]	返回包含下拉列表中的所有选项的一个数组。
remove()	从下拉列表中删除一个选项。
add()	向下拉列表添加一个选项。
length	返回下拉列表中的选项数目。
size	设置或返回下拉列表中的可见行数。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript中的DOM</title>
    <style>
        select{width:100px;height:200px;border:1px solid #ddd;float:left;}
        div{width:100px;height:200px;float:left;text-align:center;padding-top:50px;}
    </style>
</head>
<body>
    <h1>JavaScript语言中HTML DOM 操作-select对象</h1>
    <select id="sid1" size="10" multiple>
        <option value="0">邓丽君</option>
        <option value="1">张国荣</option>
        <option value="2">梅艳芳</option>
        <option value="3">黄家驹</option>
        <option value="4">迈克尔.杰克逊</option>
        <option value="5">姚贝娜</option>
        <option value="6">张雨生</option>
    </select>
    <div>
        <button onclick="doMove('sid1','sid2')">>></button>
        <br/><br/><br/><br/>
        <button onclick="doMove('sid2','sid1')"><<</button>
    </div>
    <select id="sid2" size="10" multiple></select>
</body>
<script>
   function doMove(d1,d2){
       //分别获取两个下拉框的元素节点对象
       var select1 = document.getElementById(d1);
       var select2 = document.getElementById(d2);
       //获取第一个下拉框中所有的下拉项
       var olist = select1.options;
       //遍历
       for(var i=0; i<olist.length; i++){
           //console.log(olist[i].value);
           //判断当前项是否被选中
           if(olist[i].selected){
               olist[i].selected = false; //取消选中
               var ob = olist[i];
               select1.remove(i);
               select2.add(ob);
               i--;
           }
       }
   }
</script>

12.6 HTML DOM之table表格操作

deleteRow()	从表格删除一行。
insertRow()	在表格中插入一个新行。

<tr>

rowIndex	返回该行在表中的位置。
insertCell()	在一行中的指定位置插入一个空的 <td> 元素。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript中的DOM</title>
    <style>
        select,option,div,button{margin:0px;padding:0px;}
        #lid,#rid,div{
            width:80px;
            height:260px;
            float:left;
        }
        div{
            text-align:center;
            padding-top:60px;
        }
    </style>
</head>
<body>
    <h1>JavaScript语言中HTML DOM 操作-table对象</h1>
    <table id="tid" width="500" border="1">
        <thead>
            <tr><th>学号</th> <th>姓名</th> <th>性别</th><th>年龄</th><th>操作</th></tr>
        </thead>
        <tbody>
            <tr>
                <td>1001</td> <td>张三</td><td>男</td><td>20</td><td>
<button onclick="dodel(this)">删除</button></td>
            </tr>
            <tr><td>1002</td><td>李四</td><td>女</td> <td>21</td><td>
<button onclick="dodel(this)">删除</button></td>
            </tr>
            <tr><td>1003</td><td>王五</td><td>男</td><td>22</td><td>
<button onclick="dodel(this)">删除</button></td>
            </tr>
        </tbody>
    </table>
    <br/><br/><br/>
    <h2>添加学生信息</h2>
    <form action="#" name="myform" onsubmit="return doAdd()">
        学号：<input type="text" name="sno"/><br/><br/>
        姓名：<input type="text" name="name"/><br/><br/>
        性别：<input type="text" name="sex"/><br/><br/>
        年龄：<input type="text" name="age"/><br/><br/>
        <input type="submit" value="添加"/>
    </form>
</body>
<script>
   //执行数据删除操作
   function dodel(bt){
       //获取当前表格元素节点对象
       var tab  = document.getElementById("tid");
       tab.deleteRow(bt.parentNode.parentNode.rowIndex);
   }
   
   function doAdd(){
       //获取输入框中的内容
       var sno = document.myform.sno.value;
       var name = document.myform.name.value;
       var sex = document.myform.sex.value;
       var age = document.myform.age.value;

       //获取当前表格对象并申请添加一行
       var row = document.getElementById("tid").insertRow();
       //为当前行添加一个个字段信息
       row.insertCell(0).innerHTML = sno;
       row.insertCell(1).innerHTML = name;
       row.insertCell(2).innerHTML = sex;
       row.insertCell(3).innerHTML = age;
       row.insertCell(4).innerHTML = '<button onclick="dodel(this)">删除</button>';

       //清空form表单
       document.myform.reset();
       
       return false;
   }
</script>

13 XML DOM介绍

https://www.w3school.com.cn/xmldom/index.asp

XML 文档对象模型定义访问和操作XML文档的标准方法。

DOM 将 XML 文档作为一个树形结构，而树叶被定义为节点。

XML DOM 是 XML Document Object Model 的缩写，即 XML 文档对象模型。

节点的属性

在 XML 文档对象模型 (DOM) 中，每个节点都是一个对象。

对象拥有方法（功能）和属性（关于对象的信息），并可通过 JavaScript 进行访问和操作。

三个重要的 XML DOM 节点属性是：

nodeName
nodeValue
nodeType

nodeName 属性

nodeName 属性规定节点的名称。

nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 是属性的名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document

nodeValue 属性

nodeValue 属性规定节点的值。

元素节点的 nodeValue 是 undefined
文本节点的 nodeValue 是文本自身
属性节点的 nodeValue 是属性的值

13.1 XML DOM节点的遍历

https://www.w3school.com.cn/xmldom/dom_element.asp

childNodes	返回元素的子节点的 NodeList
firstChild	返回元素的首个子节点
lastChild	返回元素的最后一个子节点

<body>
    <!-- 注释说明 -->
    <h1>XML DOM：节点的遍历</h1>
    <ul id="uid">
        <li>成龙</li>
        <li>甄子丹</li>
        <li>李连杰</li>
        <li>宋小宝</li>
    </ul>
</body>
<script>
   //获取ul中的所有li节点
   var list = document.getElementById("uid").getElementsByTagName("li");
   console.log("节点数量：",list.length);

   //通过子节点获取，会包括回车空百符产生的文本节点
   var list2 = document.getElementById("uid").childNodes;
   console.log("节点数量：",list2.length);

   //节点的遍历
   for(var i=0; i<list2.length; i++){
       //console.log(list2[i].nodeType);\
       //判断是否是元素节点
       if(list2[i].nodeType == 1){
           //console.log(list2[i].innerHTML); //HTML DOM获取内容
           console.log(list2[i].firstChild.nodeValue); //XML DOM获取内容
       }
   }
</script>

13.2 XML DOM节点的删除

setAttribute()	添加新属性。
removeChild()	删除子节点。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript中的XML DOM</title>
    <style>
        ul{list-style:none;}
        ul li{line-height:30px;background-color:#ddd;margin-top:2px;}
        ul li:hover{background-color:#fc0;}
        ul li.cc{background-color:#f0c;}
    </style>
</head>
<body>
    <h1>XML-DOM：节点的删除</h1>
    <ul id="uid">
        <li>成龙</li>
        <li>甄子丹</li>
        <li>李连杰</li>
        <li>宋小宝</li>
        <li>成龙</li>
        <li>甄子丹</li>
        <li>李连杰</li>
        <li>宋小宝</li>
    </ul>
    <button onclick="doDel()">删除</button>
</body>
<script>
   //获取所有ul中的li节点并绑定点击事件
   var list = document.getElementsByTagName("li");
   for(var i=0; i<list.length; i++){
       list[i].onclick = function(){
           this.setAttribute("class","cc");
       }
   }

   //执行节点删除函数
   function doDel(){
       var list2 = document.getElementsByTagName("li");
       //遍历
       for(var i=0; i<list2.length; i++){
           //判断当前li是否有class属性值为cc的
           if(list2[i].getAttribute("class")=="cc"){
               //执行删除
               list2[i].parentNode.removeChild(list2[i]);
               i--;
           }
       }
   }
</script>

13.3 XML DOM节点属性操作

setAttribute()

添加新属性。

<body>
    <h1>XML-DOM：改变节点的属性</h1>
    <a id="aid" href="http://www.baidu.com">百度</a>
</body>
<script>
    //获取上面超链接a元素节点
    var a = document.getElementById("aid");
    //通过已知的HTML DOM操作a节点属性
    console.log(a.href);
    a.title="百度网址";
    //a.aa = "bb"; //添加aa属性值为bb 无效的

    //使用XML DOM操作节点a的属性
    console.log(a.getAttribute("href"));
    a.setAttribute("aa","bb"); //通过XML DOM可以添加任何属性和值
</script>

13.4 XML DOM节点的创建

函数 loadXMLDoc()，位于外部 JavaScript 中，用于加载 XML 文件。

创建元素节点

本例使用 createElement() 来创建一个新的元素节点，并使用 appendChild() 把它添加到一个节点。

通过使用 createAttribute 来创建属性节点

本例使用 createAttribute() 来创建新的属性节点，并使用 setAttributeNode() 把该节点插入一个元素中。

通过使用 setAttribute 来创建属性节点

本例使用 setAttribute() 为一个元素创建一个新的属性。

创建文本节点

本例使用 createTextNode() 来创建新的文本节点，并使用 appendChild() 把该文本节点添加到一个元素中。

创建一个 CDATA section 节点

本例用 createCDATAsection() 来创建 CDATA section 节点，并使用 appendChild() 把它添加到元素中。

创建注释节点

本例使用 createComment() 来创建一个 comment 节点，并使用 appendChild() 把它添加到一个元素中。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript中的XML DOM</title>
    <style>
        ul{list-style:none;}
        ul li{line-height:30px;background-color:#ddd;margin-top:2px;width:100px;}
    </style>
</head>
<body>
    <h1>XML-DOM：节点的创建</h1>
    <ul id="uid">
        <li>成龙</li>
        <li>甄子丹</li>
        <li>李连杰</li>
        <li>宋小宝</li>
    </ul>
    名称：<input id="nid" type="text" size="10" name="name"/>
    <button onclick="doAdd()">添加</button>
</body>
<script>
    function doAdd(){
        //获取输入框中的信息
        var name = document.getElementById("nid").value;
        //获取ul元素节点对象
        var ul = document.getElementById("uid");
        //创建一个文本节点
        var tt = document.createTextNode(name);
        //创建一个元素节点
        var li = document.createElement("li"); //<li></li>
        //将文件节点添加到li元素节点中
        li.appendChild(tt);
        //将li节点添加到ul中
        //ul.appendChild(li); //后追加
        ul.insertBefore(li,ul.firstChild); //前插入
    }
</script>

13.5 XML DOM节点的克隆

cloneNode()

克隆节点。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript中的XML DOM</title>
    <style>
        #did{width:400px;height:300px;border:1px solid blue;}
        img{width:80px;border:2px solid #fff;margin:2px;}
        img:hover{border:2px solid red;}
    </style>
</head>
<body>
    <h1>XML-DOM：节点的克隆</h1>
    <div id="did"></div>
    <div id="mid">
        <img src="./images/11.jpg"/>
        <img src="./images/22.jpg"/>
        <img src="./images/33.jpg"/>
        <img src="./images/44.jpg"/>
    </div>
    <h4>双击图片可实现图片的添加</h4>
</body>
<script>
    //获取mid中的所有图片节点
    var list = document.getElementById("mid").getElementsByTagName("img");
    //遍历添加鼠标双击事件
    for(var i=0; i<list.length; i++){
        list[i].ondblclick = function(){
            //获取did节点
            var did = document.getElementById("did");
            //将当前图片节点克隆一份添加到did元素节点中
            did.appendChild(this.cloneNode());
        }
    }
</script>

13.6 XML DOM节点的替换

replaceChild()

替换子节点。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript中的XML DOM</title>
    <style>
        #did{width:400px;border:1px solid blue;}
        #did img{width:400px;}
        #mid img{width:80px;border:2px solid #fff;margin:2px;}
        #mid img:hover{border:2px solid red;}
    </style>
</head>
<body>
    <h1>XML-DOM：节点的替换</h1>
    <div id="did"><img src="./images/11.jpg"/></div>
    <div id="mid">
        <img src="./images/11.jpg"/>
        <img src="./images/22.jpg"/>
        <img src="./images/33.jpg"/>
        <img src="./images/44.jpg"/>
    </div>
    <h4>双击图片可实现图片的替换</h4>
</body>
<script>
    //获取id属性值为did的节点对象
    var did = document.getElementById("did");
    //获取id属性值为mid节点中的所有图片img元素节点
    var list = document.getElementById("mid").getElementsByTagName("img");
    //遍历图片节点，并绑定鼠标双击事件
    for(var i=0; i<list.length; i++){
        list[i].ondblclick = function(){
            did.replaceChild(this.cloneNode(),did.firstChild); //子节点替换
        }
    }
</script>

13.7 XML DOM操作select选项

appendChild()

向节点的子节点列表末尾添加新的子节点。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript中的XML DOM</title>
    <style>
        select{width:100px;height:200px;border:1px solid #ddd;float:left;}
        div{width:100px;height:200px;float:left;text-align:center;padding-top:50px;}
    </style>
</head>
<body>
    <h1>XML DOM 操作-select对象</h1>
    <select id="sid1" size="10" multiple>
        <option value="0">邓丽君</option>
        <option value="1">张国荣</option>
        <option value="2">梅艳芳</option>
        <option value="3">黄家驹</option>
        <option value="4">迈克尔.杰克逊</option>
        <option value="5">姚贝娜</option>
        <option value="6">张雨生</option>
    </select>
    <div>
        <button onclick="doMove('sid1','sid2')">>></button>
        <br/><br/><br/><br/>
        <button onclick="doMove('sid2','sid1')"><<</button>
    </div>
    <select id="sid2" size="10" multiple></select>
</body>
<script>
   function doMove(d1,d2){
       //获取对应的下拉框节点对象
       var select1 = document.getElementById(d1);
       var select2 = document.getElementById(d2);
       //获取第一个下拉框中的所有option下拉项节点对象
       var list = select1.getElementsByTagName("option");
       //遍历并判断是否选中
       for(var i=0; i<list.length; i++){
           if(list[i].selected){
               list[i].selected = false;
               select2.appendChild(list[i]); //使用XML DOM移动下拉项
               i--;
           }
       }
   }
</script>

13.8 XML DOM操作table表格

removeChild()

删除子节点。

<form>

reset()

把表单的所有输入元素重置为它们的默认值。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript中的XML DOM</title>
    <style>
        select,option,div,button{margin:0px;padding:0px;}
        #lid,#rid,div{
            width:80px;
            height:260px;
            float:left;
        }
        div{
            text-align:center;
            padding-top:60px;
        }
    </style>
</head>
<body>
    <h1>JavaScript语言中XML DOM 操作-table对象</h1>
    <table id="tid" width="500" border="1">
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1001</td>
                <td>张三</td>
                <td>男</td>
                <td>20</td>
                <td><button onclick="dodel(this)">删除</button></td>
            </tr>
            <tr>
                <td>1002</td>
                <td>李四</td>
                <td>女</td>
                <td>21</td>
                <td><button onclick="dodel(this)">删除</button></td>
            </tr>
            <tr>
                <td>1003</td>
                <td>王五</td>
                <td>男</td>
                <td>22</td>
                <td><button onclick="dodel(this)">删除</button></td>
            </tr>
        </tbody>
    </table>
    <br/><br/><br/>
    <h2>添加学生信息</h2>
    <form action="#" name="myform" onsubmit="return doAdd()">
        学号：<input type="text" name="sno"/><br/><br/>
        姓名：<input type="text" name="name"/><br/><br/>
        性别：<input type="text" name="sex"/><br/><br/>
        年龄：<input type="text" name="age"/><br/><br/>
        <input type="submit" value="添加"/>
    </form>
</body>
<script>
   //执行数据删除操作
   function dodel(bt){
      bt.parentNode.parentNode.parentNode.removeChild(bt.parentNode.parentNode);
   }
   
   function doAdd(){
       //获取表单信息
       var data = new Array();
       data[0] = document.myform.sno.value;
       data[1] = document.myform.name.value;
       data[2] = document.myform.sex.value;
       data[3] = document.myform.age.value;
       //获取tbody元素节点对象
       var tbody = document.getElementById("tid").getElementsByTagName("tbody")[0];
       //创建一个元素节点tr
       var tr = document.createElement("tr");
       //遍历数据并创建td节点
       for(var i=0; i<data.length; i++){
           var td = document.createElement("td");
           var text = document.createTextNode(data[i]);
           td.appendChild(text);
           tr.appendChild(td);
       }
       //添加删除按钮
       var td = document.createElement("td");
       td.innerHTML = '<button onclick="dodel(this)">删除</button>';
       tr.appendChild(td);
       //将行节点tr放置到tbody中
       tbody.appendChild(tr);

       //清空表单
       document.myform.reset();

       return false;
   }
</script>