2025年DHTML介绍

科技前沿 • 2025-02-23 08:46 • 阅读 59

大家好，我是讯享网，很高兴认识大家。

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

一. 概述

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.