HTML DOM 方法
- HTML DOM 方法是您能够（在 HTML 元素上）执行的动作。
- HTML DOM 属性是您能够设置或改变的 HTML 元素的值。
HTML DOM 能够通过 JavaScript 进行访问（也可以通过其他编程语言）。
在 DOM 中，所有 HTML 元素都被定义为对象。
编程界面是每个对象的属性和方法。
属性是您能够获取或设置的值（就比如改变 HTML 元素的内容）。
方法是您能够完成的动作（比如添加或删除 HTML 元素）。
<html> <body> //改变p元素内容 <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Hello World!"; </script> </body> </html>
getElementById 是方法
- 访问 HTML 元素最常用的方法是使用元素的 id
innerHTML 是属性。
- 用于获取或替换 HTML 元素的内容
HTML DOM Document 对象
查找 HTML 元素
| 方法 | 描述 |
| document.getElementById(id) | 通过元素 id 来查找元素 |
| document.getElementsByTagName(name) | 通过标签名来查找元素 |
| document.getElementsByClassName(name) | 通过类名来查找元素 |
改变 HTML 元素
| 方法 | 描述 |
| element.innerHTML = new html content | 改变元素的 inner HTML |
| element.attribute = new value | 改变 HTML 元素的属性值 |
| element.setAttribute(attribute, value) | 改变 HTML 元素的属性值 |
| element.style.property = new style | 改变 HTML 元素的样式 |
添加和删除元素
| 方法 | 描述 |
| document.createElement(element) | 创建 HTML 元素 |
| document.removeChild(element) | 删除 HTML 元素 |
| document.appendChild(element) | 添加 HTML 元素 |
| document.replaceChild(element) | 替换 HTML 元素 |
| document.write(text) | 写入 HTML 输出流 |
添加事件处理程序
| 方法 | 描述 |
| document.getElementById(id).onclick = function(){code} | 向 onclick 事件添加事件处理程序 |
查找 HTML 对象
| 属性 | 描述 | DOM |
| document.anchors | 返回拥有 name 属性的所有 <a> 元素 |
1 |
| document.applets | 返回所有 <applet> 元素（HTML5 不建议使用） |
1 |
| document.baseURI | 返回文档的绝对基准 URI | 3 |
| document.body | 返回 <body> 元素 |
1 |
| document.cookie | 返回文档的 cookie | 1 |
| document.doctype | 返回文档的 doctype | 3 |
| document.documentElement | 返回 <html> 元素 |
3 |
| document.documentMode | 返回浏览器使用的模式 | 3 |
| document.documentURI | 返回文档的 URI | 3 |
| document.domain | 返回文档服务器的域名 | 1 |
| document.domConfig | 废弃。返回 DOM 配置 | 3 |
| document.embeds | 返回所有 <embed> 元素 |
3 |
| document.forms | 返回所有 <form> 元素 |
1 |
| document.head | 返回 <head> 元素 |
3 |
| document.images | 返回所有 <img> 元素 |
1 |
| document.implementation | 返回 DOM 实现 | 3 |
| document.inputEncoding | 返回文档的编码（字符集） | 3 |
| document.lastModified | 返回文档更新的日期和时间 | 3 |
| document.links | 返回拥有 href 属性的所有 <area> 和 <a> 元素 |
1 |
| document.readyState | 返回文档的（加载）状态 | 3 |
| document.referrer | 返回引用的 URI（链接文档） | 1 |
| document.scripts | 返回所有 <script> 元素 |
3 |
| document.strictErrorChecking | 返回是否强制执行错误检查 | 3 |
| document.title | 返回 <title> 元素 |
1 |
| document.URL | 返回文档的完整 URL | 1 |
JavaScript HTML DOM 动画
JavaScript 动画是通过对元素样式进行渐进式变化编程完成的
案例
<!DOCTYPE html> <html> <style> #container { width: 400px; height: 400px; position: relative; background: yellow; } #animate { width: 50px; height: 50px; position: absolute; background-color: red; } </style> <body> <p><button onclick="myMove()">单击我</button></p> <div id ="container"> <div id ="animate"></div> </div> <script> function myMove() { var elem = document.getElementById("animate"); var pos = 0; var id = setInterval(frame, 5); function frame() { if (pos == 350) { clearInterval(id); } else { pos++; //线性匀速沿对角线移动，先运动水平方向与垂直方向（力的分解） elem.style.top = pos + "px"; //水平方向 elem.style.left = pos + "px"; //垂直方向 } } } </script> </body> </html>
JavaScript HTML DOM 事件
向 button 元素分配 onclick 事件
onload 和 onunload 事件
当用户进入后及离开页面时，会触发 onload 和 onunload 事件。
onload 和 onunload 事件可用于处理 cookie。
onchange 事件
onchange 事件经常与输入字段验证结合使用
<!DOCTYPE html> <html> <head> <script> //当用户改变输入字段内容时，会调用 upperCase() 函数 function myFunction() { var x = document.getElementById("fname"); x.value = x.value.toUpperCase(); } </script> </head> <body> 请输入您的名字：<input type="text" id="fname" onchange="myFunction()"> <p>离开输入字段时，会触发一个函数，将输入文本转换为大写。</p> </body> </html>
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于当用户将鼠标移至 HTML 元素上或移出时触发某个函数
onmousedown, onmouseup 以及 onclick 事件构成了完整的鼠标点击事件
- 当鼠标按钮被点击时，onmousedown 事件被触发；
- 当鼠标按钮被释放时，onmouseup 事件被触发；
- 当鼠标点击完成后，onclick 事件被触发。
<!DOCTYPE html> <html> <body> <div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:#D94A38;width:90px;height:20px;padding:40px;"> 点击鼠标</div> <script> function mDown(obj) { obj.style.backgroundColor = "#1ec5e5"; obj.innerHTML = "松开鼠标"; } function mUp(obj) { obj.style.backgroundColor="#D94A38"; obj.innerHTML="谢谢您"; } </script> </body> </html>
JavaScript HTML DOM 事件监听器
- addEventListener() 方法为指定元素指定事件处理程序。
- addEventListener() 方法为元素附加事件处理程序而不会覆盖已有的事件处理程序。
- 您能够通过使用 removeEventListener() 方法轻松地删除事件监听器。
语法
element.addEventListener(event, function, useCapture); //第一个参数是事件的类型（比如 "click" 或 "mousedown"）。 //第二个参数是当事件发生时我们需要调用的函数。 //第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。 element.removeEventListener("mousemove", myFunction); //删除已通过 addEventListener() 方法附加的事件处理程序
案例：
<!DOCTYPE html> <html> <head> <style> #myDIV { background-color: coral; border: 1px solid; padding: 50px; color: white; font-size: 20px; } </style> </head> <body> <h1>JavaScript removeEventListener()</h1> <div id="myDIV"> <p>这个 div 元素有一个 onmousemove 事件处理程序，每次在这个橙色字段中移动鼠标时都会显示一个随机数。</p> <p>单击按钮以删除 div 的事件处理程序。</p> <button onclick="removeHandler()" id="myBtn">删除</button> </div> <p id="demo"></p> <script> document.getElementById("myDIV").addEventListener("mousemove", myFunction); function myFunction() { document.getElementById("demo").innerHTML = Math.random(); } function removeHandler() { document.getElementById("myDIV").removeEventListener("mousemove", myFunction); } </script> </body> </html>
饮水思源，点击去W3school
