JavaScript DOM

最新推荐文章于 2024-08-13 20:52:14 发布

尝胆

最新推荐文章于 2024-08-13 20:52:14 发布

阅读量1.6k

点赞数 3

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

本文链接：https://blog.csdn.net/qq_38809741/article/details/88257232

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

• DOM，全称Document Object Model文档对象模型。

• JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。

• 文档

– 文档表示的就是整个的HTML网页文档

• 对象

– 对象表示将网页中的每一个部分都转换为了一个对象。

• 模型

– 使用模型来表示对象之间的关系，这样方便我们获取对象

• 节点：Node——构成HTML文档最基本的单元

• 常用节点分为四类

– 文档节点（document）：整个HTML文档 document对象作为window对象的属性存在的，我们不用获取可以直接使用。

– 元素节点（Element）：HTML文档中的HTML标签

– 属性节点（Attr)：元素的属性 表示的是标签中的一个一个的属性，这里要注意的是属性节点并非是元素节点的子节点，

而是元素节点的一部分。

– 文本节点（Text）：HTML标签中的文本内容

DOM常用属性：

DOM动态创建节点：

1. 创建一个元素节点:
   1). createElement("标签名"): 按照给定的标签名创建一个新的元素节点. 方法只有一个参数：被创建的元素节点的名字, 是一个字符串.
   方法的返回值：是一个指向新建节点的引用指针. 返回值是一个元素节点, 所以它的 nodeType 属性值等于 1.
   新元素节点不会自动添加到文档里, 它只是一个存在于 JavaScript 上下文的对象.

2. 创建一个文本节点:
   1). createTextNode("文本值"): 创建一个包含着给定文本的新文本节点. 这个方法的返回值是一个指向新建文本节点引用指针.
   它是一个文本节点, 所以它的 nodeType 属性等于 3.
   方法只有一个参数：新建文本节点所包含的文本字符串. 新元素节点不会自动添加到文档里

3. 为元素节点添加子节点:
   1). appendChild(): var reference = element.appendChild(newChild):
   给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点.
   方法的返回值是一个指向新增子节点的引用指针.

4. 插入节点:
   1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面
           var reference = element.insertBefore(newNode,targetNode);
节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面. 节点 targetNode 必须是
element 元素的一个子节点。

5 删除节点:
   从一个给定元素里删除一个子节点
格式：var reference = element.removeChild(node);
返回值：返回值是一个指向已被删除的子节点的引用指针。
注意：某个节点被 removeChild() 方法删除时，这个节点所包含的所有子节点将同时被删除。

常用事件：

       

事件

说明

鼠标键盘事件

onclick

鼠标单击事件

ondbclick

鼠标双击事件

onmousedown

鼠标按下事件

onmouseup

鼠标松开事件

onmousemove

鼠标移动事件

onmouseover

鼠标移动到对象上事件

onmouseout

鼠标离开某对象事件

onkeypress

按下并松开键盘按键事件

onkeydown

按下键盘按键事件

onkeyup

松开键盘按键事件

事件

说明

页面窗口事件

onabort

图片在下载时被用户中断

onbeforeunload

当前页面的内容将要被改变时触发此事件

onerror

出现错误时触发此事件

onload

页面内容完成时触发此事件

onmove

浏览器的窗口被移动时触发此事件

onresize

当浏览器的窗口大小被改变时触发此事件

onscroll

浏览器的滚动条位置发生变化时触发此事件

onstop

浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断

onunload

当前页面将被改变时触发此事件

事件

说明

表单事件

Onblur

当前元素失去焦点时触发此事件

onchange

当前元素失去焦点并且元素的内容发生改变而触发此事件

onfocus

当某个元素获得焦点时触发此事件

onreset

当表单中RESET的属性被激发时触发此事件

onsubmit

一个表单被递交时触发此事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>常用事件</title>
		<!--
        HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
        我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。
        如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：
         onclick事件：对象被点击时发生
         window.onload事件：dom文档树加载完和所有文件加载完之后执行
         onchange：会在元素值改变时触发
         onmouseover 事件会在鼠标指针移动到指定的元素上时发生。
         onmouseout 属性在鼠标指针移动到元素外时触发。
        HTML 事件的例子：
	        当用户点击鼠标时
	        当网页已加载时
	        当图像已加载时
	        当鼠标移动到元素上时
	        当输入字段被改变时
	        当提交 HTML 表单时
	        当用户触发按键时
         -->
  
		<style>
			#d1{
				width: 200px;
				height: 200px;
				background-color: red;
			}
			
		</style>
		<script>
		/*
		 * onmouseover:鼠标移入事件
		 * onmouseout：鼠标移出事件
		 * */
		function mover(){
			document.getElementById("d1").innerHTML="我移上来了";
		}
		function mout(){
			document.getElementById("d1").innerHTML="我移出来了";
		}
		
		//onblur:失去焦点时触发
		//onfocus：获取焦点
		function bl(){
			//获取输入的值
			var userName=document.getElementById("userName").value;
			if(userName==""){
				document.getElementById("span1").innerHTML="请输入用户名";
			}
		}
		
		function ofc(){
			document.getElementById("span1").innerHTML="";
		}
		
		//onchange事件：当文档值发生改变时进行触发
		function checkName(){
			var txtName=document.getElementById("txtName").value;
			if(txtName.length<6){
				alert("用户名至少是六位");
			}
		}
		</script>
	</head>
	<body>
		<div id="d1" onmouseover="mover()" onmouseout="mout()"></div>
		
		<br />
		请输入用户名:<input type="text" id="userName" onblur="bl()" onfocus="ofc()" />
	    <span id="span1"></span>
	    <br/>
	    <p>使用onchange验证用户名至少为6位</p>
        <input type="text" name="name" id="txtName" value="" onchange="checkName()"/>
        <br />
	</body>
</html>

尝胆

关注

3
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

	事件	说明
鼠标键盘事件	onclick	鼠标单击事件
	ondbclick	鼠标双击事件
	onmousedown	鼠标按下事件
	onmouseup	鼠标松开事件
	onmousemove	鼠标移动事件
	onmouseover	鼠标移动到对象上事件
	onmouseout	鼠标离开某对象事件
	onkeypress	按下并松开键盘按键事件
	onkeydown	按下键盘按键事件
	onkeyup	松开键盘按键事件

	事件	说明
页面窗口事件	onabort	图片在下载时被用户中断
	onbeforeunload	当前页面的内容将要被改变时触发此事件
	onerror	出现错误时触发此事件
	onload	页面内容完成时触发此事件
	onmove	浏览器的窗口被移动时触发此事件
	onresize	当浏览器的窗口大小被改变时触发此事件
	onscroll	浏览器的滚动条位置发生变化时触发此事件
	onstop	浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断
	onunload	当前页面将被改变时触发此事件

	事件	说明
表单事件	Onblur	当前元素失去焦点时触发此事件
	onchange	当前元素失去焦点并且元素的内容发生改变而触发此事件
	onfocus	当某个元素获得焦点时触发此事件
	onreset	当表单中RESET的属性被激发时触发此事件
	onsubmit	一个表单被递交时触发此事件