JS DOM 对象

一、DOM 分类

　　DOM 分为 window 对象  和 document 对象

二、函数调用

　　1　自己封装的函数 调用只写函数名（）；数学函数 math 或 绝对值 调用 写 Math.abs()

　　2　函数和属性的调用（不一样）例如:

　　　　　函数调用直接写函数名   window.函数名() ;  属性调用直接写属性名字就可以  windows.属性名() ;

三、什么是事件

　　事件就事先设置好的程序，被触发

 

Window对象

　　　打开新窗口

　　　window.open(“一”,“二”,“三”,“四”)

　　　　　　　　第一部分：页面地址

　　　　　　　　第二部分：打开方式_blank在新窗口，_self在自身打开

　　　　　　　　第三部分：控制窗口，用空格隔开

　　　　　　　　

　　　　　　toolbar=no新打开的窗口无工具条 　　menubar=no无菜单栏 status=no无状态栏 　　width=100 height=100 宽度高度　　　　

　　　　　　left=100 打开的窗口距离左边多少距离　　resizable=no窗口大小不可调 　　scrollbars=yes 出现滚动条

　　　　　　location=yes 有地址栏

　　

　　　　关闭指定窗口

　　　　　　window.close();关闭当前窗口　　　　a.close();关闭a窗口　　　　array[i].close();关闭多个窗口，创建数组存储多个窗口

　　　　　　window.opnner.close();关闭打开窗口的源窗口

 　　　　

　　　　间隔和延时　

　　　　　　window.setInterval("要执行的代码"，间隔的毫秒数) 

　　　　　　window.clearInterval(间隔的id); 循环一次之后用来清除隔几秒执行的代码

　　　　　　window.setTimeout("要执行的代码"，延迟的毫秒数)

　　　　　　window.clearTimeout(延迟的id)；清除setTimeout，一般延迟执行较为常用

1 <script>
2         function Show(){
3                 window.open("1.html","_blank");
4         }
5         window.setInterval("Show()",3000);  //每间隔3秒打开新窗口
6     </script>

　　　　　　

　　　　页面操作　　　　　　

　　　　　　window.navigate("url") ；跳转页面；　　window.moveTo(x,y)； 移动页面　　window.resizeTo(宽，高)； 调整页面

　　　　　　window.scrollTo(x,y)；滚动页面至哪里。该方法可行，其他方法因浏览器原因，有不同表现

　　　　

　　　　显示屏幕信息

　　　　　　Screen 对象包含有关客户端显示屏幕的信息

　　　　　　对象属性：　　height属性返回屏幕高度　　　　width属性返回屏幕宽度

 

　　　　　　windows.history 对象

　　　　　　属性：length返回浏览器历史列表中的元素数量

　　　　　　用法：

　　　　　　　　　.back();加载 history 列表中的前一个 URL，返回

　　　　　　　　　.forward();加载 history 列表中的下一个 URL，前进

　　　　　　　　　.go(n); 加载 history 列表中的某个具体页面。n是正数代表前进n个页面，n是负数代表后退n个页面

　　　　　　

　　　　　　window.location对象

　　　　　　　　location 对象包含有关当前 URL 的信息

　　　　　　　　host 属性是一个可读可写的字符串，可设置或返回当前 URL 的主机名称和端口号

　　　　　　　　pathname 属性设置或返回当前 URL 的路径部分

　　　　　　　　port 属性设置或返回当前 URL 的端口部分

　　　　　　　　protocol 属性设置或返回当前 URL 的协议

　　　　　　　　search 属性设置或返回当前 URL 的查询部分（问号 ? 之后的部分）

　　　　　　　　hostname 属性设置或返回当前 URL 的主机名

　　　　　　　　href 属性设置或返回当前显示的文档的完整 URL

　　　　　　　　　　var s = window.location.href;获取当前 页面的地址

　　　　　　　　　　window.location.href="http://www.baidu.com";修改页面地址，会跳转页面 

 

