DHTML笔记

最新推荐文章于 2018-09-03 22:37:00 发布

少说废话多干活

最新推荐文章于 2018-09-03 22:37:00 发布

阅读量199

点赞数 1

分类专栏：前端文章标签： dhtml

本文链接：https://blog.csdn.net/qq_24271537/article/details/81158919

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、定义和原理

1.定义：DHTML,动态的html ；将html,css,js整合起来的；利用JS操作页面元素；

2.原理：将所有的html元素都使用一个个JS对象来进行表示；

使用对象之间的包含关系来表示元素之间的层级关系，使用一个文档结构来表示整个html文档。

3.DHTML可以分为两部分内容：

1）BOM : browser object model 浏览器对象模型

2) DOM ： document object model 文档对象模型

二、BOM 浏览器对象模型

1.window对象

1）属性：

closed属性：表示当前窗口是否关闭 true表示已经关闭

2）事件：

onload事件：在浏览器将整个html页面加载完成之后立即触发执行

		window.onload = function(){
            .......
		}

3）方法

alert() 消息对话框

confirm() 确定对话框


	function demo5(){
		var b = confirm("是否要熬夜");
		if(b){
			alert("是");
		}else{
			alert("否");
		}
	}

三、DOM 文档对象模型

1.获取HTML元素/标签

相关方法：

document.getElementById() ;

document.getElementByName();

document.getElementsByName(); //获取所有指定的name的元素，返回的是一个集合数组

document.getElementsByTagName("input");
op.innerHTML="<span style='color:blue'>niubi</span>"; //重新设置P标签的html内容（从<p>开始到</p>结束中间的所有内容）

op.innerText


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>如何通过document获取数据</title>
<style>
	input{ margin: 5px 5px;}	
</style>
<script>
	function demo1(){
		var oInp = document.getElementById("username");//还有document.getElementByName();
		alert(oInp.value);
		oInp.value = "niubi";
	}
	function demo2(){
		var aInp = document.getElementsByTagName("input");//通过标签名获取并返回所有Input的元素的value
		for(var i=0;i<aInp.length;i++){
			alert(aInp[i].value);
		}
	}
	function demo4(){
		var op = document.getElementById("pid");
		alert(op.innerHTML);
		//重新设置P标签的html内容（从<p>开始到</p>结束中间的所有内容）
		op.innerHTML="<span style='color:blue'>niubi</span>";
		alert(op.innerText);
	}
</script>
</head>
<body>
	用户名：<input type="text" name="username" id="username" value=""/><br/>
	密码：<input type="password" name="password" id="password" /><br/>
	<input type="button" value="通过id获取并弹出用户名输入框的值" id="b1" onclick="demo1()"/><br/>
	<input type="button" value="通过元素名称获取标签并返回所有输入框的value值" id="b2" onclick="demo2()"/><br/>

	<p id="pid">
		<font color="red">获取P标签中的文字</font>
	<p/>
	<input type="button" value="获取p中的文字" onclick="demo4()"/>
</body>
</html>

2.增加、删除、修改html元素

document.createElement("div")

oBody.appendChild(oDiv)

oBody.removeChild(oDiv_3)

oBody.replaceChild(oNewDiv, oDiv_2);//参数1 新元素, 参数2 被替换的元素

var oCloneDiv = oDiv_4.cloneNode(true);

document.body.insertBefore(oCloneDiv, oDiv_2);

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>节点的增删改查</title>
<!--加入样式表-->
<style type="text/css">
	div { border:#0099FF 1px solid; height:60px; width:120px; margin:20px 0px 20px 20px; padding:10px 0px 0px 20px; }
	#div_1{ background-color:#00FFFF; }
		
	#div_2{ background-color:#FF3399; }
		
	#div_3{ background-color:#0000FF; }
		
	#div_4{ background-color:#FFFF66; }
</style>
<script type="text/javascript">
	var i = 1;
	//添加节点：添加一个div元素到Body的最后面
	function addNode(){
		var oDiv = document.createElement("div");
		oDiv.innerText = "1111";
		//获取父元素body
		var oBody = document.body;
		//将div元素挂载到body上去
		oBody.appendChild(oDiv);
	}
	//删除节点:删除body中id值伪div_3的div元素
	function deleteNode(){
		var oDiv_3 = document.getElementById("div_3");
		//获取oDiv_3的父元素
		var oBody = oDiv_3.parentNode;
		//解除父子关系
		oBody.removeChild(oDiv_3);
 	}
	//更新节点：用新节点替换id="div_2"的div元素
	function updateNode(){
		//创建一个新元素
		var oNewDiv = document.createElement("div");
		oNewDiv.innerText = "我来是被替换的";
		//获取要被替换的元素
		var oDiv_2 = document.getElementById("div_2");
		//获取父元素body
		var oBody = oDiv_2.parentNode;
		//执行替换
		oBody.replaceChild(oNewDiv,oDiv_2);//参数1：新元素 ，参数2：被替换的元素
	}
	//克隆节点、插入节点到指定元素的前面
	function copyNode(){
		//获取被克隆的元素
		var oDiv_4 = document.getElementById("div_4");
		//克隆元素
		var oCloneDiv = oDiv_4.cloneNode(true);//true 克隆元素内部的所有内容
		//将被克隆的元素插入到第二个元素的前面
		var oDiv_2 = document.getElementById("div_2");
		document.body.insertBefore(oCloneDiv,oDiv_2);
	}
</script>

</head>
<body>
    <div id="div_1">
		
    </div>
    
    <div id="div_2">
    div区域2
    </div>
    
    <div id="div_3">
   	 div区域3
    </div>
    
    <div id="div_4">
    div区域4
    </div>
    
    <hr />
    <input type="button" value="创建并添加节点" onclick="addNode()" />
    <input type="button" value="删除节点" onclick="deleteNode()" />
    <input type="button" value="替换节点" onclick="updateNode()" />
    <input type="button" value="克隆节点" onclick="copyNode()" />
</body>
</html>

少说废话多干活

关注

1
点赞
踩
0

收藏

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

一、定义和原理1.定义：DHTML,动态的html ；将html,css,js整合起来的；利用JS操作页面元素；2.原理：将所有的html元素都使用一个个JS对象来进行表示；使用对象之间的包含关系来表示元素之间的层级关系，使用一个文档结构来表示整个html文档。3.DHTML可以分为两部分内容：1）BOM : browser object model 浏览器对象模型...
复制链接

扫一扫

专栏目录