标签：关键字 auto 示例 nbsp lang blur har display var
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>
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="width: 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>
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>
标签：关键字 auto 示例 nbsp lang blur har display var
原文地址：http://www.cnblogs.com/ujq3/p/7496079.html
