JavaScript Dom

Posted 你是我的四月天

tags:

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

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的主要内容，如果未能解决你的问题，请参考以下文章

更改页面javascript代码（TamperMonkey）以将键盘笔触发送到父DOM

保留对附加节点 javascript 的引用

JavaScript--更新DOM

jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段

jQuery的DOM操作

VSCode自定义代码片段12——JavaScript的Promise对象