DOM
获取元素
事务操作
操作元素
- 获取/修改元素属性
- 获取/修改表单元素属性
- - 实现一个全选效果，主要是操作input的checked属性
- 获取/修改元素样式
- - 点击放大字体
  - 夜间模式(关灯开灯)
操作节点
- 新增节点
- 删除节点
案例-猜数字
案例-表白墙

DOM

DOM 全称为 Document Object Model.
W3C 标准给我们提供了一系列的函数, 让我们可以操作:

网页内容
网页结构
网页样式

DOM树
一个页面的结构是一个树形结构, 称为 DOM 树.

树形结构在数据结构阶段会介绍. 就可以简单理解成类似于 “家谱” 这种结构

页面结构形如:

DOM 树结构形如

获取元素

querySelector
使用 querySelector 能够完全复用前面学过的 CSS 选择器知识, 达到更快捷更精准的方式获取到元素对象.

var element = document.querySelector(selectors);

selectors 包含一个或多个要匹配的选择器的 DOM字符串 DOMString 。 该字符串必须是有效的CSS选择器字符串；如果不是，则引发 SYNTAX_ERR 异常
表示文档中与指定的一组CSS选择器匹配的第一个元素的 html元素 Element 对象. 如果您需要与指定选择器匹配的所有元素的列表，则应该使用 querySelectorAll()可以在任何元素上调用，不仅仅是 document。 调用这个方法的元素将作为本次查找的根元素

querySelectorAll
使用 querySelectorAll 用法和上面类似

事务操作

事件三要素

事件源: 哪个元素触发的
事件类型: 是点击, 选中, 还是修改?
事件处理程序: 进一步如何处理. 往往是一个回调函数.

<button id="btn">点我一下</button>
<script>var btn = document.getElementById('btn');btn.onclick = function () {alert("hello world");}</script>

btn 按钮就是事件源.
点击就是事件类型
function 这个匿名函数就是事件处理程序
其中 btn.onclick = function() 这个操作称为 注册事件/绑定事件

操作元素

通过dom对象.属性名就可以进行操作了

获取/修改元素属性

我们简单实现一个图片切换的方法，点击图片可以切换图片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img src="1.jpg" alt=""><script>let img = document.querySelector('img');img.onclick = function() {console.log(img.src);if (img.src.indexOf('1.jpg') >= 0) {img.src = '2.jpg';} else if (img.src.indexOf('2.jpg') >= 0) {img.src = '1.jpg';}}</script></body>
</html>

一个HTML标签里，能写哪些属性，就同样可以通过JS中的DOM对象来获取一样的属性，可以通过console.dir这个方法，打印出一个dom对象的全部属性和值~

获取/修改表单元素属性

实现一个全选效果，主要是操作input的checked属性

<body><input type="checkbox"  id="all">我全都要<br><input type="checkbox" class="girl" >貂蝉<br><input type="checkbox" class="girl">小乔<br><input type="checkbox" class="girl">安其拉<br><input type="checkbox" class="girl">妲己<br><script>// 1. 先获取到元素let all = document.querySelector('#all');let girls = document.querySelectorAll('.girl');// 2. 给all 注册点击事件all.onclick = function() {for (let i = 0; i < girls.length; i++) {// all.checked 就是all这个复选框的选中状态girls[i].checked = all.checked;}}// 3. 针对每个girl 注册点击事件，实现对于all的取消操作for (let i = 0; i < girls.length; i++) {girls[i].onclick = function() {all.checked = checkGirls(girls);}}function checkGirls(girls) {// 判定是不是所有的 girl 都被选中for (let i = 0; i < girls.length; i++) {if (!girls[i].checked) {return '';}}return 'checked';}</script>
</body>

获取/修改元素样式

1.style对应行内样式(直接把样式写到style里面)
2.className/classList(对应内部样式/外部样式)应用了一个/一组CSS类名

点击放大字体

