DHTML介绍

大家好，欢迎来到IT知识分享网。

[基于达内教育的学习,总结提炼]

一. 概述

DHTML: Dynamic HTML 即动态的 html

DHTML并不是一门新的技术, 而是将现有的HTML, CSS, JavaScript整合在一起, 形成了DHTML技术.

DHTML分为BOM和DOM。

BOM：Browse Object Modle 即浏览器对象模型，其中封装了浏览器操作相关对象。

DOM：Document Object Modle 即文档对象模型，将整个HTML文档按照文档结构组织成了树形结构。

二. BOM

2.1.window对象

此对象为全局对象，因此，调用方法或属性时，可以省略window。

常用事件：

onclick事件 – 当窗口被点击时触发

onfocus事件 – 当窗口获得焦点时触发

onblur事件 – 当窗口失去焦点时触发

onload事件 – 当整个html文档加载完之后立即触发

常用方法：

alert() – 消息对话框

confirm() – 确认对话框 点击确定，返回true，取消则返回false

2.2.location对象

属性：

href – 获取或设置浏览器地址栏url。

三. DOM

3.1.获取元素

document.getElementById(“id值”);  通过id值获取指定id的元素

div.getElementById(“id值”);

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

document.getElementsByTagName(“元素名”);  通过元素的名称获取指定元素名的所有元素组成的集合数组

value属性： 获取或设置输入框的value值

innerText：  (部分浏览器不支持) 获取或设置元素内的文本内容

innerHTML：  获取或设置元素的html内容

3.2.元素的增删改

var oDiv = docuemnt.createElement(“div”);  创建一个div元素

body.appendChild(oDiv);  往body中追加一个子元素

body.removeChild(oDiv);  删除oDiv子元素

body.replaceChild(oNewDiv, oDiv);  用oNewDiv替换已有的子元素oDiv

body.insertBefore(oDiv1, oDiv);  往body中插入一个子元素oDiv1, 子元素是插入在oDiv的前面

oDiv.cloneNode([boolean]);  克隆oDiv元素, 参数默认值为false, 表示只克隆元素本身, 不克隆oDiv内的所有子孙元素, 如果希望克隆元素还克隆元素内容所有子孙元素, 可以传入参数true.