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="请输入..." 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>
时间： 2024-10-24 22:54:59

DOM day2的相关文章

虚拟DOM

DOM(Document Object Model)是很慢的,其元素非常庞大,页面的性能问题鲜有由JS引起的,大部分都是由DOM操作引起的.如果对前端工作进行抽象的话,主要就是维护状态和更新视图:而更新视图和维护状态都需要DOM操作. 在jQuery出现以前,我们直接操作DOM结构,这种方法复杂度高,兼容性也较差:有了jQuery强大的选择器以及高度封装的API,我们可以更方便的操作DOM,jQuery帮我们处理兼容性问题,同时也使DOM操作变得简单:MVVM使用数据双向绑定,使得我们完全不需要

JS学习--DOM

1.概念 文档对象模型DOM,定义访问和处理HTML文档的标准方法.DOM将HTML呈现为带有元素.属性和文本的树结构(节点树). 2.document.getElementById("id")--获取的是一个元素对象. documment.getElementById("id").innerHTML--才可获取其中的内容. 3.HTML样式 Object.style.property=new style;部分属性: 如: mychar.style.color=&q

高性能WEB开发：DOM编程

我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵.有个贴切的比喻,把DOM和Javascript(这里指ECMscript)各自想象为一个岛屿,它们之间用收费桥梁连接,ECMAscript每次访问DOM,都要途径这座桥,并交纳"过桥费",访问DOM的次数越多,费用也就越高.因此,推荐的做法是尽量减少过桥的次数,努力待在ECMAscript岛上.我们不可能不用DOM的接口,那么,怎样才能提高程序的效率? 1.DOM访问与修改 访问DOM元素是

dom方法insertAfter的实现

在dom的原生api中,只用insertBefore,没有insertAfter,借助原有的api,可以模拟一个insterAfter. function insterAfter(newElement,targetElement){ var parent = targetElement.parentNode; if(parent.lastChild == targetElement){ parent.appendChild(newElement); } else{ parent.insertBe

第十章—DOM(0)—NODE类型

DOM1定义了一个node接口,该接口由DOM的所有节点类型实现. 所有的节点都存在这样或那样的关系.在HTML中,head,body可以看出是html的子元素,html是head,body的父元素,而head,body互为同胞元素. 这里要注意一个概念:nodeList 输出: 如下例子: 1 <div id="myDiv"> </div><!-- 此处有空格 --> 2 <script> 3 var div = document.ge

对dom的初步了解

什么叫DOM,DOM是文档对象模型Document Object Model DOM树 : 根结点(document) 父结点(parentNode) 子结点(childNodes) 兄弟结点 兄弟结点 sibling) (sibling) DOM在HTML文档中常见的几种结点类型:1.DOCUMENT_NODE (document)文档根结点类型,该枚举型的值是9. 2.ELEMENT_NODE (element)元素结点类型,该枚举型的值是1.上文中的html, body, div这些结点都

DOM基础（一）

在我们刚刚学JavaScript的时候,就应该听说过,JavaScript是由三部分组成的.分别是ECMAScript,DOM和BOM组成的.ECMAScript是JavaScript的核心,它描述了JavaScript的基本语法和对象,DOM则是描述了处理网页内容的方法和接口,而BOM描述了与浏览器进行交互的方法和接口.在我之前的关于JS入门系列的文章里,就讲了许多关于JavaScript的基本语法和对象,也就是ECMAScript.而在这个DOM系列的文章里,我将会介绍一些关于DOM的基础.

python2.0_s12_day13_javascript&amp;Dom&amp;jQuery

今天主要内容:JavaScriptDomjQuery http://www.cnblogs.com/wupeiqi/articles/5369773.html 今天主要内容大致了解:javascript 1.首先要知道 JavaScript 和 Java 没有半毛钱关系. 2.JavaScript 和python语言 一样 它也是一门语言.对于python语言需要用python解释器解释.而javascript的解释器是浏览器. 3.javascript 能实现什么.javascript就是让我

BOM和DOM

BOM 浏览器对象模型 BOM中的对象 Window对象:是指窗口对象,可通过Window对象的属性和方法控制窗口,例如打开或关闭一个窗口 History对象:指历史页面,通过History对象的属性和方法实现前进后退的功能 Location对象:指地址栏,通过属性的方法控制页面的跳转 Document对象:指网页中的内容,通过属性和方法控制页面元素 1.Window对象的常用方法: open(); close(); alert(); prompt(); confim(); setTimeout