JS事件&DOM初体验

来源：互联网发布：目标知乎编辑：程序博客网时间：2024/05/25 23:59

本文来自百度前端技术学院的基础任务，任务一：零基础JavaScript编码（一），记录了我在完成任务中的思考。引用了阮一峰的JavaScript标准参考教程

任务详情不再赘述。任务功能是：用户可以在输入框中输入任何内容，点击“确认填写”按钮后，用户输入的内容会显示在“您输入的值是”文字的右边。

实现思路是
给按钮button绑定一个点击事件
在事件处理函数中，获取aqi-input输入的值，并显示在aqi-display中

知识

1、DOM模型

参考DOM模型
DOM（Document Object Model）是JS操作网页的接口。
DOM是节点树（DOM的最小组成单位是节点）。
节点的类型有7种，document、element类、attribute类等。
所有节点，都是浏览器内置Node对象的实例。

理解DOM和各类节点

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

立即执行的函数表达式

理解和使用( function(){…} )()

通常情况下，对匿名函数使用这种“立即执行的函数表达式（Immediately-Invoked Function Expression）”。
它的目的有两个：
一是不必为函数命名，避免了污染全局变量；
二是IIFE内部形成了一个单独的作用域，可以封装一些外部无法读取的私有变量。（可以访问外部的变量）（又避免了内外变量命名冲突）

2、选取节点

参照根据id找元素，这里使用更高效document.getElementById('id')

document.getElementById('id')
document.querySelector('#id') CSS选择器

引申Nodelist节点集合

引申HTMLCollectionElement节点集合，都是动态的。

document.getElementsByTagName('input')document.getElementsByClassName('float')HTMLCollection.NodeId/NodeNameHTMLCollection.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>

知识
- 1DOM模型
- 2事件绑定指定监听函数
- 3获取输入的值
- 4改变显示节点的属性valueinnerHTML和textContent
完成题目
- 1题目提示
  - label与表单元素隐式联系和显式联系id
  - 立即执行的函数表达式
- 2选取节点
- 3提交作业3版
  - HTML标签的onclick属性
  - Element的onclick属性
  - DOM事件操作绑定监听
目录

0 0