HTML DOM
什么是 DOM？
"W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"
结论：js控制访问修改结构/样式的一个接口
实例分析
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <script> function changeImage() { element=document.getElementById('myimage') if (element.src.match("bulbon")) { element.src="/images/pic_bulboff.gif"; } else { element.src="/images/pic_bulbon.gif"; } } </script> <img id="myimage" onclick="changeImage()" border="0" src="/images/pic_bulboff.gif" width="100" height="180"> <p>点击灯泡 开/关 灯</p> </body> </html>
结论：element.src.math("bulbon")，对字符串进行检索，匹配到为true
DOM父、子和同胞节点
一些 DOM 对象方法
| getElementById() | 返回带有指定 ID 的元素。 |
| getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 |
| getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。 |
| appendChild() | 把新的子节点添加到指定节点。 |
| removeChild() | 删除子节点。 |
| replaceChild() | 替换子节点。 |
| insertBefore() | 在指定的子节点前面插入新的子节点。 |
| createAttribute() | 创建属性节点。 |
| createElement() | 创建元素节点。 |
| createTextNode() | 创建文本节点。 |
| getAttribute() | 返回指定的属性值。 |
| setAttribute() | 把指定属性设置或修改为指定的值。 |
节点的增删改查实例
写好基本结构
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } #div{ border: 1px solid red; width: 400px; height: 50px; } #addDiv{ border: 1px solid red; width: 400px; height: 50px; } #add{ width: 50px; height: 50px; background: blue; float: right; } </style> </head> <body> <div id="div"> <div id="addDiv"> <button id="add">添加</button> </div> </div> <script src="js/index4.js"></script> </body> </html>
window.onload = function() { //获取父节点及添加节点 var strAdd = document.getElementById("add"); var box = document.getElementById("div"); //给button绑定strAdd事件 strAdd.onclick = addDiv; //创建节点并写入样式，并同时为删除按钮绑定事件 function addDiv() { //创建好节点写好样式并追加入box var newDiv = document.createElement("div"); newDiv.style.height = "50px"; newDiv.style.backgroundColor = randomColor(); box.appendChild(newDiv); //创建删除按钮 var delBtn = document.createElement("button"); delBtn.innerHTML = "删除"; delBtn.style.width = "50px"; delBtn.style.height = "50px"; delBtn.style.backgroundColor = "pink"; delBtn.style.float = 'right'; newDiv.appendChild(delBtn); //给删除按钮绑定点击事件 delBtn.onclick = removeDiv; } function removeDiv() { //this = button,parentNode 为它的父节点 box.removeChild(this.parentNode); } //用拼串的方式，返回一个随机的颜色 function randomColor() { return "#" + Math.floor(Math.random() *16*16*16*16*16*16).toString(16); } }
验证码实例
需求描述为：点击图片，生成验证码，输入，如果输入的一致，则提示验证成功，否则，验证失败
html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } #div{ width: 300px; height: 250px; border: 1px solid red; margin: 0 auto; position: relative; } #leftDiv{ display: inline-block; } #inputText{ outline: none; border: 1px solid red; width: 140px; height: 30px; border-radius:30px; margin-top:120px; margin-left: 10px; } #lab{ display: block; height: 30px; margin-left:40px; margin-top:10px; } #rightDiv{ border: 1px solid blue; width: 80px; height: 80px; position: absolute; text-align: center; line-height: 80px; font-size:26px; left: 200px; top: 100px; } </style> </head> <body> <div id="div"> <div id="leftDiv"> <input type="text" name="text" id="inputText"> <span id="lab">输入验证码</span> </div> <div id="rightDiv"></div> </div> <script src="js/index5.js"></script> </body> </html>
js
window.onload = function() { //获取节点 var strRightDiv = document.getElementById("rightDiv"); var strInput = document.getElementById("inputText"); var strLab = document.getElementById("lab"); //给右边框绑定一个生成验证码的函数 strRightDiv.onclick = validateCode; var str = ''; function validateCode() { var arr = ["1","2","3","4","5","6","7","8","9"]; str = arr[parseInt(Math.random()*100%9)] + arr[parseInt(Math.random()*100%9)] + arr[parseInt(Math.random()*100%9)] + arr[parseInt(Math.random()*100%9)]; strRightDiv.innerHTML = str; } //手动调用一次验证码 validateCode(); //鼠标聚焦的时候提示 strInput.onfocus = function() { strLab.innerHTML = "请输入验证码"; } //鼠标失去焦点的时候 验证 strInput.onblur = function() { if ( str == strInput.value ) { strLab.innerHTML = '验证成功'; strLab.style.color = "blue"; } else{ strLab.innerHTML = "验证失败，请重新输入"; strLab.style.color = 'red'; } } }