document对象

　　找元素的方法

　　  1.通过id名找
 　　　　 　　document.getElementById("ID");
  　　　　　　

 　　 2.通过class名找
  　　　　　　document.getElementsByClassName("CLASS");
 　　　　 

 　　 3.标签名找
　　　　  document.getElementsByTagName("标签名");
　　　　  

 　　 4.表单元素
  　　　　document.getElementsByName("表单元素名");
 　　　　 
  
  　　　　
  　　操作内容
 　　 　　1.获取内容
 　　　　　　 var d1 = document.getElementById("d1")

　　　　　2.修改内容

　　　　  　　d1.innerText = "添加内容文字";

  　　　　　　d1.innerHTML = "<u>修改标签加内容</u>";

 

 　　 操作属性
  　　　　1.获取属性
　　　　　　  var d3 = document.getElementById("d3")

 　　　　 2.添加属性
 　　　　　　 d3.setAttribute("属性名","属性值");

  　　　　3.移除属性
  　　　　　　d3.removeAttribute("属性名");

 

  　　操作样式　　　

　　　　1.获取样式

 　　　　　　 var d1 = document.getElementById("d1");

 　　　　2.修改样式
 　　　　　　 d1.style.backgroundcolor = "red";

 

 

事件

　　鼠标事件

　　　　onclick 鼠标点击　　ondbonlclick 鼠标双击　　onmousedown 事件会在鼠标按键被按下时发生

　　　　onmouseup 事件会在鼠标按键被松开时发生　　onmouseover 事件会在鼠标指针移上时发生

　　　　onmousemove 事件会在鼠标指针移动时发生　　onmouseout 事件会在鼠标指针移出指定的对象时发生

　　窗口图片

　　　　onresize 事件会在窗口或框架被调整大小时发生　　onunload 事件在用户退出页面时发生　　

　　　　onload 事件会在页面或图像加载完成后立即发生　　onerror 事件会在文档或图像加载过程中发生错误时被触发

　　　　onabort 事件会在图像加载被中断时发生

　　表单元素

　　　　onselect 事件会在文本框中的文本被选中时发生　　onblur 事件会在对象失去焦点时发生

　　　　onchange 事件会在域的内容改变时发生　　　　　　onfocus 事件在对象获得焦点时发生

　　　　onsubmit 事件会在表单中的确认按钮被点击时发生　　onreset 事件会在表单中的重置按钮被点击时发生　　

　　键盘事件

　　　　onkeydown 事件会在用户按下一个键盘按键时发生　　onkeyup 事件会在键盘按键被松开时发生

　　　　onkeypress 事件会在键盘按键被按下并释放一个键时发生　　event.keyCode;属性返回

 

　　　　onkeypress事件触发的键的值的字符代码，或者onkeydown 或 onkeyup事件的键的代码

　　　　event. which 属性返回onkeypress事件触发的键的值的字符代码，或者onkeydown 或 onkeyup事件的键的代码

 

　　

  详细的键值表：

 

