zoukankan      html  css  js  c++  java
  • 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样式操作
  • 相关阅读:
    Ethical Hacking
    Ethical Hacking
    Python Ethical Hacking
    Python Ethical Hacking
    Python Ethical Hacking
    食物链 POJ
    Wireless Network POJ
    Candies POJ
    畅通工程再续 HDU
    Jungle Roads HDU
  • 原文地址:https://www.cnblogs.com/ujq3/p/7496079.html
Copyright © 2011-2022 走看看