首页 > 代码库 > JavaScript Dom

JavaScript Dom

2024-09-11 12:47:12   223人阅读

1、通过id获取页面上的元素

   document.getElementById(); //通过这个方法就可以获取到页面上的元素

   ------------------------------------------------------

  使用document.getElementById()方法的时候，如果使用了未定义的id会报错（有可能代码里确实有这个id，但是HTML代码是从上到下执行的，而在执行     document.getElementById()方法的时候还没有执行到创建id的代码），所以为了避免这种错误，document.getElementById()方法要么用在最后，要么为window.onload注册一个事件处理程序。当执行该事件的时候，页面已经加载完了，在事件中使用document.getElementById()方法就不会报错了。

  window.onload=function(){
                
            };

2、为元素对象注册事件

在<body></body>标签中创建一个按钮

<input id="btn1" type="button" name="name" value="button"/>

在<script></script>标签中给btn1动态注册事件，实现js代码与html网页代码相分离。

 

//动态注册事件的方式实现js代码与html网页代码相分离
            window.onload=function(){
                document.getElementById(‘btn1‘).onclick=function(){
                alert(‘按钮被点了‘);
                 alert(new Date().toLocaleTimeString());//打印当前时间
            };
            }

 

 

window.onload=function(){
                document.getElementById(‘btn1‘).onclick=fn; //这样写表示把fn函数赋值给onclick事件，点按钮的时候才执行fn
                document.getElementById(‘btn1‘).onclick=fn();//这样写没有意义，表示将fn的返回值赋值给onclick事件，执行这段代码的时候立即就执行fn（并没有点按钮也执行）
            };
            function fn(){
                alert(new Date().toLocaleTimeString());
            }

 

JavaScript Dom


联系
我们