[JS]动态添加内容
选自百度前端学院 任务十四:零基础JavaScript编码(二)
学习目的
- 学习JavaScript中的if判断语法,for循环语法
- 学习JavaScript中的数组对象
- 学习如何读取、处理数据,并动态创建、修改DOM中的内容
学习任务
参考以下示例代码,页面加载后,将提供的空气质量数据数组,按照某种逻辑(比如空气质量大于60)进行过滤筛选,最后将符合条件的数据按照一定的格式要求显示在网页上
1 |
|
任务分析
初看题目,主要是两个方面的问题:一个是读取列表并过滤排序;另一个是将合适数据数据显示在 <ul id="aqi-list"></ul>
里。
过滤和排序
JS数组过滤可以用 Array filter() 方法。题目要求是空气质量指数大于60的城市,所以 fitlter()
方法如下:
1 | aqiData.filter(function(value){ |
数组排序可以使用简单的冒泡排序,为了简化代码,可以用 JavaScript sort() 方法。题目要求是从高到低,所以 sort()
所用里用的函数应该是 return b[1]-a[1];
。
1 | array.sort(function(a,b){ |
获取 DOM 元素对象并设置元素的内容
获取DOM元素对象的方法有多样,常用的有 getElementById()
、 getElementsByName()
、 getElementsByTagName()
。
- getElementById()
通过标签id获取,如本题目获取<ul id="aqi-list">
对象:document.getElementById("aqi-list")
。 - document.getElementsByName()
要注意的是Elements是复数的,因为 Documnent中每一个元素的ID是唯一的,但NAME却可以重复 。该方法所获得的是对象数组,可用数组获取元素的方法获取某一个对象,如:getElementsByName("docname")[0]
即访问第一个对象。 - getElementsByTagName()
通过标签名来获取的,同getElementsByName()
一样,获取的是对象数组,本题中只有一对<ul>
标签,所以可以用document.getElementsByTagName("ul")[0]
获得与document.getElementById("aqi-list")
同样的效果。
任务结果和代码
open::任务结果
污染城市列表
显示完整代码
1 |
|
评论
匿名评论隐私政策
✅ 你无需删除空行,直接评论以获取最佳展示效果