<!DOCTYPE HTML><HTML> <head> <Meta charset="UTF-8"> <Title></Title> </head> <body> <button ID="btn">我是一个按钮</button> <script type="text/JavaScript"> /* * 浏览器提供 文档节点 对象这个对象是window属性 * 可以在页面中直接使用，文档节点代表的是整个网页 */ console.log(document); //获取到button对象 var btn = document.getElementByID("btn"); //修改按钮的文字 btn.INNERHTML = "I‘m button"; </script> </body></HTML> 二、事件 <!DOCTYPE HTML><HTML> <head> <Meta charset="UTF-8"> <Title></Title> </head> <body> <!-- 可以在事件对应的属性中设置一些Js代码，这样当事件被触发时，这些代码将会执行 这种写法称为结构和行为耦合，不方便维护，不推荐使用 --> <button ID="btn" onmousemove="alert(‘讨厌，你点我干嘛！‘);">我是一个按钮</button> <button ID="btn2">我是一个按钮</button> <script type="text/JavaScript"> /* * 事件，就是用户和浏览器之间的交互行为， * 比如：点击按钮，鼠标移动、关闭窗口。。。 */ //获取按钮对象 var btn = document.getElementByID("btn2"); /* * 可以为按钮的对应事件绑定处理函数的形式来响应事件 * 这样当事件被触发时，其对应的函数将会被调用 */ //绑定一个单击事件，像这种为单击事件绑定的函数称为单击响应函数 btn.onclick = function(){ btn.innerText="I‘m button"; }; </script> </body></HTML> 三、文档的加载 <!DOCTYPE HTML><HTML> <head> <Meta charset="UTF-8"> <Title></Title> <script type="text/JavaScript"> /* * 浏览器在加载一个页面时，是按照自上向下的顺序加载的， * 读取到一行就运行一行,如果将script标签写到页面的上边， * 在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载 * 会导致无法获取到DOM对象 */ /* * onload事件会在整个页面加载完成之后才触发 * 为window绑定一个onload事件: * 该事件对应的响应函数将会在页面加载完成之后执行， * 这样可以确保代码执行时所有的DOM对象已经加载完毕了 */ window.onload = function(){ //获取ID为btn的按钮 var btn = document.getElementByID("btn"); //为按钮绑定一个单击响应函数 btn.onclick = function(){ alert("hello"); }; }; </script> </head> <body> <button ID="btn">点我一下</button> <!--<script type="text/JavaScript"> /* * 将Js代码编写到页面的下部就是为了可以在页面加载完毕以后再执行Js代码 */ //获取ID为btn的按钮 var btn = document.getElementByID("btn"); //为按钮绑定一个单击响应函数 btn.onclick = function(){ alert("hello"); }; </script>--> </body></HTML> 总结 以上是内存溢出为你收集整理的文档对象模型DOM全部内容，希望文章能够帮你解决文档对象模型DOM所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）