DOM编程

DOM模型概述

DOM模型和HTML文档

访问HTML元素

根据ID访问HTML元素

根据CSS选择器来访问HTML元素

代码示例：

	<div id="a">疯狂java讲义</div>
   <textarea name="" id="b" cols="25" rows="3">轻量级javaee企业应用实战</textarea>
   <input type="button" value="访问两个元素" onclick="accessById();">
   <script>
	    var accessById = function(){
	        alert(document.querySelector("#a").innerHTML+"\n"+
	        document.querySelector("#b").value);
        }
    </script>

效果图示

代码示例：

<div></div>
   <div></div>
   <div></div>
   <input type="button" value="修改全部div元素" οnclick="change()">
   <script>
        var change = function(){
            var divlist = document.querySelectorAll("div");
            alert(divlist);
            for (var i = 0;i<divlist.length ;i++) {
                    divlist[i].innerHTML = "测试内容"+i;
                    divlist[i].style.width = "300px";
                    divlist[i].style.height = "50px";
                    divlist[i].style.margin = "10px";
                    divlist[i].style.backgroundColor = "#faa";
                    divlist[i].onclick = function(){
                        for (var j = 0; j < divlist.length; j++) {
                            divlist[j].style.backgroundColor = "#faa";
                        }
                        this.style.backgroundColor = "blue";
                    }
                
            }
        }
    </script>

效果图示

通过querySelector实现下拉菜单
下拉菜单
通过querySelector实现显示内容的切换
添加链接描述

利用节点关系访问HTML元素

代码中用两个nextSibling的原因：空白与换行符也会被识别为一个结点
代码示例

 <ol id="books">
        <li id="java">第一个</li>
        <li id="ssh">第二个</li>
        <li id="ajax" class="selected">第三个</li>
        <li id="xml">第四个</li>
        <li id="ejb">第五个</li>
        <li id="android">第六个</li>
    </ol>
    <input type="button" value="父节点" onclick="change(curTarget.parentNode)">
    <input type="button" value="第一个" onclick="change(curTarget.parentNode.firstChild.nextSibling)">
    <input type="button" value="上一个" onclick="change(curTarget.previousSibling.previousSibling)">
    <input type="button" value="下一个" onclick="change(curTarget.nextSibling.nextSibling)">
    <input type="button" value="最后一个" onclick="change(curTarget.parentNode.lastChild.previousSibling)">
    
    <script>
        //空白也算一个结点
        var curTarget = document.getElementById("ajax");
        curTarget.style.backgroundColor = "red";
        var change = function(target){
            alert(target.innerHTML);
        }
    </script>

访问表单控件

访问表单控件有下面三种方法

代码示例：

	<form action="" id="d" method="post">
        <input type="text" name="user" id=""><br>
        <input type="text" name="pass" id=""><br>
        <select name="color" id="">
            <option value="red">红色</option>
            <option value="blue">蓝色</option>
        </select><br>
        <input type="button" value="第一个" onclick="alert(document.getElementById('d').elements[0].value);">
        <input type="button" value="第二个" onclick="alert(document.getElementById('d').elements['pass'].value);">
        <input type="button" value="第三个" onclick="alert(document.getElementById('d').color.value);">
    </form>

效果图示：

访问列表框、下拉菜单的选项

代码示例：

<select name="mySelect" id="mySelect" size="6">
        <option value="java">java讲义</option>
        <option value="ssh">轻量级javaee企业应用实战</option>
        <option value="ajax" selected>疯狂java讲义</option>
        <option value="xml">疯狂xml讲义</option>
        <option value="ejb">经典javaee企业应用实战</option>
        <option value="Android">疯狂Android讲义</option>
    </select><br>   
    <input type="button" value="第一个" onclick="change(curTarget.options[0]);">
    <input type="button" value="上一个" onclick="change(curTarget.options[curTarget.selectedIndex - 1])">
    <input type="button" value="下一个" onclick="change(curTarget.options[curTarget.selectedIndex + 1])">
    <input type="button" value="最后一个" onclick="change(curTarget.options[curTarget.length - 1])">
    <script>
        var curTarget = document.getElementById("mySelect");
        var change = function (target) {
            alert("内容："+target.text+"   value:"+target.value)
        }
    </script>

