對js原生選擇器的認識
阿新 • • 發佈：2018-11-27
//原始碼----start
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>IFE JavaScript Task 01</title> | |
| </head> | |
| <body> | |
| <label>請輸入北京今天空氣質量：<input id="aqi-input" class="add" type="text" value="aa" /></label> | |
| <button id="button">確認填寫</button> | |
| <div>您輸入的值是：<span id="aqi-display">尚無錄入</span></div> | |
| <script type="text/javascript"> | |
| (function() { | |
| /* | |
| 在註釋下方寫下程式碼 | |
| 給按鈕button繫結一個點選事件 | |
| 在事件處理函式中 | |
| 獲取aqi-input輸入的值，並顯示在aqi-display中 | |
| */ | |
| var _event = document.getElementById('button'); | |
| // var _input =document.getElementById('aqi-input'); | |
| var _input=document.querySelector('#aqi-input'); | |
| //querySelector選擇器js原生的有類似於和jQuery的$一樣強大的選擇繫結選擇器的功能。document.querySelector("p")//取第一個P標籤dom,document.querySelector(".app")//取第一個class為app的dom | |
| console.log(_input); | |
| _event.addEventListener('click',function(){ | |
| debugger | |
| console.log(_input); | |
| //_input.getAttribute('value')//得到的值都是aa他是dom屬性值，屬性值不可變，HTML值 | |
| //次一點的實現 innerHTML是符合W3C標準的屬性，而innerText只適用於IE瀏覽器（現在也適應chrome瀏覽器） | |
| // document.getElementById('aqi-display').innerText=_input.value; | |
| document.getElementById('aqi-display').innerHTML=_input.value; | |
| }) | |
| })(); | |
| </script> | |
| </body> | |
| </html> |
//原始碼----end
總結：
本人的一個百度的課程題目，實現的是輸入資料顯示在其他地方。這裡涉及的知識有。
1、事件監聽。addEventListener('click',function(){})
2、js獲取都dom元素，document.getElementById('aa')//獲取id為aa的dom
document.getElementsByClassName('bb');//獲取.class為bb的dom
document.getElementsByTagName('p');//獲取p標籤；
3.使用querySelector,querySelector選擇器js原生的有類似於和jQuery的$一樣強大的選擇繫結選擇器的功能。
document.querySelector("p")//取第一個P標籤dom,
document.querySelector(".app")//取第一個class為app的dom
document.querySelector("#apps")//取id為apps的dom
4.// var _input =document.getElementById('aqi-input');
var _input=document.querySelector('#aqi-input');
_input.getAttribute('value')//得到的值都是aa他是dom屬性值，屬性值不可變；_input.value取到的是HTML值，是可變的。
5.innerHTML和innerText的區別
innerHTML是符合W3C標準的屬性，而innerText只適用於IE瀏覽器（現在也適應chrome瀏覽器）
6、可以使用innerHTML取得包含HTML標籤的內容後，再用正則表示式去除HTML標籤
正則去標籤方法 var content = document.getElementById("p1");
alert(content.innerHTML.replace(/& lt;.+?>/gim,''));
7、使用outerHTML和outerText 與innerHTML 、innerText一一對應，outerHTML 是element DOM介面的 outerHTML屬性, 獲取描述包括其後代的元素的序列化HTML片段。它可以用從給定字串解析的節點設定為替換元素。使用outerHTML替換掉HTML元素，被替換的元素不顯示但是仍然在記憶體中。
8.label 和input的妙用， input的id和label的for設定為同樣的值可以使點選label裡的內容觸發input的事件，使用label與input可以實現類似原生的自動方格密碼輸入。
本人的本篇部落格的github連結地址：https://github.com/Mrliu1/newife/tree/master/blogOne
歡迎大家交流，斧正！