JS DOM 对象

Posted wangxiao233

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS DOM 对象相关的知识,希望对你有一定的参考价值。

一、DOM 分类

  DOM 分为 window 对象  和 document 对象

二、函数调用

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

  2 函数和属性的调用(不一样)例如:

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

三、什么是事件

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

 

document对象

   1.找元素的方法
      1.通过id名找
      var d1 = document.getElementById("d1");
      alert(d1);


    2.通过class名找
      var d2 = document.getElementsByClassName("d2");
      alert(d2[1]);


    3.标签名找
      var d3 = document.getElementsByTagName("div");
      alert(d3[0]);


    4.表单元素
      var d4 = document.getElementsByName("d4");
      alert(d4[0]);
  
  操作  
  操作内容
    1.获取内容
      var d1 = document.getElementById("d1");
      alert(d1.innerText);


    2.修改内容
      d1.innerText = "<u>这是修改html代码</u>";
      alert(d1.innerHTML);
      d1.innerHTML = "<u>这是修改html代码</u>";

 

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


    2.添加属性
      d3.setAttribute("sd","1");


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

  操作样式
      var d1 = document.getElementById("d1");
  1.获取样式
      alert(d1.style.color);
  2.修改样式
      d1.style.color = "red";

 

 Window对象

 1 <body>
 2         
 3         <div style="width:200px; height:300px; background-color:#36F;" ondblclick="Show(this)">
 4             DOM
 5             window对象
 6             document对象
 7             函数调用:自己封装的函数调用只写函数名();数学函数Math   绝对值  怎么调用:Math.abs()
 8             函数和属性的调用:
 9             window.hanshuming();  函数
10             window.opener;   属性
11         </div>
12         <input type="checkbox"/>
13         <input type="button" value="按钮"/> 
14         <select onchange="Show(this)">
15             <option>111</option>
16             <option>222</option>
17             <option>333</option>
18         </select>
19         load(sender,e)  sender:触发源(谁触发的事件) e:事件内容
20         {
21             
22         }
23         <br />
24         <input type="button" value="打开窗口" onclick="Dakai()"/>
25         <input type="button" value="关闭窗口" onclick="Guan()" />
26         <input type="button" value="清除间隔" onclick="Qing()"/>
27         <input type="button" value="前进" onclick="Qian()" />
28         <input type="button"  value="打开" onclick="D()"/>
29     </body>
30     <script type="text/javascript">    
31         function Qian()
32         {
33             window.history.forward();
34         }                                      
35         function Show(i)
36         {
37             alert(i+"这是一个事件");        
38         }
39         //Show(1,2);
40         var d;
41         function Dakai()
42         {
43             if(d==null)
44             {
45                 d = window.open("1.html","_self","width=300 height=200");        
46             }
47             
48         }
49         
50         function Guan()
51         {
52             d.close();    
53         }
54         //alert("sss");
55         var q = window.setInterval("Jan()",2000);
56         function Jan()
57         {
58             alert("这是间隔");    
59         }
60         
61         function Qing()
62         {
63             window.clearInterval(q);    
64         }
65         
66         function D()
67         {
68             window.location.href = "http://www.baidu.com";    
69         }
70     </script>

 

 

 

       



































以上是关于JS DOM 对象的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段——JS中的面向对象编程

JS常用代码片段2-值得收藏

JS常用代码片段2-值得收藏

VSCode自定义代码片段9——JS中的面向对象编程

前端开发中最常用的JS代码片段

JavaScript单行代码,也就是代码片段