(2020-11-17)javascript DOM对象

知识梳理:

Dom概念:

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

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

节点:就是网页中所有的内容(标签,内容,注释,属性)

元素:标签

属性:标签行内属性,样式属性

Dom操作:

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

查:

Id

document.getElementById(“Id取值”)

标签

document.getElementsByTagName(“标签名”),返回值是个对象

Name

document.getElementsByName(“name取值”)

Classdocument.getElementsByClassName(“class取值”)
选择器

document.querySelector(“选择名称”),找到符合选择器名称的第一个元素

document.querySelectorAll(“选择名称”),找到符合选择器所有元素,返回值是个对象

操作属性:

非表单属性

href,src,id,title,name,className

表单属性

value,type,checked disabled selected

自定义属性操作

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

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

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

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

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

tisp:

元素(标签),节点

创建元素三种方法:

  1. document.write(“html”);
  2. 元素对象.innerHTML = “html”
  3. 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

隐部分与可见部分上边的距离

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页