DHTML

概述

DHTML Dynamic Hyper Text Markup Language
所谓的DHTML就是在原有的HTML内容之上，提供js访问接口，允许js访问页面中HTML元素标签。（HTNL和JS结合在一起使用的技术就是DJTML）
DHTML把页面中HTML页面每个元素标签看做成js对象，形成js文档树，通过DHTML技术操作HTML页面元素标签，就是操作js 文档树身上的对象。
对于js对象的操作可以有增删改查

分类

BOM（Browser Object Model 浏览器对象模型）

window：代表一个浏览器窗口的对象

• 其中包含的方法
  onblur：失去焦点
  window.onblur=function () { alert("鼠标走了。。。"); }
  onfocus：获得焦点
  window.onfocus=function () { alert("鼠标来了。。。"); }
  !!!onload：当前浏览器页面装载完成后触发
  window.onload=function () { var div=document.getElementById("div1"); div.innerText="aaa"; }
  !!!alert
  !!!confirm
  var flag=window.confirm("是否使用葵花宝典的力量？"); if (flag){ alert("欲练此功，必先自宫！！！"); }else { alert("不练此功，也得自宫！！！"); }
  !!!prompt
  var passwd=window.prompt("请输入密码"); if ("12138"==passwd){ alert("OK"); }else { alert("NO"); }
  !!!close：（仅限浏览器，chrom和firefox需要解决浏览器禁止js关闭非js创建页面的问题）
  //关闭窗口 // window.close();
  !!!setlnterval—每经过指定毫秒值再执行一次函数内容
  window.setInterval(function () { var div=document.getElementById("div1"); var data=new Date(); var time=data.toLocaleString(); div.innerText=time; },1000);
  !!!setTimeout—在指定毫秒值之后执行一次函数内容
  window.setTimeout(function () { console.log("过了3秒") },3000);
• 其中包含的对象：（我们可以通过window引出这些对象）
  location
  console.log(window.location.hash); console.log(window.location.host); console.log(window.location.hostname); console.log(window.location.href);
  screen
  console.log(window.screen.availHeight); console.log(window.screen.availWidth);
  history
  function back() { window.history.go(-1); } function forword() { window,history.go(1); }
  navigator—浏览器信息的对象
  console.log(window.navigator.appCodeName); console.log(window.navigator.appVersion); console.log(window.navigator.appName);
  document

location

• !!!href：获取或设置地址栏上的地址。通过此属性js可以控制浏览器访问一个新的地址

navigator

history

• length
• back()
• forward()
• go()

DOM（Document Object Model 文档对象模型）

1.获取节点

document.getElementById()	通过id获取页面中的元素
document.getElementsByName()	通过name获取页面中的元素
document.getElementdByTagName()	通过元素名获取页面中的元素
innerText	设置或获取元素身上的文本内容
innerHTML	设置或获取元素身上的HTML内容

2.增删改查

新增节点

创建新节点
  document.createElement("div");
挂载到父节点

function addNode() {
        //新建新节点
        var new_div=document.createElement("div");
        //获取BODY节点当做父节点
        var parentNode=document.getElementsByTagName("body")[0];
        //把新节点挂载到父节点上
        // parentNode.appendChild(new_div);

        //在div4之前插入新节点
        //获取div4节点
        var old_div=document.getElementById("div_4");
        //插入din4节点之前
        parentNode.insertBefore(new_div,old_div);

    }

删除节点

parnetNode.removeChild(div_3);

//删除节点
    function deleteNode() {
        //获取BODY节点当做父节点
        var paranetNode=document.getElementsByTagName("body")[0];
        var div_3=document.getElementById("div_3");
        //删除指定节点
        paranetNode.removeChild(div_3);
    }

替换节点

parnetNode.replaceChild(new_div,div_2);

//替换节点
    function updateNode() {
        //获取BODY节点当做父节点
        var parentNode=document.getElementsByTagName("body")[0];
        var div_2=document.getElementById("div_2");
        var new_div=document.createElement("div");
        parentNode.replaceChild(new_div,div_2);
    }

克隆节点

false表示只克隆节点不包含节点内容
true表示不仅克隆节点而且克隆节点内容
默认是false
div_4.cloneNode();

//克隆节点
    function copyNode() {
        var paranetNode=document.getElementsByTagName("body")[0];
        var div_4=document.getElementById("div_4");
        var clone_div = div_4.cloneNode(true);
        paranetNode.appendChild(clone_div);
    }