效果图示：

代码示例实现点击多选框界面跳转：

<select id="my" size="4" style="width: 100px;height: 100px;">
        <option value="http://www.baidu.com">百度</option>
        <option value="http://www.taobao.com">淘宝</option>
        <option value="http://www.360.cn">360</option>
    </select>
    <script>
        var sel = document.getElementById("my");
        var list = sel.options;
        for (let i = 0; i < list.length; i++) {
            list[i].onclick = function (){
                var link = list[i].value;
                window.open(link);
            }
            
        }
    </script>
    

访问表格子元素

代码示例

<table id="d" border="1">
         <caption>疯狂java体系</caption>
         <tr>
             <td>疯狂java讲义</td>
             <td>轻量级javaee企业应用实战</td>
         </tr>
         <tr>
             <td>疯狂ajax讲义</td>
             <td>经典javaee企业应用实战</td>
         </tr>
         <tr>
             <td>疯狂xml讲义</td>
             <td>疯狂Android讲义</td>
         </tr>
     </table>
     <input type="button" value="表格标题" onclick="alert(document.getElementById('d').caption.innerHTML)">
     <input type="button" value="第一行第一格" onclick="alert(document.getElementById('d').rows[0].cells[0].innerHTML)">
     <input type="button" value="第二行第二格" onclick="alert(document.getElementById('d').rows[1].cells[1].innerHTML)">
     <input type="button" value="第三行第二格" onclick="alert(document.getElementById('d').rows[2].cells[1].innerHTML)">
     

效果图示：

修改HTML元素

代码示例：

	改变第<input type="text" name="" id="row" size="2">行，
      第<input type="text" name="" id="cel" size="2">列的值为：
      <input type="text" name="" id="celVal" size="16"><br>
      <input type="button" value="改变" id="chg" onclick="change()">
      <table id="d" border="1" style="width: 580px;border-collapse:collapse ;">
        <tr>
            <td>疯狂java讲义</td>
            <td>轻量级javaee企业应用实战</td>
        </tr>
        <tr>
            <td>疯狂ajax讲义</td>
            <td>经典javaee企业应用实战</td>
        </tr>
        <tr>
            <td>疯狂xml讲义</td>
            <td>疯狂Android讲义</td>
        </tr>
      </table>
      <script>
          var change = function(){
              //获取表格
              var tb =document.getElementById('d');
              //获取修改的行数
              var row = document.getElementById("row").value;
              row = parseInt(row);
              //判断合法
              if(isNaN(row)){
                  alert("您要修改的行必须是整数");
                  return false;
              }
              //获取修改的列
              var cel = document.getElementById("cel").value;
              cel = parseFloat(cel);
              //判断合法
              if(isNaN(cel)){
                  alert("您要修改的行必须是整数");
                  return false;
              }
              if(row>tb.rows.length||cel>tb.rows.item(0).cells.length){
                alert("要修改的单元格不在该表格内");
                return false;
              }
              //修改
              tb.rows.item(row-1).cells.item(cel-1).innerHTML = document.getElementById("celVal").value;
          }
      </script>

效果图示：

增加HTML元素

代码示例：

<ul id="d">
            <li>疯狂java讲义</li>

      </ul>
      <script>
          //给ul添加li
          var ul  = document.getElementById("d");
          var ajax = ul.firstChild.nextSibling.cloneNode(false);
          ajax.innerHTML = "疯狂ajax讲义";
          //ul.appendChild(ajax);//在末尾加
          ul.insertBefore(ajax,ul.firstChild)//在第一个孩子前面加，也就是头上
      </script>

