（2020-11-17）javascript DOM对象

最新推荐文章于 2023-05-12 13:44:41 发布

�橙黄橘绿时。

最新推荐文章于 2023-05-12 13:44:41 发布

阅读量245

点赞数

分类专栏：基础文章标签： js

本文链接：https://blog.csdn.net/Missjuzi/article/details/109746440

版权

基础专栏收录该内容

29 篇文章 0 订阅

订阅专栏

知识梳理：

Dom概念：

是w3c组织推荐可扩展标记语言编程接口。

文档：就是单个网页文件。

节点：就是网页中所有的内容（标签，内容，注释，属性）

元素：标签

属性：标签行内属性，样式属性

Dom操作：

Dom操作中最为常见的无非增删改查四种类型；

查：

Id	document.getElementById(“Id取值”)
标签	document.getElementsByTagName(“标签名”),返回值是个对象
Name	document.getElementsByName(“name取值”)
Class	document.getElementsByClassName(“class取值”)
选择器	document.querySelector(“选择名称”),找到符合选择器名称的第一个元素 document.querySelectorAll(“选择名称”),找到符合选择器所有元素,返回值是个对象

操作属性：

非表单属性

href，src，id，title，name，className

表单属性

value，type，checked disabled selected

自定义属性操作

setAttribute(“属性名”,”属性值”); 添加属性

removeAttribute(“属性名”); 移除属性

getAttribute(“属性名”); 获取属性

样式操作：元素对象.style.样式属性

类名操作：元素对象.className = ‘类名’

tisp：

元素（标签），节点

创建元素三种方法：

document.write(“html”);
元素对象.innerHTML = “html”
document.createElement(“标签名”); --------创建元素对象,返回值为对象

元素对象.appendChild(子元素对象)；-------添加元素方法

给body添加:document.body.appendChild(子元素对象);

注意：（建议使用第三种方法，性能最好）

元素对象.insertBefore(要插入的元素，已有元素)；-------在某元素之前插入元素

元素对象.removeChild(元素对象)；----------移除元素

元素对象.replaceChild(新元素对象，已有元素)；------------替换元素

节点层级操作：

当前元素.parentNode	当前节点的父节点
当前元素.childNodes	当前节点的子节点
当前元素.children	当前节点的子元素
当前元素.nextSibling	当前节点的后一个兄弟节点
当前元素.nextElementSibling	当前节点的后一元素
当前元素.previousSibling	当前节点的前一个兄弟节点
当前元素.previousElementSibling	当前节点的前一元素
当前元素.firstChild	当前节点的第一个孩子节点
当前元素.lastChild	当前节点的最后一个孩子节点

事件：

三要素：事件源；事件类型；事件处理程序。

事件的使用：

（1）在标签行内通过属性使用事件。

（2）通过js注册事件：

A.事件源.事件类型 = function（）{}

B.事件源.addEventListener(“事件类型”，处理程序，布尔值)；

事件类型:字符串,不加on

处理程序: 匿名函数或调用函数

布尔值:true（捕获事件）|| false（冒泡事件）

C.事件源.attachEvent();-------------IE浏览器

（3）移除事件

事件源.事件类型 = null;

事件源.removeEventListener(“事件类型”);

事件源.detachEvent(“事件类型”);

//有兼容性的注册事件函数
function addEvent(element,eventType,funName,broad){
	if(element.addEventListener){
		element.addEventListener(eventType,funName,broad);
	}else if(element.attachEvent){
	    element.attachEvent("on"+eventType,funName);
	}else{
	    element["on"+eventType] = funName;
	}
}
//有兼容性的移除事件函数
			function removeEvent(element,eventType,funName,broad){
				if(element.removeEventListener){
					element.removeEventListener(eventType,funName,broad);
				}else if(element.detachEvent){
					element.detachEvent("on"+eventType,funName);
				}else{
					element["on"+eventType] = null;
				}
			}

事件三个阶段：

捕获----当前-----冒泡

使用event.eventPhase属性返回事件的当前阶段

1为捕获，2为当前，3为冒泡

阻止冒泡:event.stopPropagation(); // 那一层需要阻止冒泡，写到那一层，也就是要写到当前阶段。（但不能阻止捕获）

Event常见属性：

Event.type	获取事件类型
Event.clientX/clientY	获取当前事件源在浏览器窗口中的位置
Event.pageX/pageY	获取当前事件源在页面中的位置
Event.screenX/screenY	获取当前事件源在屏幕中的位置
Event.target \|\| event.srcElement	当前事件源
Event.preventDefaulte()	取消默认行为,例如:提交按钮,超链接

事件委托:把子元素要注册的事件,委托给父元素注册,通过冒泡或捕获的方式,在子元素当前阶段,触发,获取当前阶段事件源的方式event.target || event.srcElement

常用事件:

onclick

onmouseover

onmousemove

Onmousedown （注意：控制按下为鼠标那个部位event.button = 0(左键) |1(滚轮) | 2(右键)）

onmouseup

onmouseout

ondblclick

右键单击:1 取消document的右键菜单默认行为
         addEvent(document,"contextmenu",function(){
				event.preventDefault();
},false)
        2 注册元素的mousedown事件
			addEvent(myText,"mousedown",function(){
				if(event.button == 2){
					menu.style.display = "block";
				}
			},false);

键盘事件:

onkeydown

Onkeyup

Onkeypress （按下并松开）

tisp：event.keyCode 可以获得按键ASCII码

例如：

0 48

a 97

A 65

Cr(回车) 13

其它事件:

Onchange 内容改变

Onblur 失去焦点

Onfocus 获得焦点

偏移量: 获取在已定位的父级元素的子元素位置属性。

offsetLeft	取正值从左向右偏移,取负值从右向左偏移
offsetTop	取正值从上向下偏移,取负值从下向上偏移
offsetWidth	获取元素的宽度
offsetHeight	获取元素的高度
offsetParent	获取定位过的父元素,即有可能不是离的最近的父级元素

客户区大小:

clientLeft	离已定位的父级元素的左边距,包括自身左边框宽度
clientTop	离已定位的父级元素的上边距,包括自身上边框宽度
clientWidth	已定位的父级元素的子元素内边距和内容的宽度之和
clientHeight	已定位的父级元素的子元素内边距和内容的高度之和

流动偏移量:

scrollHeight	隐藏部分和可见部分之和
scrollWidth	隐藏部分和可见部分之和
scrollLeft	隐部分与可见部分左边的距离
scrollTop	隐部分与可见部分上边的距离