DOM

  1 <!DOCTYPE html>
  2 <!-- Dom选择器以及内容文本操作1-->
  3 <html lang="en">
  4 <head>
  5     <meta charset="UTF-8">
  6     <title>Title</title>
  7 </head>
  8 <body>
  9     <div>
 10     DOM
 11         查找
 12             直接查找
 13                 var obj = document.getElementById('i1')
 14             间接查找
 15                 文件内容操作：
 16                     innerText  仅仅是文本
 17                     innerHTML  全部内容
 18                     value
 19                         input  value 获取当前标签中的值
 20                         select   获取选择中的value值(selectedIndex)
 21                         textarea value 获取当前标签中的值
 22     </div>
 23 
 24 
 25     <div id="i1">
 26         老男孩
 27         <a>谷歌</a>
 28     </div>
 29 
 30     <script>
 31         obj = document.getElementById('i1');
 32         obj.innerText
 33 
 34     </script>
 35 
 36     <div id="i2">
 37         老男孩
 38         <a>谷 <span>歌</span>  </a>
 39     </div>
 40     <script>
 41         obj = document.getElementById('i2');
 42         obj.innerHTML
 43     </script>
 44 
 45 
 46     <script>
 47         obj.innerHTML = '李杰';
 48         obj.innerText = '李杰1';
 49 
 50         obj.innerText ="<a href ='http;//www.oldboydu.com'>老男孩</a>"
 51         obj.innerHTML ="<a href ='http;//www.oldboydu.com'>老男孩</a>"
 52     </script>
 53 
 54 
 55     <div id="i3">
 56         老男孩
 57         <a>谷 <span>歌</span>  </a>
 58     </div>
 59     <input type="text" id="i4">
 60     <script>
 61         obj = document.getElementById('i3');
 62         obj.Value
 63         obj.Value= 'sadsafsd'
 64     </script>
 65 
 66 
 67     <div id="i5">
 68         老男孩
 69         <a>谷 <span>歌</span>  </a>
 70     </div>
 71     <input type="text" id="i6">
 72     <select id="i7">
 73         <option value="11">  北京1 </option>
 74         <option value="12">  北京2 </option>
 75         <option value="13">  北京3 </option>
 76     </select>
 77     <script>
 78         obj = document.getElementById('i3');
 79         obj.value
 80         obj.value = '12'
 81         obj.selectedIndex
 82         obj.selectedIndex = 2
 83         obj.selectedIndex = 1
 84     </script>
 85 
 86     <div id="i8">
 87         老男孩
 88         <a>谷 <span>歌</span>  </a>
 89     </div>
 90     <input type="text" id="i9">
 91     <select id="i10">
 92         <option value="11">  北京1 </option>
 93         <option value="12">  北京2 </option>
 94         <option value="13">  北京3 </option>
 95     </select>
 96     <textarea id="i11"></textarea>
 97     <script>
 98         obj = document.getElementById('i11');
 99         obj.value
100         obj.value = 'dgdgcxg'
101     </script>
102 
103 </body>
104 </html>

Dom选择器以及内容文本操作1

 1 <!DOCTYPE html>
 2 <!-- Dom选择器以及内容文本操作2搜索框示例-->
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7 </head>
 8 <body>
 9     <div>搜索框</div>
10 
11     <div style=" 600px;margin:0 auto;">
12         <input  id='i1' onfocus=" Focus();" onblur="Blur();" type="text" value="请输入关键字"/>
13 
14 
15         <input type="text" placeholder=" 新版本才可以用，不推荐使用"/>
16     </div>
17     <script>
18         function Focus() {
19             //console.log(1);
20             var tag = document.getElementById('i1');
21             var val =tag.value;
22             if(val == '请输入关键字'){
23                 tag.value = '';
24                                         }
25 
26                             }
27         function Blur() {
28             //console.log(2);
29             var tag = document.getElementById('i1');
30             var val =tag.value;
31             if(val.length==0){
32                 tag.value = '请输入关键字';
33                                   }
34 
35                              }
36 
37 
38 
39     </script>
40 </body>
41 </html>

Dom选择器以及内容文本操作2搜索框示例

 1 <!DOCTYPE html>
 2 <!--Dom样式操作-->
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7 </head>
 8 <body>
 9     <div>
10     Dom样式操作:
11         className
12         classList
13             classList.add
14             classList.remove
15         <style>
16             .c1{
17                 font-size: 16px;
18                 color:red;
19                     }
20         </style>
21         <div class = 'c1 c2' style="font-size: 16px;background-color: white"> </div>
22         obj.style.fontSize = '16px';
23         obj.style.backgroundcolor = 'red';
24         .style.color = 'red'
25 
26     </div>
27 
28 
29 </body>
30 </html>

Dom样式操作