DHTML

最新推荐文章于 2024-05-06 20:52:53 发布

T–hrone

最新推荐文章于 2024-05-06 20:52:53 发布

阅读量131

点赞数

分类专栏：笔记文章标签： html css javascript

本文链接：https://blog.csdn.net/qq_46019010/article/details/119539479

版权

笔记专栏收录该内容

29 篇文章 0 订阅

订阅专栏

DHTML概述

什么是DHTML

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

实例：通过点击按钮改变属性

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script>
    	function changeDiv(){
    	//    1.获取div元素
        	var div = document.getElementById("div1")
    	//    2.改变div的宽、高、边框
        	div.style.width="100px";
        	div.style.height="100px";
        	div.style.border="5px solid red";
        	div.style.fontSize="26px";
    	}
	</script>
</head>
<body>
	<input type="button" value="别点我" onclick="changeDiv()">
	<hr/>
	<div id="div1" style="width:50px;height:50px;background-color:blue">123</div>
</body>
</html>

DHTML工作原理

在DHTML中，将所有的html元素都是用一个一个的JS对象来表示
通过对象来表示html元素，通过对象之间的包含关系，来表示元素之间的层级关系
可以通过调用对象的属性或方法，来间接改变元素的属性和行为
通过这种方式使得JS可以访问html元素和css属性，让页面具有动态的变化，和用户具有了交互的行为

可以将DHTML分为两部分内容
- BOM：Browser Object Model 浏览器对象模型提供了一套操作浏览器的API。
- DOM：Document Object Model 文档对象模型提供了一套操作html元素和css属性的API。

BOM

window对象

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

window对象的常用方法
1. alert(string); - - 定义一个消息对话框
2. confirm(string); - - 定义一个确认对话框
3. setInterval(object,间隔的毫秒值); - - 定义一个循环定时器
  清除该定时器：clearInterval(清除对象);需要放在object对象的方法体中执行
4. setTimeout(object,毫秒值); - - 定义一个一次性定时器
  清除该定时器：clearTimeout(清除对象);
window对象的常用事件
- onload：浏览器完成对象的加载后触发
  在JS中获取元素时，如果获取元素的代码比元素被浏览器加载的时机还要早，此时是获取不到元素的
  这里我们可以等浏览器加载完整个 html 文档之后，再执行元素的代码，就一定能获取到
```
window.onload = function(){
    var div=document.getElementById("div1")
    console.log(div.innerHTML);
}
```
- onmove：当对象移动时触发
- onmoveend：当对象停止移动时触发
- onmovestart：当对象开始移动时触发
- onresize：当对象的大小将要改变时触发
- onresizeend：当用户更改完控件选中区中对象的大小时触发
- onresizestart：当用户开始更改控件选中区中对象大小时触发
- onscroll：当用户滚动对象的滚条时触发
- onunload：当对象卸载前立即触发
- onhelp：当用户在浏览器为当前窗口时按F1键时触发
- onfocus：当对象获得焦点时触发
- onerror：当对象加载过程中发生错误时触发

DOM

获取html元素

document对象：

通过ID属性获取元素对象：getElementById(id)
```
var x = document.getElementById("id值");
```
通过 name 属性获取元素对象数组：getElementsByName(name)
```
var x = document.getElementsByName("name值");
var x0 = x[0];
```

通过标签名获取元素对象数组：getElementsByTagName(tagname)

var arrInps = document.getElementsByTagName("标签名");
for(var i=0;i<arrInps.length;i++){
	console.log(arrInps[i]);
}

通过 class 属性：getElementsByClassName(class)

获取元素内容
innerHTML:获取元素所有内容
innerText:获取元素文本内容

var x = document.getElementById("id");
alert(x.innerHTML);
alert(x.innerText);

可以设置元素的内容(会替换原本的内容)

x.innerHTML="<a>可替换标签和文本</a>";
x.innerText="只替换文本";

当前元素的父元素：parentNode
```
thisobj.parentNode;
```

当前元素的子元素

thisobj.getElementByTagName(tagname);
//还有id,name.class等

增删改html元素

创建元素
document.createElement(tagname)：创建指定名称标签元素

var child = document.createElement("div");
child.innerHTML = "我是新来的...";

添加元素
parent.appendChild(child)：通过父元素调用方法添加子元素

var child = document.createElement("div");
chil.innerHTML = "我是新来的...";
var parent = document.getElementsByTagName("body")[0];
parent.appendChild(child);

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

var child = document.getElementById("div3");
var parent = document.getElementsByTagName("body")[0];
parent.removeChild(child);

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

var parent = document.body;
var news = document.createElement("div");
news.innerHTML = "替换的";
var child = document.getElementById("div2");
parent.replaceChild(news, child);

克隆元素
obj.cloneNode()：克隆出来的元素只能使用一次

var child = document.getElementById("div4");
var new = child.cloneNode();

插入元素
parent.insertBefore(new, child)

T–hrone

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DHTML

DHTML概述什么是DHTMLDHTMK：Dynamic HTML 动态的 htmlDHTML不是一门新的技术，而是将已有的HTML、css、JS整合在了一起，实现了通过JS访问元素和css属性在DHTML中，是通过JS访问html元素或者css属性，使得页面具有动态的变化，从而和用户具有了交互的行为实例：通过点击按钮改变属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g
复制链接

扫一扫