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