文章目录

什么WebAPI?
- 获取元素
- - querySelector
  - querySelectorAll
- 事件
- - 事件三要素
- 操作元素
- - 获取修改元素的内容
  - 操作元素的属性
  - 实现全选功能
  - 操作元素样式
  - 实现开关灯
  - 操作节点
  - - 新增节点

什么WebAPI?

上篇文章中有提到, JS分为三个部分:

ECMAScript: 基础语法部分
DOM API: 操作页面结构
BOM API: 操作浏览器
WebAPI中就包含了DOM和BOM
而API本质上就是一些现成的函数和方法, 便于人们直接使用.

获取元素

querySelector

使用querySelector可以更精确快捷的获取到元素的对象.

<body><div id="first">hello</div><script>let div = document.querySelector("#first");console.log(div);</script>
</body>

querySelectorAll

使用querySelectorAll可以选中符合条件的所有元素

<body><div id="first">hello</div><div class="h">nihao</div><script>let div = document.querySelectorAll("div");console.log(div);</script>
</body>

事件

用户对于页面的一些操作(选择, 修改, 查询等)操作都会再浏览器中产生一个个事件, 这些事件会被JS获取到, 从而可以进行交互操作

事件三要素

事件源: 哪个元素触发的
事件类型: 是点击,选择,还是修改
事件处理程序: 如何处理对应的事件, 往往是一个回调函数
eg:

<body><button class="btn">点击我</button><script>let button = document.querySelector(".btn")button.onclick = function() {alert("hello");}</script>
</body>

1.button就是事件源头
2.点击就是事件的类型
3.function这个匿名函数就是事件的处理程序
4. button.onclick = function() 这个操作称为注册事件/绑定事件

另一种写法:

<body><button class="btn" onclick="f()">点击我</button><script>function f() {alert("hello");}</script>
</body>

操作元素

操作就是获取并修改元素
我们可以修改元素的内容, 元素属性, 和样式属性.

获取修改元素的内容

1.innerText
通过元素的innerHtml属性来实现
innerHtml属性表示一个节点及其后代的“渲染”文本内容

获取:

<body><div id="screen">hello world</div><button id="btn">这是一个按钮</button><script>let btn = document.querySelector("#btn");btn.onclick = function () {let screen = document.querySelector("#screen");console.log(screen.innerText);};</script>
</body>

修改:

<body><div id="screen">hello world</div><button id="btn">这是一个按钮</button><script>let btn = document.querySelector("#btn");btn.onclick = function () {let screen = document.querySelector("#screen");screen.innerText = "nihao"console.log(screen.innerText);};</script>
</body>

修改后代的文本内容

<body><div><span>hello world</span><span>hello world</span></div><script>var div = document.querySelector('div');// 读取 div 内部内容console.log(div.innerText);// 修改 div 内部内容, 界面上就会同步修改div.innerText = 'hello js <span>hello js</span>';</script>
</body>

我们可以看到, div内部的文本内容发生了变化

2.innerHtml
innerHTML 属性设置或获取HTML语法表示的元素的后代

<body><div><span>hello world</span><span>hello world</span></div><script>var div = document.querySelector('div');// 读取页面内容console.log(div.innerHTML);// 修改页面内容div.innerHTML = '<span>hello js</span>'</script>
</body>

可以看到 innerHTML 不光能获取到页面的 html 结构, 同时也能修改结构. 并且获取到的内容保留的空格和换行.

操作元素的属性

通过querySelector操作元素的属性
我们来实现点击图片切换图片的功能:

<body><img src="..\image\a5107469714be407dcd267fda2f0e77c.jpeg" alt="" id="img"><script>let img = document.querySelector("#img");img.onclick = function() {console.log(img.src);if(img.src.indexOf("a5107469714be407dcd267fda2f0e77c") >= 0){img.src = '..\\image\\afd421e401275a37fc15f9f77805f530.jpeg';}else if(img.src.indexOf("afd421e401275a37fc15f9f77805f530") >= 0){img.src = "..\\image\\a5107469714be407dcd267fda2f0e77c.jpeg";}}</script></body>

未点击照片之前:

点击切换后的照片:

实现全选功能

点击全选实现checkbox全选的功能

