首页 > 代码库 > DOM day2
DOM day2
一、获取标签内的文本内容
1.1 选择文本
<ul id=”d1”> <li>这是一个标签</li> <li>这是一个标签</li> <li>这是一个标签</li> <li>这是一个标签</li></ul><p id=”d2”></p><ul id=”list”></ul>
innerText指的是获得标签之间的文本内容，但是低版本的火狐(firefox 42及之前)不支持innerText，而是用txetContent代替，IE8之前的浏览器不支持txetContent只支持innerText；
var ul = document.getElementById(“d1”);console.log(ul.innerText); //chrome+(<=ie8)console.log(ul.txetContent); // <=firefox42
innerHTML指的是获得标签中的内容，与innerText不同的是，如果标签嵌套了其他标签的话，会将标签也打印出来
console.log(ul.innerHTML);
1.2 设置文本
var p=document.getElementById(“d2”);p.innerText = “这是一个设置p标签之间的内容”;p.textContent = “这是一个设置p标签之间的内容”;
同样的，设置文本时也同样存在兼容性你个问题，innerText是IE8及之前的浏览器版本支持的属性，但是低版本的火狐浏览器(42)不支持属性，而仅支持textContent，而IE8及之前的浏览器又不支持textContent，高版本的火狐浏览器其高版本的其它浏览器都支持这两个属性。
p.innerHTML = “这是一个设置p标签之间的内容”;
innerHTML没有兼容性的问题，是所有的浏览器都兼容的，仅仅是文本内容的时候显示的方式
当输入中包含标签时：
var ul2 = document.getElementById("list");ul2.innerText = "<li>123</li><li>456</li><li>789</li><li>sdfasd fas</li>"ul2.innerHTML = "<li>123</li><li>456</li><li>789</li><li>sdfasd fas</li>";
我们可以发现上面的例子中，> <这样的符号发生了转义。因此，直接解析成对应的li标签如果只有纯文本的时候，那么 innerText与innerHTML用法 是一样的如果文本内容里面有标签的时候，innerText会将标签进行转义，而innerHTML会将标签解析成对应的浏览器能够显示的样式
下面是使用innerTxet时的兼容封装：
<ul id="d1"> <li>这是第1个li下的文本段</li> <li>这是第2个li下的文本段</li> <li>这是第3个li下的文本段</li> <li>这是第4个li下的文本段</li> <li>这是第5个li下的文本段</li></ul>var d1=document.getElementById(“d1”);function getText(element){ if(typeof element.innerText == “string”){ return element.innerText; }else{ return element.textContent; }}console.log(getText(d1));
上面是获得文本，下面是设置文本
<p id = ”d1”></p>var d1=document.getElementById(“d1”);function setText(value,element){ if(typeof element.innerText == “string”){ element.innerText = value; }else{ element.txetContent = value; }}var txt = “这是一个通过innerText添加的文本”;setText(txt,d1);
总结：
1、两种方式获取内容
innerHTML一定会把内容解析到DOM树上
—获取标签之间的内容（联标签都获取）
—设置标签之间的内容（直接渲染）
innerText(火狐中是textContent)一定对内容转义
—获取标签之间的内容（如果有标签忽略）
—设置标签之间的内容（如果有标签，转义）
2、innerHTML与innerText的区别
innerHTML
—会将获取到的内容原封不动的输出（包括标签）
—所有浏览器都支持
innerText
—只获取文本，会将标签过滤掉
—IE8之前支持，现在高版本浏览器都支持
textContent
—老版本火狐浏览器不支持innerText，支持textContent，现在都支持
二、重点案例
2.1 获取和设置文档的兼容性封装
1 function getText(element){ 2 if(typeof element.innerText=="string"){ 3 return element.innerText; 4 }else{ 5 return element.textContent; 6 } 7 } 8 function setText(element,value){ 9 if(typeof element.innerText=="string"){10 element.innerText = value;11 }else {12 element.textContent = value;13 }14 }
2.2 点击按钮禁用文本框
1 <body> 2 <input type="text" value="http://www.mamicode.com/请输入..." id="txt"> 3 <button id="btn">禁用</button> 4 <script> 5 var txt = document.getElementById("txt"); 6 var btn = document.getElementById("btn"); 7 btn.onclick = function(){ 8 if(btn.innerHTML == "禁用"){ 9 txt.disabled = true;10 btn.innerHTML = "解除";11 }else{12 txt.disabled = false;13 btn.innerHTML = "禁用";14 }15 }16 </script>17 </body>
2.3 获得焦点清除文本框内容
1 <body> 2 <input type="text" value="http://www.mamicode.com/请输入...." id="d1"/> 3 <script> 4 var txt = document.getElementById("d1"); 5 txt.onfocus = function () { 6 if (txt.value =http://www.mamicode.com/="请输入....") { 7 txt.valuehttp://www.mamicode.com/= ""; 8 } else { 9 txt.value =http://www.mamicode.com/ txt.value;10 }11 }12 txt.onblur = function () {13 if (txt.value =http://www.mamicode.com/="") {14 txt.valuehttp://www.mamicode.com/= "请输入....";15 } else {16 txt.value =http://www.mamicode.com/ txt.value;17 }18 }19 </script>20 </body>
2.4 给文本框赋值并获得文本框的内容
1 <body> 2 <input type="text"/><br/> 3 <input type="text"/><br/> 4 <input type="text"/><br/> 5 <input type="text"/><br/> 6 <input type="text"/><br/> 7 <input type="text"/><br/> 8 <input type="text"/><br/> 9 <input type="text"/><br/>10 <input type="text"/><br/>11 <input type="text"/><br/>12 <input type="button" value="http://www.mamicode.com/给文本框赋值" id="btnSet"/>13 <input type="button" value="http://www.mamicode.com/获得文本框的值" id="btnGet"/>14 15 <script>16 var btnSet = document.getElementById("btnSet");17 var btnGet = document.getElementById("btnGet");18 var txts = document.getElementsByTagName("input");19 var arr = [];20 btnSet.onclick = function () {21 for (var i = 0; i < txts.length; i++) {22 if (txts[i].type == "text") {23 txts[i].valuehttp://www.mamicode.com/= "a" + (i + 1);24 arr[i] = txts[i].value;25 }26 }27 }28 btnGet.onclick = function () {29 console.log(arr.join("|"));30 }31 </script>32 </body>
2.5 检测用户名的输入
1 <body> 2 用户名：<input type="text" id="userName"> <span id="sp1"></span><br/> 3 密码：<input type="text" id="userPwd"> <span id="sp2"></span><br/> 4 <input type="button" id="btn" value="http://www.mamicode.com/登陆"/> 5 <script> 6 var userName = document.getElementById("userName"); 7 var userPwd = document.getElementById("userPwd"); 8 var sp1 = document.getElementById("sp1"); 9 var sp2 = document.getElementById("sp2");10 var btn = document.getElementById("btn");11 btn.onclick = function () {12 if (userName.value.length > 6 || userName.value.length < 3) {13 if(userName.value.length==0){14 sp1.innerHTML = "请输入用户名";15 }else{16 userName.style.backgroundColor = "red";17 sp1.innerHTML = "用户名的长度应该是在3--6位之间，请重新输入";18 }19 } else {20 sp1.innerHTML = "用户名格式正确";21 userName.style.backgroundColor = "";22 if (userPwd.value.length > 8 || userPwd.value.length < 6) {23 if(userPwd.value.length==0){24 sp2.innerHTML = "请输入密码";25 }else{26 sp2.innerHTML = "用户密码应该是在6--8位之间，请重新输入";27 userPwd.style.backgroundColor = "red";28 }29 } else {30 sp2.innerHTML = "用户名密码格式正确";31 userPwd.style.backgroundColor = "";32 alert("登陆成功");33 }34 }35 }36 37 38 </script>39 </body>
2.6 全选反选
1 <body> 2 <input type="checkbox"/> 3 <input type="checkbox"/> 4 <input type="checkbox"/> 5 <input type="checkbox"/> 6 <input type="checkbox"/> 7 <input type="checkbox"/> 8 <input type="checkbox"/> 9 <input type="checkbox"/>10 <input type="button" id="btnAll" value="http://www.mamicode.com/全选"/>11 <input type="button" id="btnNoSelect" value="http://www.mamicode.com/全不选"/>12 <input type="button" id="btnReverse" value="http://www.mamicode.com/反选"/>13 <script>14 var btnAll = document.getElementById("btnAll");15 var btnNoSelct = document.getElementById("btnNoSelect");16 var btnReverse = document.getElementById("btnReverse");17 var inputs = document.getElementsByTagName("input");18 btnAll.onclick = function(){19 for(var i = 0;i < inputs.length;i++){20 if(inputs[i].type == "checkbox"){21 inputs[i].checked = true;22 }23 }24 }25 btnNoSelct.onclick = function(){26 for(var i = 0;i < inputs.length;i++){27 if(inputs[i].type == "checkbox") {28 inputs[i].checked = false;29 }30 }31 }32 btnReverse.onclick = function(){33 for(var i = 0;i < inputs.length;i++) {34 if (inputs[i].type == "checkbox") {35 inputs[i].checked = !inputs[i].checked;36 }37 }38 }39 </script>40 </body>
2.7 排它
<body><input type="button" value="http://www.mamicode.com/按钮"/><input type="button" value="http://www.mamicode.com/按钮"/><input type="button" value="http://www.mamicode.com/按钮"/><input type="button" value="http://www.mamicode.com/按钮"/><input type="button" value="http://www.mamicode.com/按钮"/><input type="button" value="http://www.mamicode.com/按钮"/><input type="button" value="http://www.mamicode.com/按钮"/><input type="button" value="http://www.mamicode.com/按钮"/><script> var btns=document.getElementsByTagName("input"); for(var i=0;i<btns.length;i++){ btns[i].onclick=function(){ for(var i=0;i<btns.length;i++){ btns[i].style.backgroundColor=""; } this.style.backgroundColor="red"; } }</script></body>
2.8 tab栏切换
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .Box { 8 width: 240px; 9 border: 1px solid #000;10 margin: 100px auto;11 padding: 20px;12 }13 14 .con {15 width: 100%;16 height: 200px;17 background-color: #cccccc;18 border: 1px solid #000;19 margin-top: 10px;20 display: none;21 }22 23 .current {24 background-color: pink;25 }26 </style>27 </head>28 <body>29 <div class="Box" id="box">30 <button class="current">按钮1</button>31 <button>按钮2</button>32 <button>按钮3</button>33 <button>按钮4</button>34 <div class="con" style="display:block">内容1</div>35 <div class="con">内容2</div>36 <div class="con">内容3</div>37 <div class="con">内容4</div>38 </div>39 <script>40 var btns = document.getElementsByTagName("button");41 var box = document.getElementById("box");42 var cons = box.getElementsByTagName("div");43 for (var i = 0; i < btns.length; i++) {44 btns[i].index = i;45 btns[i].onclick = function () {46 for (var j = 0; j < btns.length; j++) {47 btns[j].className = "";48 cons[j].style.display="none";49 }50 this.className = "current";51 cons[this.index].style.display="block";52 }53 }54 </script>55 </body>56 </html>
2.9 点餐
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 .wrap { 13 width: 300px; 14 margin: 100px auto; 15 } 16 17 table { 18 border-collapse: collapse; /*倒塌，合并边框*/ 19 border-spacing: 0; /*边框间隔*/ 20 border: 1px solid #c0c0c0; 21 width: 300px; 22 } 23 24 th, td { 25 border: 1px solid #d0d0d0; 26 padding: 10px; 27 } 28 29 th { 30 background-color: #09c; 31 font: bold 16px "微软雅黑"; 32 color: #fff; 33 } 34 35 td { 36 font: 14px "微软雅黑"; 37 } 38 39 tbody tr { 40 background-color: #f0f0f0; 41 } 42 43 tbody tr:hover { 44 cursor: pointer; 45 background-color: #fafafa; 46 } 47 </style> 48 </head> 49 <body> 50 <div class="wrap"> 51 <table> 52 <thead> 53 <tr> 54 <th> 55 <input type="checkbox" name="" id="j_cbAll"/> 56 </th> 57 <th>菜名</th> 58 <th>饭店</th> 59 </tr> 60 </thead> 61 <tbody id="j_tb"> 62 <tr> 63 <td> 64 <input type="checkbox"/> 65 </td> 66 <td>红烧肉</td> 67 <td>田老师</td> 68 </tr> 69 <tr> 70 <td> 71 <input type="checkbox"/> 72 </td> 73 <td>西红柿炒鸡蛋</td> 74 <td>田老师</td> 75 </tr> 76 <tr> 77 <td> 78 <input type="checkbox"/> 79 </td> 80 <td>红烧狮子头</td> 81 <td>田老师</td> 82 </tr> 83 <tr> 84 <td> 85 <input type="checkbox"/> 86 </td> 87 <td>日式肥牛</td> 88 <td>田老师</td> 89 </tr> 90 </tbody> 91 </table> 92 </div> 93 <script> 94 var btnAll = document.getElementById("j_cbAll"); 95 var btnTb = document.getElementById("j_tb"); 96 var inputs = btnTb.getElementsByTagName("input"); 97 btnAll.onclick = function () { 98 if (btnAll.checked) { 99 for (var i = 0; i < inputs.length; i++) {100 inputs[i].checked = true;101 }102 } else {103 for (var i = 0; i < inputs.length; i++) {104 inputs[i].checked = false;105 }106 }107 }108 for (var j = 0; j < inputs.length; j++) {109 inputs[j].onclick = function () {110 var isBtnAll = true;111 for (var k = 0; k < inputs.length; k++) {112 if (!inputs[k].checked) {113 isBtnAll = false;114 break;115 }116 }117 btnAll.checked = isBtnAll;118 }119 }120 121 </script>122 </body>123 </html>
DOM day2
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。