DOM day2

时间：2016-09-21 21:36:28 阅读：195 评论：0 收藏：0 [点我收藏+]

标签：

一、获取标签内的文本内容

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="请输入..." 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="请输入...." id="d1"/>
 3 <script>
 4     var txt = document.getElementById("d1");
 5     txt.onfocus = function () {
 6         if (txt.value == "请输入....") {
 7             txt.value = "";
 8         } else {
 9             txt.value = txt.value;
10         }
11     }
12     txt.onblur = function () {
13         if (txt.value == "") {
14             txt.value = "请输入....";
15         } else {
16             txt.value = 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="给文本框赋值" id="btnSet"/>
13 <input type="button" value="获得文本框的值" 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].value = "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="登陆"/>
 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="全选"/>
11 <input type="button" id="btnNoSelect" value="全不选"/>
12 <input type="button" id="btnReverse" value="反选"/>
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="按钮"/>
<input type="button" value="按钮"/>
<input type="button" value="按钮"/>
<input type="button" value="按钮"/>
<input type="button" value="按钮"/>
<input type="button" value="按钮"/>
<input type="button" value="按钮"/>
<input type="button" value="按钮"/>
<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

标签：

原文地址：http://www.cnblogs.com/lxyc/p/5893999.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行