为列表框、下拉菜单添加选项

代码示例：

<div id="body">
        
    </div>
      <script>
          //创建一个select
          var a = document.createElement("select");
          for (let i = 0; i < 10; i++) {
              var op = document.createElement("option");
              op.innerHTML = "新建选项"+i;
              a.add(op,null);          
          }
          a.size = 5;
          document.getElementById("body").appendChild(a);
      </script>

动态的添加表格内容

代码示例：

创建一个<input type="text" name="" id="row">行<input type="text" name="" id="cell">列,内容为<input type="text" name="" id="text">的表格
      <input type="button" value="创建" onclick="create()">
      <div id="xxx">

      </div>
      <script>
        var create = function (){
            var xxx = document.getElementById("xxx");
            xxx.innerHTML = "";
            var text = document.getElementById("text").value;
            var row = document.getElementById("row").value;
            row = parseInt(row);
            var cell = document.getElementById("cell").value;
            cell = parseFloat(cell);
            if(isNaN(row)){
                alert("创建表格的行必须是整数！");
                return false;
            }
            if(isNaN(cell)){
                alert("创建表格的列必须是整数！");
                return false;
            }
            if(row <= 0||cell <= 0){
                alert("输入数值不合法");
            }
            var b = document.createElement("table");
            b.style.width = '800px';
            b.style.borderCollapse = "collapse";
            b.border = 1;
            b.className = "table";
            var caption2 = b.createCaption();
            caption2.innerHTML = "表格标题";
            for (let i = 0; i < row; i++) {
                var tr = b.insertRow(i);
                for (let j = 0; j < cell; j++) {
                    var td = tr.insertCell(j);
                    td.style.padding = "5px";
                    td.innerHTML = text + i + j;
                }
                document.getElementById('xxx').appendChild(b);
            }
        }
          
      </script>

删除HTML元素

1.删除节点

删除列表框、下拉菜单的选项

代码示例：

<input type="text" name="" id="opValue">
      <input type="button" value="增加" id="add"  onclick="add()">
      <input type="button" value="删除" id="del" onclick="del()"><br>

      <select name="" id="show" size="8" style="width: 180px;"></select>
      <script>
          //动态添加option
          var show = document.getElementById("show");
          var add = function(){
             var op = new Option(document.getElementById('opValue').value)
             show.options[show.options.length] = op;
             document.getElementById('opValue').value = "";
          }
          var del = function(){
              if(show.options.length > 0){
                show.remove(show.options.length - 1);
              }
          }
      </script>

删除表格的行或单元格

代码示例：

<input type="button" value="删除表格最后一行" id="delrow" onclick='delrow()'><br>
      <input type="button" value="删除最后一行最后一列" id="delcell" onclick="delcell()"><br>
      删除第<input type="text" name="" id="row" style="width: 50px;">行，第
      <input type="text" name="" id="cel" style="width: 50px;">列的元素
      <input type="submit" value="删除" onclick="del_num()">
      <table id='table' border="1" style="width: 500px;">
        <caption>标题</caption>
        <tr>
            <td>第1行第1列</td>
            <td>第1行第2列</td>
        </tr>
        <tr>
            <td>第2行第1列</td>
            <td>第2行第2列</td>
        </tr>
        <tr>
            <td>第3行第1列</td>
            <td>第3行第2列</td>
        </tr>
      </table>
      <script>
          //获取table表格
          var tab = document.getElementById("table");
          //删除行
          var delrow = function(){
              if(tab.rows.length > 0){
                  //删除最后一行
                  tab.deleteRow(tab.rows.length - 1);
              }
          }
          //删除最后一行最后一列
          var delcell = function(){
            //获取表格所有行
              var rowList =tab.rows;
              var lastRow = rowList.item(rowList.length -1);
                if(lastRow.cells.length > 0){
                    lastRow.deleteCell(lastRow.cells.length - 1);
                }else{
                    delrow();
                    delcell();
                }
              
          }
          //删除指定行和列
          //获取对应的行数和列数
            var del_num = function(){
                var row = document.getElementById("row").value;
                var cell = document.getElementById("cel").value;
                row = parseInt(row);
                cell = parseInt(cell);
                if(isNaN(row)){
                    alert("表格的行必须是整数！");
                    return false;
                }
                if(isNaN(cell)){
                    alert("表格的列必须是整数！");
                    return false;
                }
                if(row <= 0||cell <= 0||row>tab.rows.length||cell>tab.rows[row-1].cells.length){
                    alert("输入数值不合法");
                }
                var ROW = tab.rows[row-1];
                ROW.deleteCell(cell - 1);
                if (ROW.cells.length == 0) {
                    tab.deleteRow(row-1);
                }
                
            }
            
      </script>

