我与JS的那些陈年旧事（二）

DHTML概述

1.DHTML:Dynamic HTML

DHTML不是一门新的技术,而是将已有的HTML、css、JS整合在了一起，实现了通过JS访问元素和css属性。通过JS访问html元素或css属性,使得页面具有动态的变化，从而和用户具有交互的行为。

2.工作原理

(1).在DHTML中,将所有的html元素都使用一个一个的JS对象来表示

(2).通过对象来表示html元素, 通过对象之间的包含关系, 来表示元素之间的层级关系

(3).可以通过调用对象的属性或方法, 来间接改变元素的属性和行为

---

1.BOM

• Window对象

代表浏览器中一个打开的窗口

(1).window对象的常用方法

//(1) alert(); -- 定义一个消息对话框
window.alert("哈哈哈");

//(2) confirm(); -- 定义一个确定对话框
var res = window.confirm("您确定要删除该订单吗？");
if(res){
    alert("订单删除成功!");
}else{
    alert("操作已取消！");
}

//(3) setInterval(); -- 定义一个循环定时器,
    //chearInter(); -- 清除定时器
var i = 0;
var timer = setInterval(function(){
    console.log(new Date().getTime());
    i++;
    if(){
     clearInterval(timer);   
    }
},3000);

//setTimeout(); -- 定义一个一次性定时器
setTimeout(function(){
    console.log("Hello...");
},2000);

(2).window对象的常用事件

在JS中获取元素时, 如果获取元素的代码比元素被浏览器加载的时机还要早, 此时是获取不到元素的.
这里我们可以等浏览器加载完整个html文档之后, 再执行获取元素的代码, 就一定能够获取到.

    


    

        获取div中的所有内容...
    

DOM

• 获取html元素

(1).通过元素的ID获取元素

• document.getElementById(id值) – 通过元素的ID值获取指定ID的元素
  
• value属性 – 获取或设置元素的value值

/* --通过ID获取并弹出用户名输入框的值
    input    value值就是输入框中的内容
    select   value值就是选中的option的value值option的内容
    textarea value值输入框中的内容
-- */

function demo1(){
    //1.获取用户名输入框元素(input元素)
    var inp = document.getElementById("username");
    //2.获取用户名输入框的value值.
    alert( inp.value );
}

(2).通过元素的name属性获取元素

• document.getElementsByName(name属性值): 通过元素的name属性值获取指定name的所有元素组成的集合数组

/* --通过name属性获取并弹出密码输入框的值-- */
function demo2(){
    //1.获取密码输入框元素
    var arrInps = document.getElementsByName("password");//集合数组
    var inp = arrInps[0];//密码输入框元素
    //2.通过密码输入框获取其中的值
    alert( inp.value );
}

(3).通过元素名称/标签名称获取元素

• document.getElementsByTagName(tagName): 通过元素的名称获取指定名称的元素组成的集合数组

/* --通过标签名获取并返回所有input元素的value值-- */
function demo3(){
    //1.获取所有的input元素组成的集合数组
    var arrInps = document.getElementsByTagName("input");
    //2.遍历所有的input元素,并获取其value值
    for(var i=0;i

(4).innerHTML,innerText

• innerHTML:获取或设置元素的所有内容（既包含html元素也包含文本内容）
• innerText:获取或设置元素的文本内容(仅仅是文本)

function dom(){
    //1.获取p元素
    var p = documnet.getElementById("pid");
    //2.通过p元素获取p元素中的所有内容
    //alert( p.innerHTML );
    //alert( p.innerText );
    //p.innerHTML = "我是来替换的..";
    p.innerText = "我是来替换的..";
}

• 增删改html元素

(1).创建元素、添加元素

• ==document.createElement(tagName)==:创建一个指定名称元素
• ==parent.appendChild(child)==:通过父元素调用方法添加子元素

function addNode(){
    //1.创建一个div元素
    var div = document.createElement("div");
    
    var color = ["red","green","blue","cyan"];
    var index = parseInt(Math.random()*4);
    div.style.backgroundColor = color[index];
    div.innerHTML = "我是新来的";
    //2.获取父元素(body)
    var body = document.body;
    //3.通过父元素添加子元素
    body.appendChild(div);
}

(2).删除元素

• ==parent.removeChild(child)==:通过父元素调用方法删除已有的子元素

/* --删除节点: 删除body中id值为 div_3 的div元素-- */
//parentNode
function deleteNode(){
    //1.获取将要被删除的元素
    var div_3 = document.getElementById("div_3");
    //2.获取body元素
    //var body = document.body;
    var body = div_3.parentNode;

    //3.通过父元素删除子元素
    body.removeChild( div_3 );
}

(3).替换元素

• ==parent.replaceChild(new, child):== 通过父元素调用方法使用新元素替换已有的子元素

/* --更新节点: 用新节点替换id值为 div_2 的div元素  -- */
function updateNode(){
    //1.创建一个新的div元素
    var newDiv = document.createElement("div");
    newDiv.innerHTML = "我是替换的div...";
    //2.获取要被替换的元素
    var div2 = document.getElementById("div_2");
    //3.获取body元素
    var body = document.body;
    //4.通过父元素调用替换方法
    body.replaceChild(newDiv, div2);
}

(4).克隆/复制元素，插入元素

• obj.cloneNode();
• parent.insertBefore(new,chlid);

/* --克隆节点、插入节点到指定元素的前面--*/
function copyNode(){    
     //1.获取div_4元素
     var div = document.getElementById("div_4");
    //2.克隆div_4
    //true/1表示克隆元素全部内容，不写/0表示仅克隆元素
    var div_copy = div.cloneNode(true);
    //3.获取body元素
    var body = document.body;
    //4.获取div_2元素
    var div_2 = document.getElementById("div_2");
    //5.插入到div_2元素前面
    body.insertBefore(div_copy,div_2);
    }