本文来自百度前端技术学院的基础任务,任务一:零基础JavaScript编码(一),记录了我在完成任务中的思考。引用了阮一峰的JavaScript标准参考教程
任务详情不再赘述。任务功能是:用户可以在输入框中输入任何内容,点击“确认填写”按钮后,用户输入的内容会显示在“您输入的值是”文字的右边。
实现思路是
给按钮button绑定一个点击事件
在事件处理函数中,获取aqi-input输入的值,并显示在aqi-display中
知识
1、DOM模型
参考DOM模型
DOM(Document Object Model)是JS操作网页的接口。
DOM是节点树(DOM的最小组成单位是节点)。
节点的类型有7种,document、element类、attribute类等。
所有节点,都是浏览器内置Node对象的实例。
2、事件绑定:指定监听函数
DOM提供三种方法,可以用来为事件绑定监听函数。详情及比较
- HTML标签的on-属性
onclick = "handle()"
- Element节点的on-属性
button.onload = handle;
- DOM事件操作EventTarget接口的addEventListener()
js_button.addEventListener('click',handle);
3、获取输入的值
获取<input>的value的值
,参考属性的操作有以下三种方法。
- HTMLElement的所有属性
Element.attributes['nodeName'].nodeValue
返回动态的Attribute节点对象,例如这里js-input.attributes['value'].value
- HTMLElement的标准属性
Element.nodeName
返回值是js的各种类型。例如这里的js-input.value
。要避开for、class保留字 - Element属性操作的标准方法
Element.getAttribute('nodeName')
例如这里的js-input.getAttribute('value')
Node.innerText
帮助记忆:读写一般都用
字符串
的形式。除了HTMLElement的标准属性。
一般没有该属性或节点对象,就是null。
4、改变显示:节点的属性value、innerHTML和textContent
改变<span></span>中的Text
,参考DOM模型有以下四种办法。
这里用Node.textContent
。
Node.nodeValue
只有Text节点、Comment节点有值,并且值等于Node.textContent
Node.textContent
返回所有文本内容,自动忽略当前节点内部的HTML标签。赋值时也是忽略标签。Element.innerHTML
返回该元素包含的 HTML 代码。赋值时HTML标签被解析为节点。Element.outerHTML
返回该元素节点的所有HTML代码,包括它自身和包含的所有子元素。赋值时HTML标签被解析为节点。
完成题目
1、题目提示
label与表单元素:隐式联系和显式联系id
<label>请输入北京今天空气质量:<input id="aqi-input" type="text"></label>
<label for="aqi-input">请输入北京今天空气质量:</label>
<input id="aqi-input" type="text">
立即执行的函数表达式
通常情况下,对匿名函数使用这种“立即执行的函数表达式(Immediately-Invoked Function Expression)”。
它的目的有两个:
一是不必为函数命名,避免了污染全局变量;
二是IIFE内部形成了一个单独的作用域,可以封装一些外部无法读取的私有变量。(可以访问外部的变量)(又避免了内外变量命名冲突)
2、选取节点
参照根据id找元素,这里使用更高效document.getElementById('id')
document.getElementById('id')
document.querySelector('#id')
CSS选择器
引申Nodelist
节点集合
引申HTMLCollection
Element节点集合,都是动态的。
document.getElementsByTagName('input')
document.getElementsByClassName('float')
HTMLCollection.NodeId/NodeName
HTMLCollection.item(0)
HTMLCollection.namedItem('id/name')
3、提交作业3版
1 HTML标签的onclick属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>js01</title>
</head>
<body>
<!-- 前后位置都可以 -->
<!-- 不能使用立即执行表达式 -->
<script type="text/javascript">
function handle() {
var input_value = document.getElementById('aqi-input');
var aqi_input = document.getElementById('aqi-display');
aqi_input.innerHTML = input_value.value;
};
</script>
<label>请输入北京今天空气质量:<input id="aqi-input" type="text"></label>
<button id="button" onclick="handle()">确认填写</button>
<div id="test_textContent">您输入的值是:<span id="aqi-display">尚无录入</span></div>
</body>
</html>
2 Element的onclick属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>js01</title>
</head>
<body>
<label>请输入北京今天空气质量:<input id="aqi-input" type="text"></label>
<button id="button">确认填写</button>
<div id="test_textContent">您输入的值是:<span id="aqi-display">尚无录入</span></div>
<!-- 必须写在body后位 -->
<script type="text/javascript">
(function() {
var js_button = document.getElementById('button');
var input_value = document.getElementById('aqi-input');
var aqi_input = document.getElementById('aqi-display');
js_button.onclick = handle;
function handle(){
aqi_input.innerHTML = input_value.value;
}
})();
</script>
</body>
</html>
3 DOM事件操作:绑定监听
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>js01</title>
</head>
<body>
<label>请输入北京今天空气质量:<input id="aqi-input" type="text"></label>
<button id="button">确认填写</button>
<div id="test_textContent">您输入的值是:<span id="aqi-display">尚无录入</span></div>
<!-- 必须写在body后位 -->
<script type="text/javascript">
(function() {
var js_input = document.getElementById('aqi-input');
var js_button = document.getElementById('button');
var js_span = document.getElementById('aqi-display');
js_button.addEventListener('click',handle);
function handle(){
js_span.textContent = js_input.value;
}
})();
</script>
</body>
</html>