原生js深刻理解系列(一)--- 對js原生選擇器的認識

//源碼----startjavascript

<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>html

//源碼----endjava

總結:git

本人的一個百度的課程題目,實現的是輸入數據顯示在其餘地方。這裏涉及的知識有。
一、事件監聽。addEventListener('click',function(){})
二、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瀏覽器)
六、能夠使用innerHTML取得包含HTML標籤的內容後,再用正則表達式去除HTML標籤
正則去標籤方法  var content = document.getElementById("p1");  
            alert(content.innerHTML.replace(/& lt;.+?>/gim,'')); 
七、使用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
本人的本篇博客的csdn連接地址:https://blog.csdn.net/weixin_40766882/article/details/87101577github

歡迎你們交流,斧正!正則表達式

相關文章
相關標籤/搜索