<body><input type="checkbox" id="all">小孩子才做选择, 我全都要<br><input type="checkbox" class="checks"> 草莓味<br><input type="checkbox" class="checks"> 芒果味<br><input type="checkbox" class="checks"> 苹果味<br><input type="checkbox" class="checks"> 荔枝味<br><script>let all = document.querySelector("#all");let checks = document.querySelectorAll(".checks");all.onclick = function () {for (let i = 0; i < checks.length; i++) {checks[i].checked = all.checked;}}for (let i = 0; i < checks.length; i++) {checks[i].onclick = function () {all.checked = checkCh(checks);}}function checkCh(checks) {//判断是不是所有的 ch 都被选中for (let i = 0; i < checks.length; i++) {if (!checks[i].checked) {//只要有一个没被选中，就让 all 是未选中状态return '';}}//遍历一圈，发现都被选中了，就让 all 也是选中状态return 'checked';}</script>
</body>

点击第一项就能实现全选

操作元素样式

<body><div style="color: red;">文本内容</div><script>let div = document.querySelector("div");div.onclick = function() {div.style.color = "green"; }</script>    </body>

这是我们点击文本, 就可以实现颜色的改变

实现开关灯

<body><style>.light {background-color: white;color: black;}.dark {background-color: black;color: white;}</style><div class="light">文本显示</div><button>闭灯</button><script>let div = document.querySelector("div");let button = document.querySelector("button");button.onclick = function() {if(div.className == "light"){div.className = "dark";button.innerText = "开灯";}else if(div.className == "dark"){div.className = "light";button.innerText = "闭灯";}}</script>

操作节点

此处讲新增/删除节点,HTML 页面是显示的 DOM 树的内容. 在创建完节点之后, 要挂在 DOM 树上才可以显示. 通过 appendChild 来挂到树上:

新增节点

使用appendChild新增节点

创建元素节点
讲元素节点添加到DOM树中

<body><div class="container"></div><script>//1.创建新的节点let newDiv = document.createElement('div');newDiv.className = "one";newDiv.innerText = "hello";console.log(newDiv);//2. 把节点挂在dom树上let container = document.querySelector(".container");container.appendChild(newDiv);</script></body>

前端三刺客---JS(WebAPI)相关推荐

前端三刺客---JS(基础语法)
文章目录 JS初识 JavaScript和HTML和CSS的关系 JavaScript代码运行过程 JavaScript的组成 JS 第一个Hello World JavaScript的书写格式 JS ...
前端三刺客----HTML
文章目录编写HTML的预知开发工具的选择代码的必要格式及其意义开发者工具 HTML常见的标签注释标签标题标签段落标签p 换行标签格式化标签特殊字符图片标签超链接表格标签列表标 ...
前端三刺客---CSS
文章目录 CSS 基本语法规范 CSS的引入方式选择器选择器种类基础选择器 1.标签选择器 2.类选择器 3.id选择器 4.通配符选择器复合选择器后代选择器子选择器并集选择器伪类选择 ...
前端点滴（JS进阶）（三）---- JavaScript 两链一包
前端点滴(JS进阶)(三)----倾尽所有一.作用域链 1. 作用域的概念 2. 作用域链二.面向对象编程 1. 知识回顾 2. 定义对象 (1)new 内置对象 (2)直接量语法 (3)Es5 ...
前端html继承的方式,好程序员web前端教程之JS继承实现方式解析
好程序员 web 前端教程之JS 继承实现方式解析 , JS 是 Web 前端三要素之一,也是每一个初学前端的同学遭遇的第一条拦路虎.很多人反应 JS 学习不易,各类知识点概念及应用常常让人抓耳挠腮 ...
前端知识点总结——JS高级（持续更新中）
前端知识点总结--JS高级(持续更新中) 1.字符串什么是: 连续存储多个字符的字符数组相同: 1. 下标 2. .length 3. 遍历 4. 选取: slice(starti[, endi] ...
web程序前后台功能实现_好程序员web前端教程之JS继承实现方式解析
好程序员web前端教程之JS继承实现方式解析,JS是Web前端三要素之一,也是每一个初学前端的同学遭遇的第一条拦路虎.很多人反应JS学习不易,各类知识点概念及应用常常让人抓耳挠腮.在接下来的北京Web ...
实践案例丨教你一键构建部署发布前端和Node.js服务
如何使用华为云服务一键构建部署发布前端和Node.js服务构建部署,一直是一个很繁琐的过程作为开发,最害怕遇到版本发布,特别是前.后端一起上线发布,项目又特别多的时候. 例如你有10个项目,前后端 ...
【前端】第一章前端三要素、前后端分离的演变史
第一章前端三要素.前后端分离的演变史文章目录第一章前端三要素.前后端分离的演变史一.前端三要素结构层(HTML) 表现层(CSS) 行为层(JavaScript) 二.前后端分离的演变史 ...

前端三刺客---JS(WebAPI)