Day71 JavaScript补充
1.思维导图
2.代码部分
XML DOM:Node对象
- 需求:给父div中添加一个子div,子div中的内容为”你好世界”;移除父div中指定的子元素
<head> <title>Node对象</title> <script> function fn1() { //1,获取父div var parentDiv = document.getElementById("parentDiv"); //2,给父div添加一个子div //2.1,创建子div元素对象 var childDiv = document.createElement("div"); //2.2,创建文本节点,内容为:”学好java” var textNode = document.createTextNode("你好世界"); //2.3,创建属性节点,属性名为id,值为childDiv childDiv.setAttribute("id","childDiv"); //2.4,父div 包含 子div ;子div 包含 ”学好java” childDiv.appendChild(textNode); parentDiv.appendChild(childDiv); } function fn2() { //1,获取父div var parentDiv = document.getElementById("parentDiv"); //2,获取子div var childDiv = document.getElementById("childDiv"); //2,移除childDiv元素 parentDiv.removeChild(childDiv); } </script> </head> <body> <div id="parentDiv"> 父div </div> <button onclick="fn1()">添加</button> <button onclick="fn2()">删除</button> </body>
<body> <div > <div id="xda1">子div1</div> </div> <button onclick="fn1()">添加</button> </body> function fn1() { var childDiv = document.getElementById("xda1"); //获取父div var parentDiv = childDiv.parentNode; //创建子div var childDiv2 = document.createElement("div"); var textNode = document.createTextNode("hello xmldom"); childDiv2.appendChild(textNode); parentDiv.appendChild(childDiv2); }
<div id="parent"> 这是一个div <div>这是一个div2</div> </div> function fn1() { var parent = document.getElementById("parent"); var childNodes = parent.childNodes; for (var i = 0; i < childNodes.length; i++) { var childNode = childNodes[i]; console.log(childNode.nodeName+","+childNode.nodeType); } }
function fn2() {
//获取父div
var parentDiv = document.getElementsByTagName("div")[0];
//获取所有子节点 : 有元素节点、文本节点
// var childNodes = parentDiv.childNodes;
// console.log(childNodes.length)
var childDivs = parentDiv.getElementsByTagName("div");
var firstDiv = childDivs[0];
console.log(firstDiv);
if (undefined != firstDiv) {
parentDiv.removeChild(firstDiv);
}
}
function fn3() {
var parentDiv = document.getElementsByTagName("div")[0];
//获取所有子节点 : 有元素节点、文本节点
// var childNodes = parentDiv.childNodes;
// console.log(childNodes.length)
var childDivs = parentDiv.getElementsByTagName("div");
var lastDiv = childDivs[childDivs.length-1];
if (undefined != lastDiv) {
parentDiv.removeChild(lastDiv);
}
}
<head> <title>innerHTML、innerText</title> <script> function fn1() { var div = document.getElementById("parent"); //Xml DOM // var text = document.createTextNode("你好世界"); // div.appendChild(text); //Html DOM innerHTML、innerText:设置/获取标签内容 div.innerHTML = "<font color='red'>你好世界!!</font>"; div.innerText = "<font color='red'>你好世界!!</font>"; console.log(div.innerHTML) console.log(div.innerText) } </script> </head> <body> <div id="parent"> parent parent parent </div> <button onclick="fn1()">添加</button> </body>
<head> <title>操作标签</title> <script> function fn1() { console.log("内容发生改变."); var ele = document.getElementsByName("username")[0]; console.log(ele.value); //Html DOM中有一个Text对象:value属性:获取/设置value属性值 ele.value = "helloworld"; } </script> </head> <body> <input type="text" name="username" onchange="fn1()"/> </body>
<head> <title>Html DOM操作样式</title> <style> div{ background-color: deepskyblue; } </style> <script> // 修改div元素的边框、宽度、内容字体大小. function fn1() { var div = document.getElementById("div"); div.style.border="10px solid green"; div.style.width = "200px"; div.style.fontSize = "50px"; } </script> </head> <body> <div id="div"> 这是一个div </div> <button onclick="fn1()">修改</button> </body>
//Xml DOM function fn1() { var select = document.getElementById("sel"); var childNodes = select.childNodes; for (var i = 0; i < childNodes.length; i++) { //既可以是换行符(3),也可以是option元素(1) var childNode = childNodes[i]; if (childNode.nodeType == 1) { //就是一个option元素 //获取"小学"...节点对象 var textNode = childNode.firstChild; //获取节点值 var nodeValue = textNode.nodeValue; console.log(nodeValue); } } } //Html DOM function fn2() { //获取select对象 var select = document.getElementById("sel"); //获取所有option var options = select.options; for (var i = 0; i < options.length; i++) { //获取每一个option对象 var option = options[i]; console.log("text : " + option.text + " , value : "+ option.value); } } <select id="sel"> <option value="xx">小学</option> <option value="cz">初中</option> <option value="gz">高中</option> <option value="dx">大学</option> </select><br> <button onclick="fn1()">获取1</button><br> <button onclick="fn2()">获取2</button><br>
<head> <title>综合案例二</title> <script> function fn1() { //获取selec选中的option中的value属性值及文本内容 var select = document.getElementById("sel"); //获取到被选中的选项的索引 var selectedIndex = select.selectedIndex; //获取所有option数组 var options = select.options; //通过数组、索引获取对应option对象 var option = options[selectedIndex]; var text = option.text; var value = option.value; console.log("text : " + text + " , value : " + value); } </script> </head> <body> <select id="sel" onchange="fn1()"> <option value="xx">小学</option> <option value="cz">初中</option> <option value="gz">高中</option> <option value="dx">大学</option> </select> </body>
- 需求:在select下增加一个选项"硕士"
<script> //Xml DOM function fn1() { var select = document.getElementById("sel"); //创建一个option对象 var option = document.createElement("option"); option.setAttribute("value","ss"); var text = document.createTextNode("硕士"); option.appendChild(text); select.appendChild(option); } //Html DOM function fn2() { var select = document.getElementById("sel"); var option = document.createElement("option"); option.text = "博士"; option.value = "bs"; select.add(option); } </script>
<head> <title>综合案例四</title> <script> function selectAll() { var hobbys = document.getElementsByClassName("hobbys"); var all = document.getElementById("all"); for (var i = 0; i < hobbys.length; i++) { var hobby = hobbys[i]; //将每个爱好的多选框的选中状态,应该设置和 hobby.checked = all.checked; } }
/** * 全选 */ function fn1() { //全选 : 让所有多选框选中 //获取所有的多选框 var hobbys = document.getElementsByClassName("hobbys"); for (var i = 0; i < hobbys.length; i++) { console.log("设置~~~") //获取每一个多选框 var hobby = hobbys[i]; //让多选框选中 if (!hobby.checked) { hobby.checked = true; } } } /** * 全不选 */ function fn2() { //全不选 var hobbys = document.getElementsByClassName("hobbys"); for (var i = 0; i < hobbys.length; i++) { var hobby = hobbys[i]; if (hobby.checked) { hobby.checked = false; } } } function fn3() { //反选 var hobbys = document.getElementsByClassName("hobbys"); for (var i = 0; i < hobbys.length; i++) { var hobby = hobbys[i]; //获取之前的选中状态 var oldChecked = hobby.checked; //取反获取新的选中状态 var newChecked = !oldChecked; hobby.checked = newChecked; } } </script> </head> <body> <input type="checkbox" onchange="selectAll()" id="all"/>全选/全不选 <br> <br> <input type="checkbox" class="hobbys"/>篮球 <input type="checkbox" class="hobbys"/> 足球 <input type="checkbox" class="hobbys"/>乒乓球 <input type="checkbox" class="hobbys">排球 <br> <br> <button onclick="fn1()">全选</button> <button onclick="fn2()">全不选</button> <button onclick="fn3()">反选</button> </body>
- 综合案例五
- 需求:所有内容不可以为空、邮箱必须邮箱的规则、用户名与密码长度必须6位以上、密码与重复密码必须一致
<head> <title>综合案例五</title> <script> /** * 校验表单 */ function checkInfo() { return checkNull("username") && checkNull("password") && checkNull("repassword") && checkNull("email"); } /** * 清除之前的错误提示 */ function clearSpan() { var spans = document.getElementsByTagName("span"); for (var i = 0; i < spans.length; i++) { var span = spans[i]; span.innerHTML = ""; } } function checkNull(id) { //非空校验 var reg =/^\s*$/ var username = document.getElementById(id); //获取输入框中内容 var value = username.value; console.log(reg.test(value)); if (reg.test(value)) { //输入框是空的 var span = document.getElementById(id+"_error"); span.innerHTML = "<font color='red'>"+ id +"不能为空</font>"; return false; } else { //输入框有内容 return true; } } </script> </head> <body> <form action="index.jsp" onsubmit="return checkInfo()"> <table border="1px" width="500px" height="200px" cellspacing="0px"> <tr> <th colspan="3">用户注册</th> </tr> <tr> <td> 账户: </td> <td align="center"> <input type="text" name="username" id="username"/> </td> <td width="180px"> <span id="username_error"></span> </td> </tr> <tr> <td> 密码: </td> <td align="center"> <input type="text" name="password" id="password"/> </td> <td width="180px"> <span id="password_error"></span> </td> </tr> <tr> <td> 确认密码: </td> <td align="center"> <input type="text" name="repassword" id="repassword"/> </td> <td width="180px"> <span id="repassword_error"></span> </td> </tr> <tr> <td> 邮箱: </td> <td align="center"> <input type="text" name="emial" id="email"/> </td> <td width="180px"> <span id="email_error"></span> </td> </tr> <tr align="center"> <td colspan="3"> <button type="submit">注册</button> </td> </tr> </table> </form>
//校验账户和密码长度 function checkLength(fieldName) { var ele = document.getElementsByName(fieldName)[0]; if(/^.{6,}$/.test(ele.value)){ return true; }else { var spanEle = document.getElementById(fieldName+"_msg"); spanEle.innerHTML="<font color='red'>"+fieldName+"长度不对</font>"; return false; } }
//校验邮箱格式 function checkEmail() { var ele = document.getElementsByName("email")[0]; if(/^(\w)+@(\w)+(.\w+)+$/.test(ele.value)){ return true; }else { let span = document.getElementById("email_msg"); span.innerHTML = "<font color='red'>邮箱格式不对!</font>"; return false; } }
//校验密码是否一致 function checkPassword(){ var ele1 = document.getElementsByName("password")[0]; var ele2 = document.getElementsByName("repassword")[0]; if(ele1.value == ele2.value){ return true; } else { var span = document.getElementById("repassword_msg"); span.innerHTML = "<font color='red'>密码不一致!</font>"; return false; } }