通过DOM的方法，把HTML全部（元素（标签）、文本、属性）都封装成了document对象。
* DOM解析HTML(可以使用浏览器解析HTML)。
* 浏览器DOM解析HTML：
DOM会把HTML解析成树状结构。
注意：Node对象是Document、Element、Attribute、Text四个对象的父类，四个对象都属于节点对象。
* DHTML不是一种编程语言。
* html ：封装数据。 <span>展示给用户的数据</span>
* css ：设置样式（显示效果）
* dom ：操作HTML（解析HTML）
* js ：提供逻辑（判断语句，循环语句）
* Document对象：代表整个文档。
* 获取元素常用方法：
getElementById("id的值"); 通过元素的id的属性获取元素（标签）对象。
getElementsByName("name属性值"); 通过名称获取元素对象的集合（返回数组）
getElementsByTagName("标签名称"); 通过标签名称获取元素对象集合（返回数组）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <input type="text" id="nameId" value="zhangsan"/><br/> <input type="text" name="username" value="zhaosi"/><br/> <input type="text" name="username" value="wangwu"/><br/> <input type="text" name="username" value="ermazi"/><br/> </body> <script type="text/javascript"> /* getElementById("id的值"); （经常使用的） 通过元素的id的属性获取元素（标签）对象。 getElementsByName("name属性值"); 通过名称获取元素对象的集合（返回数组） getElementsByTagName("标签名称"); 通过标签名称获取元素对象的集合（返回数组） */ var input = document.getElementById("nameId"); // alert(input.value); var inputs = document.getElementsByName("username"); // alert(inputs.length); for(var i=0;i<inputs.length;i++){ var input1 = inputs[i]; alert(input1.value); } var inputs2 = document.getElementsByTagName("input"); alert(inputs2[0].value); </script> </html>
* 创建元素常用方法：
createElement("元素名称"); 创建元素对象
createTextNode("文本内容") 创建文本对象
appendChild("子节点") 添加子节点
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <ul> <li>北京</li> <li>上海</li> <li>广州</li> </ul> </body> <script type="text/javascript"> /* 需求：在ul无序列表下，添加一个子节点。<li>深圳</li> */ // 创建元素对象 var li = document.createElement("li"); // 创建文本的对象 var text = document.createTextNode("深圳"); // 把文本对象添加到元素对象下面，作为子节点 li.appendChild(text); // 获取ul var ul = document.getElementsByTagName("ul")[0]; // 把元素对象添加ul的下面，作为子节点 var lis=ul.getElementsByTagName("li"); console.log(lis); var objlis; for(var i=0;i<lis.length;i++){ if(lis[i].textContent=="上海") objlis=lis[i]; } ul.insertBefore(li,objlis) //ul.appendChild(li); </script> </html>
* Element对象
* 获取元素对象：document.getElementById(“id”)
getAttribute("属性名称"); 获取属性的值
setAttribute("属性名称","属性的值"); 设置或者修改属性的值
removeAttribute("属性名称"); 删除属性
* 获取元素下的所有子节点（*****）
ul.getElementsByTagName();
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <input type="text" id="nameId" value="zhangsan" /> <ul id="ulId"> <li>北京</li> <li>上海</li> <li>广州</li> </ul> </body> <script type="text/javascript"> /* * 获取元素对象 * getAttribute("属性名称"); 获取属性的值 * setAttribute("属性名称","属性的值"); 设置或者修改属性的值 * removeAttribute("属性名称"); 删除属性 * 获取元素下的所有子节点（*****） * ul.getElementsByTagName(); */ var input = document.getElementById("nameId"); // alert(input.value); // alert(input.getAttribute("value")); // 修改 //input.setAttribute("value", "zhaosi"); //alert(input.getAttribute("value")); input.removeAttribute("value"); //alert(input.getAttribute("value")); // ============================================================================ var ul = document.getElementById("ulId"); var lis = ul.childNodes; // alert(lis.length); //删除北京节点 ul.removeChild(lis[1]) var lis2 = ul.getElementsByTagName("li"); alert(lis2.length); console.log(lis2[0].innerText) </script> </html>
* Node节点对象
* nodeName ：节点名称
* nodeType ：节点类型
* nodeValue ：节点的值
* parentNode 获取父节点（永远是一个元素节点）
firstChild 第一个节点 firstElementChild第一个节点
lastChild最后一个节点、 lastElementChild 最后一个节点
nextSibling 下一同级节点 nextElementSibling下一同级节点
previousSibling 上一同级节点 previousElementSibling上一同级节点
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <input type="text" id="nameId" value="zhangsan" /> <span id="spanId"> 我是span的区域 </span> <ul> <li>北京</li> <li id="sh">上海</li> <li>广州</li> </ul> <ul> <li>小时代1</li> <li id="xsd2">小时代2</li> <li>小时代3</li> </ul> <hr/> <button id="btnId"> 我是按钮 </button> <span id="spanId2"></span> </body> <script type="text/javascript"> /* 元素 属性 文本 nodeName 大写的标签名称 属性名称 #text nodeType 1 2 3 nodeValue null 属性的值 文本的内容 * parentNode 获取父节点 * childNodes 所有子节点 * firstChild 第一个子节点 * lastChild 最后一个子节点 * nextSibling 下一个兄弟节点 * previousSibling 上一个兄弟节点 * appendChild(node) 父节点调用，在末尾添加子节点 * insertBefore(new,old) 父节点调用，在指定节点之前添加子节点 * replaceChild(new,old) 父节点调用，替换节点 * removeChild(node) 父节点调用,删除节点 * cloneNode(boolean) 不是父节点调用,复制节点 * boolean ：如果是true，复制子节点 ：如果是false，不复制子节点，默认是false *nodeValue：返回给定节点的当前值(字符串)： 如果给定节点是一个元素节点：返回null。 如果给定节点是一个属性节点：返回属性的值。 如果给定节点时一个文本节点：返回文本节点的内容。 var input = document.getElementById("nameId"); //alert(input.nodeName); // INPUT //alert(input.nodeType); // 1 //alert(input.nodeValue); // null var attr = input.getAttributeNode("type"); //alert(attr.nodeName); // type //alert(attr.nodeType); // 2 //alert(attr.nodeValue); // text var span = document.getElementById("spanId"); var text = span.firstChild; //alert(text.nodeName); // #text //alert(text.nodeType); // 3 //alert(text.nodeValue); // 我是span的区域 var ul = document.getElementById("ulId"); var li = ul.firstElementChild; // alert(li.nodeType); //1 // 是否包含子节点 // alert(ul.hasChildNodes()); // 是否包含属性 // alert(ul.hasAttributes()); // 点击上海，用小时代2替换上海 document.getElementById("sh").onclick = function(){ // var sh = document.getElementById("sh"); // var xsd2 = document.getElementById("xsd2"); // var ul = sh.parentNode; // ul.replaceChild(xsd2, sh); var ul = this.parentNode; var xsd2 = document.getElementById("xsd2"); ul.replaceChild(xsd2,this); }; // 删除节点 document.getElementById("sh").onclick = function(){ // this.parentNode.removeChild(this); var sh = document.getElementById("sh"); var ul = sh.parentNode; ul.removeChild(sh); }; */ // 复制button的按钮，添加到span标签的中间 var btn = document.getElementById("btnId"); var newbtn = btn.cloneNode(true); var span = document.getElementById("spanId2"); span.appendChild(newbtn); </script> </html>
innerHTML和事件
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <span id="spanId"> 这是span的区域 </span> <span id="spanId2"></span> <h3>获取焦点的事件</h3> 输入姓名：<input type="text" name="username" onfocus="run()" onblur="run2()"/><span id="uspan"></span><br/> 输入密码：<input type="password" name="password" /><span id="pspan"></span> </body> <script type="text/javascript"> /* * innerHTML属性： * 获取文本内容 * 设置文本内容 * 事件： onclick 点击事件 onload 加载事件 onfocus 获取焦点事件 onblur 失去焦点事件 var span = document.getElementById("spanId"); // alert(span.innerHTML); var span2 = document.getElementById("spanId2"); span2.innerHTML = "<font color='red'>这是span的区域2</font>"; */ // 提示输入的信息 function run(){ var uspan = document.getElementById("uspan"); uspan.innerHTML = "您只能输入特殊字符"; } // 失去焦点的时候 // function run2(){ // 获取用户输入的姓名 // ajax，把用户输入的姓名，传到后台，在后台做匹配的操作，后台处理完成，返回结果。 var uspan = document.getElementById("uspan"); uspan.innerHTML = "用户名已存在"; } </script> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <input type="text" id="nameId" onmousemove="run()" onmouseout="run2()"/><br/> <input type="text" id="nameId2" onkeyup="run3()" style="width: 200px"/> <div id="divId" style="width: 200px;display: none"> <table> <tr> <td>java</td> </tr> <tr> <td>js</td> </tr> <tr> <td>jsp</td> </tr> </table> </div> </body> <script type="text/javascript"> /* */ function run(){ var input = document.getElementById("nameId"); input.style.backgroundColor = "gray"; } function run2(){ var input = document.getElementById("nameId"); input.style.backgroundColor = "white"; } function run3(){ var div = document.getElementById("divId"); div.style.display = "block"; //display:block 块显示 } </script> </html>
* onsubmit事件
* 控制表单提交。 需要把onsubmit作用在表单上 <form onsubmit="">
* 值的写法：onsubmit="return run()"
* run()必须要有返回值，必须返回true或者false。
* 如果返回是true，表单可以提交，如果返回false，表单不能提交。如果没有返回值，默认是表单提交。
* run()的逻辑写什么？
* 表单的校验。
* 可以通过js提交表单。
// 通过id获取form
// var form = document.getElementById("formId");
// 通过form的name的属性获取表单
var form = document.form1;
//var name = document.form1.username.value;
//alert(name);
// 设置提交的路径
form.action = "success.html";
form.method = "get";
// 提交表单
form.submit();
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> // 给姓名提示 function run1(){ var uspan = document.getElementById("uspan"); //var name = document.getElementById("nameId"); //console.log(name.value) uspan.innerHTML = "不能输入特殊字符"; } // 表单校验，必须有返回值 function run(){ // 校验姓名 var name = document.getElementById("nameId").value; if(name == "" || name.length == 0){ var uspan = document.getElementById("uspan"); uspan.innerHTML = "用户名不能为空"; return false; } // 校验密码 var pwd = document.getElementById("pwdId").value; if(pwd == "" || pwd.length < 6){ var pspan = document.getElementById("pspan"); pspan.innerHTML = "密码至少6位"; return false; } // 确认密码 var repwd = document.getElementById("repwdId").value; if(pwd != repwd){ var rpspan = document.getElementById("rpspan"); rpspan.innerHTML = "两次密码不一致"; return false; } // 确认密码 // /^表达式$/.test(string) 返回true获取false var email = document.getElementById("emailId").value; if(!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email)){ var espan = document.getElementById("espan"); espan.innerHTML = "邮箱格式不正确"; return false; } } // 使用js提交表单 （当页面有多个表单，可用该方式） function run2(){ // 通过id获取form // var form = document.getElementById("formId"); // 通过form的name的属性获取表单 var form = document.form1; //var name = document.form1.username.value; //alert(name); // 设置提交的路径 form.action = "success.html"; form.method = "get"; // 提交表单 form.submit(); } </script> </head> <body> <form id="formId" name="form1" action="success.html" method="post" onsubmit="return run()"> <table border="1" width="60%"> <tr> <td>输入姓名</td> <td> <input type="text" name="username" id="nameId" onfocus="run1()"/><span id="uspan"></span> </td> </tr> <tr> <td>输入密码</td> <td> <input type="password" name="password" id="pwdId" /><span id="pspan"></span> </td> </tr> <tr> <td>确认密码</td> <td> <input type="password" name="repassword" id="repwdId" /><span id="rpspan"></span> </td> </tr> <tr> <td> 输入邮箱 </td> <td> <input type="text" name="email" id="emailId" /><span id="espan"></span> </td> </tr> <tr> <td colspan="2"> <input type="submit" value="注册"> <!-- <input type="button" value="注册" onclick="run2()"> --> </td> </tr> </table> </form> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <h1>注册成功</h1> </body> </html>