本文介绍了JavaScript的基本概念，包括其应用场景和组成部分。接着深入探讨了JS中的DOM操作，包括节点查找、创建和修改的方法。最后，通过一个实际例子展示了如何结合DOM操作从API接口加载并显示数据。
js中的DOM操作与通过API接口加载数据的实例
一、JavaScript简介
1.概述
JavaScript是一种编程语言，可以进行流程控制。Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java，但两者其实毫无关系。
2.应用场景
JavaScript 发展到现在几乎无所不能，目前JavaScript的应用场景有：
1.网页特效
2.服务端开发(Node.js)
3.命令行工具(Node.js)
4.桌面程序(Electron)
5.App(Cordova)
6.控制硬件-物联网(Ruff)
7.游戏开发(cocos2d-js)等等
在HTML页面中，JavaScript是负责控制网页内容，实现交互式行为，给网页增加动态的效果。
3.组成
JavaScript由三部分构成 ——ECMAScript(定义了JavaScript的语法规范)、BOM - 浏览器对象模型(通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等)、DOM - 文档对象模型(DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作)
二、JS中的DOM操作
节点的查找
通过DOM操作查找和获取节点的常见方式如下:
document.getElementById ：根据ID查找元素，大小写敏感，如果有多个结果，只返回第一个；
document.getElementsByClassName ：根据类名查找元素，多个类名用空格分隔。
document.getElementsByTagName ：根据标签查找元素
document.getElementsByName ：根据元素的name属性查找，返回一个 NodeList 。
document.querySelector ：返回单个Node，如果匹配到多个结果，只返回第一个。
document.querySelectorAll ：返回一个 NodeList 。
节点的创建
使用 document.createElement(‘div’) 操作即可创造一个新的
节点的修改
1.appendChild
在指定父标签下添加新的节点
parent.appendChild(child);
parent代表父节点，child代表你要添加进去的子节点(可以是我们通过createElement创造的新的节点)
2.removeChild
removeChild用于删除指定的子节点并返回子节点，语法：
let deletedChild = parent.removeChild(node);
3.给节点元素设置属性
通过 节点.属性=‘值’ 的方式添加或设置元素例如,我们要为某个节点添加颜色属性:
<span id="a">hello world</span>
<script type="text/javascript">
let node=document.getElementById("a");
node.style.color="red";
</script>
三、通过API加载数据(结合DOM操作)
假设我现在我们要实现这样一个加载数据的网页界面，通过向搜索框输入关键词(垃圾的类别:如眼镜、电脑等)，点击搜索按钮，来展示相关垃圾的信息搜索结果，:
一开始是没有加载数据的，输入关键词，点击搜索后如下:
搜索结果的数据是通过调用"天行数据"网提供的接口来获取的，我们要做的就是把获取的数据添加渲染进整个页面。完整的代码如下所示（我的CSS样式表写的很low，请自动忽略，重点掌握script的内容，详细注释已经写上了）:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset
最低0.47元/天 解锁文章
扫一扫
490
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
