DOM全称Document Object Model文档对象模型。JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲地操作web页面
节点Node ,是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点。比如: html标签、 属性、文本、注释、整个文档等都是一个节点。
虽然都是节点,但是实际上他们的具体类型是不同的。比如:标签我们称为元素节点属性称为属性节点、文本称为文本节点文档称为文档节点。节点的类型不同,属性和方法也都不尽相同。
| nodeName | nodeType | nodeValue | |
| 文档节点 | #document | 9 | null |
| 元素节点 | 标签名 | 1 | null |
| 属性节点 | 属性名 | 2 | 属性值 |
| 文本节点 | #text | 3 | 文本内容 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button id="btn">我是一个按钮</button> <script type="text/javascript"> /* 浏览器已经为我们提供了 文档节点对象 这个对象是window属性 可以在页面中直接使用，文档节点代表的是整个网页 */ console.log(document);//object HTMLDocument //获取到button对象 var btn = document.getElementById("btn"); console.log(btn);//object HTMLButtonElement //修改按钮的文字 console.log(btn.innerHTML);//我是一个按钮 btn.innerHTML = "I am Button."; </script> </body> </html>
事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。JavaScript与HTML之间的交互是通过事件实现的。
对于Web应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、按下键盘上某个键，等等。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 我们可以在事件对应的属性中设置一些JS代码， 这样当事件被触发时，这些代码将会被执行 这种写法我们称为结构和行为耦合，不方便维护，不推荐使用 --> <!-- <button id="btn" ondbclick="alert(‘讨厌，你点我干嘛‘)">我是一个按钮</button> --> <button id="btn">我是一个按钮</button> <script type="text/javascript"> /* 事件，就是用户和浏览器之间的交互行为 比如：点击按钮、鼠标移动、关闭窗口。 */ //获取对象 var btn = document.getElementById("btn"); /* 可以为按钮的对应时间绑定处理函数的形式来响应事件 这样当事件被触发时，其对应的函数将会被调用 */ //绑定一个单击事件 //像这种为单击事件绑定的函数，我们称为单击响应函数 btn.onclick = function () { alert("你还点~~~"); } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* 浏览器在加载一个页面时，是按照自上向下的顺序加载的 读取到一行就运行一行，如果将script标签写到页面的上边， 在代码执行时，页面还没有加载，DOM对象也没有加载 会导致无法获取到DOM对象 将js代码写到页面的下部，就是为了可以在页面加载完毕之后再执行js代码 */ // //获取对象 // var btn = document.getElementById("btn"); // //绑定一个单击响应函数 // btn.onclick = function () { // alert("你还点~~~"); // } /* onload事件会在整个页面加载完成之后才会触发 为window绑定一个onload 该事件对应的响应函数将会在页面加载完成之后执行 这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了 */ window.onload = function () { // alert("hello"); //获取对象 var btn = document.getElementById("btn"); //绑定一个单击响应函数 btn.onclick = function () { alert("你还点~~~"); } } </script> </head> <body> <button id="btn">我是一个按钮</button> </body> </html>
原文：https://www.cnblogs.com/stu-jyj3621/p/13396395.html