通過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>