JS事件和DOM节点

最新推荐文章于 2024-06-25 17:54:49 发布

zzu_wlan

最新推荐文章于 2024-06-25 17:54:49 发布

阅读量165

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/zzu_wlan/article/details/81412137

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

onclick事件是最常见的事件，当控件被点击的时候触发。

JS简单的的事件操作可以分为四种：

1。鼠标事件操作：

onmouseover 鼠标移入：当鼠标移入控件时触发。

onmouseout 鼠标移出：当鼠标移除控件时触发。

onmousemove 鼠标移动事件：当鼠标在空间上移动的时候触发。

onmousedown 鼠标按下触发

onmouseup 鼠标抬起触发

2。键盘事件操作。

键盘事件能够触发的按键包括：字母，数字、回车、空格；

onkeypress() ：键盘按键被按下时触发，仅触发字母数字，Fn

onkeyup() :键盘抬起触发

onkeydown() :键盘按下触发

（使用input时placeholder属性在输入组件中可以起到提示作用，不作输入组件的value值）

3，浏览器事件操作。

onload():加载页面后触发

onunload():关闭页面触发

4.焦点事件操作

onblur():失去焦点触发

onfocus():获得焦点触发

onchange():内容改变触发

DOM节点

文档中的每个成分都是一个节点。可分为四个类型：

文档节点，文本节点，属性节点，元素节点，注释节点对应的属性值

元素element	1
属性attr	2
文本text	3
注释comments	8
文档document	9

DOM与树类似。都有根节点，父节点，子节点，叶子结点等概念

其常使用的方法为

childNodes	返回节点的子节点的节点列表。
firstChild	返回节点的首个子节点。
lastChild	返回节点的最后一个子节点。
nextSibling	返回节点之后紧跟的同级节点。
nodeName	返回节点的名称，根据其类型。
nodeType	返回节点的类型。
nodeValue	设置或返回节点的值，根据其类型。
parentNode	返回节点的父节点。
previousSibling	返回节点之前紧跟的同级节点。
textContent	设置或返回节点及其后代的文本内容。
appendChild()	向节点的子节点列表的结尾添加新的子节点。
cloneNode()	复制节点。
insertBefore()	在指定的子节点前插入新的子节点。
removeChild()	删除（并返回）当前节点的指定子节点。
replaceChild()	用新节点替换一个子节点。

创建节点：document.createElement()

删除节点：parent.removeChild()

使用innerHTML 设置或返回单元格的开始标签和结束标签之间的 HTML。

给出一个使用DOM的简单例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
        <div id="fristdiv">
        	<span id="">
        		
        	</span>
        	<span id="">
        		
        	</span>
        </div>
        <div id="">
        	
        </div>
        <!--
        	作者：1277607260@qq.com
        	时间：2018-08-04
        	描述：this表示当前组建
        -->
        
	</body>
	<script type="text/javascript">
		var treeNode =  document.getElementById("fristdiv");
		alert(treeNode.childNodes.length);
		for (var i = 0;i<treeNode.childNodes.length;i++) {
			alert("shuxing"+treeNode.childNodes[i].nodeName+"::"+treeNode.childNodes[i].nodeType);
			
		}
		
		
	</script>
</html>

上述alert(treeNode.childNodes.length);显示的是5

因为div中的空格算作一个文本节点。

zzu_wlan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS事件和DOM节点

onclick事件是最常见的事件，当控件被点击的时候触发。JS简单的的事件操作可以分为四种：1。鼠标事件操作：onmouseover 鼠标移入：当鼠标移入控件时触发。onmouseout 鼠标移出：当鼠标移除控件时触发。onmousemove 鼠标移动事件：当鼠标在空间上移动的时候触发。onmousedown 鼠标按下触发onmouseup 鼠标抬...
复制链接

扫一扫

专栏目录