使用window对象

给状态栏添加动画文字

<body onload="stack()">
    <script>
        var statusText = "自定义动画状态栏文字";
        var out = "";
        //动画间隔时间
        var pause = 25;
        //动画宽度
        var animateWidth = 20;
        var position = animateWidth;
        var i = 0;
        var stack = function(){
            if(statusText.charAt(i)!= ""){
                out = '';
                //将0到i-1个字符拼成输出字符串
                for (var j = 0; j < i; j++) {
                    out += statusText.charAt(j);
                }
                for ( j = i; j < position; j++) {
                    out += " ";
                }
                //将第i个字符添加到输出字符串里
                out += statusText.charAt(i);
                for ( j = position; j < animateWidth; j++) {
                    out+=" ";
                }
                window.status = out;
                if(position == 1){
                    animateWidth++;
                    position = animateWidth;
                    i++;
                }else{
                    position--;
                }
            }else{
                i++;
            }
            if (i<statusText.length) {
                setTimeout("stack()",pause);
            }
        }

    </script>
</body>

访问页面URL

客户机屏幕信息

弹出窗口

弹出新窗口

确认对话框和输入对话框

使用定时器

代码示例：

<span id="tm"></span>
      <script>
          var timer;
          var cur = new Date().getTime();
          var setTime = function(){
              document.getElementById('tm').innerHTML=new Date().toLocaleString();
              if(new Date().getTime() - cur <= 60*1000){
                window.setTimeout("setTime();",1000);
              }
          }
          setTime();
      </script>

settimeout要用递归的形式才能实现一直循环

桌面通知

navigator和地理定位

需要打开位置信息
代码示例：

<script>
          var geoHandler = function(position){
            var geoMsg = '用户所在地理位置的信息是：<br/>';
            geoMsg += "timestamp属性为："+position.timestamp +"<br/>";
            var coords = position.coords;
            for (var prop in coords) {
                geoMsg += prop + '->'+coords[prop] +"<br/>";
            }
            document.writeln(geoMsg);
          }
          var errorHandler = function(error){
            var errMsg = {
                1:"用户拒绝了位置服务",
                2:"无法获取地理位置信息",
                3:"获取地理位置信息超时"
            };
            alert(errMsg[error.code]);
          }
          navigator.geolocation.getCurrentPosition(geoHandler,errorHandler,{
              enableHighAccuracy:true,
              maximumAge:1000
          })
      </script>

在高德地图上定位：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=b9b98e2958b5414cccf88a34b5b27666    "></script> 

</head>
<body onload="init()">
      
      <div id="container" style="width: 100%;height: 100%;">

      </div>
      <script>
          function init(){
            navigator.geolocation.getCurrentPosition(function(position){
                var lnglat = [position.coords.longitude,position.coords.latitude];
                var map = new AMap.Map('container',{
                    resizeEnable:true,
                    zoom:16,
                    center:lnglat
                });
                var infoWindow = new AMap.infoWindow({
                    content:"我这里是我家"
                });
                infoWindow.open(map,lnglat);
            },
            function(error){alert("您的浏览器没有提供地理位置信息！");},
            {
                enableHighAccuracy:true,
                maximumAge:1000
            });
            
          }
      </script>