常数名称	十六进制值	十进制值	对应按键
VK_LBUTTON	01	1	鼠标的左键
VK_RBUTTON	02	2	鼠标的右键
VK-CANCEL	03	3	Ctrl+Break(通常不需要处理)
VK_MBUTTON	04	4	鼠标的中键（三按键鼠标)
VK_BACK	08	8	Backspace键
VK_TAB	09	9	Tab键
VK_CLEAR	0C	12	Clear键（Num Lock关闭时的数字键盘5）
VK_RETURN	0D	13	Enter键
VK_SHIFT	10	16	Shift键
VK_CONTROL	11	17	Ctrl键
VK_MENU	12	18	Alt键
VK_PAUSE	13	19	Pause键
VK_CAPITAL	14	20	Caps Lock键
VK_ESCAPE	1B	27	Ese键
VK_SPACE	20	32	Spacebar键
VK_PRIOR	21	33	Page Up键
VK_NEXT	22	34	Page Domw键
VK_END	23	35	End键
VK_HOME	24	36	Home键
VK_LEFT	25	37	LEFT ARROW 键(←)
VK_UP	26	38	UP ARROW键(↑)
VK_RIGHT	27	39	RIGHT ARROW键(→)
VK_DOWN	28	40	DOWN ARROW键(↓)
VK_Select	29	41	Select键
VK_PRINT	2A	42
VK_EXECUTE	2B	43	EXECUTE键
VK_SNAPSHOT	2C	44	Print Screen键（抓屏）
VK_Insert	2D	45	Ins键(Num Lock关闭时的数字键盘0)
VK_Delete	2E	46	Del键(Num Lock关闭时的数字键盘.)
VK_HELP	2F	47	Help键
VK_0	30	48	0键
VK_1	31	49	1键
VK_2	32	50	2键
VK_3	33	51	3键
VK_4	34	52	4键
VK_5	35	53	5键
VK_6	36	54	6键
VK_7	37	55	7键
VK_8	38	56	8键
VK_9	39	57	9键
VK_A	41	65	A键
VK_B	42	66	B键
VK_C	43	67	C键
VK_D	44	68	D键
VK_E	45	69	E键
VK_F	46	70	F键
VK_G	47	71	G键
VK_H	48	72	H键
VK_I	49	73	I键
VK_J	4A	74	J键
VK_K	4B	75	K键
VK_L	4C	76	L键
VK_M	4D	77	M键
VK_N	4E	78	N键
VK_O	4F	79	O键
VK_P	50	80	P键
VK_Q	51	81	Q键
VK_R	52	82	R键
VK_S	53	83	S键
VK_T	54	84	T键
VK_U	55	85	U键
VK_V	56	86	V键
VK_W	57	87	W键
VK_X	58	88	X键
VK_Y	59	89	Y键
VK_Z	5A	90	Z键
VK_NUMPAD0	60	96	数字键0键
VK_NUMPAD1	61	97	数字键1键
VK_NUMPAD2	62	98	数字键2键
VK_NUMPAD3	62	99	数字键3键
VK_NUMPAD4	64	100	数字键4键
VK_NUMPAD5	65	101	数字键5键
VK_NUMPAD6	66	102	数字键6键
VK_NUMPAD7	67	103	数字键7键
VK_NUMPAD8	68	104	数字键8键
VK_NUMPAD9	69	105	数字键9键
VK_MULTIPLY	6A	106	数字键盘上的*键
VK_ADD	6B	107	数字键盘上的+键
VK_SEPARATOR	6C	108	Separator键
VK_SUBTRACT	6D	109	数字键盘上的-键
VK_DECIMAL	6E	110	数字键盘上的.键
VK_DIVIDE	6F	111	数字键盘上的/键
VK_F1	70	112	F1键
VK_F2	71	113	F2键
VK_F3	72	114	F3键
VK_F4	73	115	F4键
VK_F5	74	116	F5键
VK_F6	75	117	F6键
VK_F7	76	118	F7键
VK_F8	77	119	F8键
VK_F9	78	120	F9键
VK_F10	79	121	F10键
VK_F11	7A	122	F11键
VK_F12	7B	123	F12键
VK_NUMLOCK	90	144	Num Lock 键
VK_SCROLL	91	145	Scroll Lock键
上面没有提到的：（都在大键盘）
VK_LWIN		91	左win键
VK_RWIN		92	右win键
VK_APPS		93	右Ctrl左边键，点击相当于点击鼠标右键，会弹出快捷菜单
		186	;(分号)
		187	=键
		188	,键(逗号)
		189	-键(减号)
		190	.键(句号)
		191	/键
		192	`键(Esc下面)
		219	[键
		220	键
		221	]键
		222	‘键(引号)

 

 

 

 

       

转载于:https://www.cnblogs.com/wangxiao233/p/8341079.html