原生js深入理解系列（一）--- 对js原生选择器的认识-优快云博客

本文通过一个简单的空气质量输入显示案例，详细介绍了JavaScript中事件监听的使用，包括addEventListener的绑定，以及如何通过DOM操作如getElementById和querySelector来读取和更新页面元素。同时对比了innerHTML和innerText的差异，展示了label和input的巧妙结合。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

//源码----start

<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
本人的本篇博客的csdn链接地址：https://blog.youkuaiyun.com/weixin_40766882/article/details/87101577

欢迎大家交流，斧正！

转载于:https://my.oschina.net/u/2542841/blog/2878833