</body>
</html>

获取电池信息

历史记录

代码示例：
jsp部分：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% 
	String id = request.getParameter("id");
	String result = null;
	switch(id){
		case "one":
			result = "我是齐天大圣！";break;
		case "two":
			result = "我是天蓬元帅！";break;
		case "three":
			result = "我是沙和尚！";break;
		case "four":
			result = "我是白龙马！";break;
		case "five":
			result = "我东土大唐来取经的圣僧！";break;
	}
	out.println(result);
%>

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <style>
        table{
            display: inline-table;
            width: 320px;
            border: 1px solid lightgray;
            border-collapse: collapse;
            vertical-align: top;
            margin-right: 0px;
        }
        td{
            padding: 15px;
            cursor: pointer;
            border: 1px solid lightgray;
        }
        tr{
            background: linear-gradient(to right,#f6f6f6,#fff);
        }
        tr:hover{
            background: linear-gradient(to right,#eee,#f6f6f6);
        }
        div>div{
            display: inline-block;
            width: 400px;
            height: 300px;
            padding: 10px;
            box-sizing: border-box;
            border: 1px solid lightgray;
            margin-left: 0px;
        }
    </style>
</head>
<body>
    <div style="width: 725px;">
        <table border="1">
            <tr>
                <td title="one">
                    孙悟空
                </td>
            </tr>
            <tr>
                <td title="two">
                    猪八戒
                </td>
            </tr>
            <tr>
                <td title="three">
                    沙和尚
                </td>
            </tr>
            <tr>
                <td title="four">
                    唐僧
                </td>
            </tr>
            <tr>
                <td title="five">
                    白龙马
                </td>
            </tr>
        </table>
        <div id="show"></div>
    </div>
    <script>
        var xhr = new XMLHttpRequest();
        window.onload = function(){
            history.replaceState(null,"首页",'index.html?id=one');
        }
        var tdList = document.querySelectorAll("td");
        for (let i = 0; i < tdList.length; i++) {
            tdList[i].onclick = function(src){
                sendGet("books.jsp?id="+src.target.title);
                history.pushState({"cellTitle":src.target.title},"首页","index.html?id="+src.target.title);
                var tdList = document.querySelectorAll("td");
                for (let j = 0; j < tdList.length; j++) {
                    tdList[j].style = undefined;
                }
                src.target.style.background = 'linear-gradient(to right,#ddd,#eee)';
            }
            
        }
        function sendGet(url){ 
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    document.querySelector("#show").innerHTML = xhr.responseText;
                }
            }
            xhr.open("GET",url,true);
            xhr.send();
        };
        window.addEventListener("popstate",function(){
            var curTitle = history.state['cellTitle'];
            var tdList = document.querySelectorAll("td");
            for (let j = 0; j < tdList.length; j++) {
                if(tdList[j].title == curTitle){
                    tdList[j].style.background = 'linear-gradient(to right,#ddd,#eee)';
                }else{
                    tdList[j].style = undefined;
                }
            }
            queryStr = window.location.href.split("?")[1];
            sendGet("books.jsp?"+queryStr);
        })
    </script>
</body>
</html>

代码效果：点击按钮更换div内容，同时更新url地址，点击浏览器向前向后都可以进行访问

使用document对象

读写Cookie

分析时间性能

分析导航行为

代码示例：

<script>
        switch(performance.navigation.type){
            case 0 : alert("正常导航到该界面！");break;
            case 1 : alert("用户重新加载该界面！");break;
            case 2 : alert("用户前进到该界面！");break;
            default : alert("其他方法进入该页面！");break;
        }
    </script>