<body><div style="font-size: 20px;">这是一个文本</div><script>let div = document.querySelector('div');div.onclick = function() {// 1. 先获取到当前字体的大小console.log(div.style.fontSize);let fontSize = parseInt(div.style.fontSize);// 2. 在当前字体大小的基础上， 多增加5pxfontSize += 5;div.style.fontSize = fontSize + 'px';}</script>
</body>

在HTML中，表示类名的属性就是class，但是在JS里，属性名就变成了className/classList，class在JS中也是一个关键字。

如果要修改的样式比较多，通过style就麻烦了，可以直接借助css类来修改

 <style>.light {background-color: #fff;color: #000;}.dark {background-color: #000;color: #fff;}</style><div class="light" style="height: 500px">这是一段话</div><button>关灯</button>let div = document.querySelector('div');let button = document.querySelector('button');button.onclick = function() {if (div.className == 'light') {div.className = 'dark';button.innerHTML = '开灯';} else if (div.className == 'dark') {div.className == 'light'button.innerHTML = '关灯';}}

操作节点

新增节点

创建

     let newDiv = document.createElement('div');newDiv.id = 'newDiv';newDiv.className = 'one';newDiv.innerHTML = 'hello';console.log(newDiv);

此处创建的节点，并没有挂在dom树上，因此浏览器页面中，是显示不出来的。
2. 把节点挂在dom树上
使用appendChild把节点插入到某个节点的子元素中。

 let container = document.querySelector('.container');container.appendChild(newDiv);

删除节点

使用 removeChild 删除子节点

oldChild = element.removeChild(child);

child 为待删除节点element 为 child 的父节点
返回值为该被删除节点
被删除节点只是从 dom 树被删除了, 但是仍然在内存中, 可以随时加入到 dom 树的其他位
置. 如果上例中的 child节点 不是 element 节点的子节点,则该方法会抛出异常.

案例-猜数字

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>猜数字小游戏</title>
</head>
<body><button id="resetBtn">重新开始一局游戏</button><br><span>要猜的数字：</span><input type="text"><button id="guessBtn">猜</button><br><span>结果：</span><span id="result"></span><br><span>已经猜的次数：</span><span id="guessCount">0</span><script>// 1. 先把上面需要用到的元素都拿到。let resetBtn = document.querySelector('#resetBtn');let input = document.querySelector('input');let guessBtn = document.querySelector('#guessBtn');let resultSpan = document.querySelector('#resultSpan');let guessCountSpan = document.querySelector('#guessCountSpan');// 2. 生成一个 1 - 100 的随机数字let toGuess = Math.floor(Math.random() * 100) + 1// 0 - 1 之间的数console.log(toGuess);// 3. 实现点击 猜 按钮的逻辑guessBtn.onclick = function() {// 1. 读取到input中的输入的内容，并转换成整数if (input.value == '') {return;}let curNum = parseInt(input.value);// 2. 判定大小关系，并给出提示if (curNum < toGuess) {// 低了resultSpan.innerHTML = '低了';resultSpan.style.color = 'red';} else if (curNum > toGuess) {// 高了resultSpan.innerHTML = '高了';resultSpan.style.color = 'red';} else {resultSpan.innerHTML = '猜对了！';resultSpan.style.color = 'green';}// 3. 更新猜的次数let guessCount = parseInt(guessCountSpan.innerHTML);guessCountSpan.innerHTML = guessCount + 1;}// 4. 实现 reset 操作的逻辑(开始新游戏)resetBtn.onclick = function() {// 让页面刷新即可// location 是和 document并列关系的对象// location 用来控制页面的链接/地址location.reload();}</script>
</body>
</html>

案例-表白墙

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表白墙</title>
</head>
<body><div class="container"><h1>表白墙</h1> <p>输入后点击提交, 会将信息显示在表格中</p> <div class="row"><span>谁: </span> <input class="edit" type="text">     </div>     <div class="row"><span>对谁: </span><input class="edit" type="text"></div><div class="row"><span>说什么: </span><input class="edit" type="text"></div><div class="row"><input type="button" value="提交" class="submit"></div></div><style>* {margin: 0;padding: 0;}.container {width: 400px;margin: 0 auto;}h1 {text-align: center;padding: 20px 0;}p {color: #666;text-align: center;font-size: 14px;padding: 10px 0;}.row {height: 40px;display: flex;justify-content: center;align-items: center;}span {width: 100px;line-height: 40px;}.edit {width: 200px;height: 30px;}.submit {width: 304px;height: 40px;color: white;background-color: orange;border: none;}</style><script>// 给点击按钮注册点击事件let submit = document.querySelector('.submit');submit.onclick = function () {// 1. 获取到编辑框内容let edits = document.querySelectorAll('.edit');let from = edits[0].value;let to = edits[1].value;let message = edits[2].value;console.log(from + "," + to + "," + message);if (from == '' || to == '' || message == '') {return;}// 2. 构造 html 元素let row = document.createElement('div');row.className = 'row';row.innerHTML = from + '对' + to + '说: ' + message;// 3. 把构造好的元素添加进去let container = document.querySelector('.container');container.appendChild(row);// 4. 同时清理之前输入框的内容for (var i = 0; i < 3; i++) {edits[i].value = '';}}</script>
</body>
</html>

JavaWeb-JavaScript API相关推荐

Elasticsearch Javascript API增删改查
查询根据索引.类型.id进行查询: client.get({ index:'myindex', type:'mytype', id:1 },function(error, response){// ...
ArcGIS For JavaScript API 默认参数
"esri.config"的是在1.3版中的的"esriConfig"的替代品.如果您使用的是1.2或更低的版本,您应该参阅默认API v1.2和更低的配置.对 ...
深入浅出 Javascript API（五）--Query Find 查询
作者:Flyingis 本文严禁擅自转载或用于商业目的,如有需要请事先联系作者:dev.vip#gmail.com 查询是webgis常用功能之一,基于地图的查询经历了多种形式的演变,现在用什么形式来 ...
专门用于微信公众平台的Javascript API
1 /**!2 * 微信内置浏览器的Javascript API,功能包括:3 *4 * 1.分享到微信朋友圈5 * 2.分享给微信好友6 * 3.分享到腾讯微博7 * 4.新的分享接口,包含朋友圈. ...
百度地图的两套JavaScript API
前言百度地图的有套JavaScript API:JavaScript API 和 JavaScript API GL. JavaScript API v2.0 版本开发文档: http://lbs ...
高德地图JavaScript API开发研究
高德地图JavaScript API开发研究原文:高德地图JavaScript API开发研究高德地图JavaScript API是一套用JavaScript 语言编写的应用程序接口,可以通过各种 ...
使用基于 WebRTC 的 JavaScript API 在浏览器环境里调用本机摄像头
HTML5,JavaScript 和现代浏览器这套三驾马车的组合,使得传统的 Web 应用较之过去能实现更多更丰富的同用户交互的功能.摄像头如今已成为智能手机的标配,前端 Web 应用也出现了越来越多 ...
ASP.NET Google Maps Javascript API V3 实战基础篇一获取和设置事件处理程序中的属性...
ASP.NET Google Maps Javascript API V3 实战基础篇一获取和设置事件处理程序中的属性 <%@ Page Language="C#" Auto ...
百度地图JavaScript API覆盖物旋转时出现偏移
在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节 ...
使用ArcGIS JavaScript API 3.18 加载天地图
对于中国开发者在创建GIS应用的时候,往往比较头疼的是底图资源的缺乏.其实国家测绘地信局就提供一个很好的免费资源:天地图.使用ArcGIS API的开发人员可以直接利用该资源作为地图应用的底图. Ar ...

JavaWeb-JavaScript API

目录

DOM