JavaScript(WebAPI)
的 JS 分成三个大的部分
- ECMAScript: 基础语法部分
- DOM API: 操作页面结构
- BOM API: 操作浏览器
WebAPI 就包含了 DOM + BOM
DOM 基本概念
什么是 DOM
DOM 全称为 Document Object Model.
W3C 标准给我们提供了一系列的函数, 让我们可以操作:
- 网页内容
- 网页结构
- 网页样式
DOM 树
一个页面的结构是一个树形结构, 称为 DOM 树.
树形结构在数据结构阶段会介绍. 就可以简单理解成类似于 “家谱” 这种结构
重要概念:
- 文档: 一个页面就是一个 文档, 使用 document 表示.
- 元素: 页面中所有的标签都称为 元素. 使用 element 表示.
- 节点: 网页中所有的内容都可以称为 节点(标签节点, 注释节点, 文本节点, 属性节点等). 使用 node 表示.
这些文档等概念在 JS 代码中就对应一个个的对象.
所以才叫 "文档对象模型
获取元素
这部分工作类似于 CSS 选择器的功能.
querySelector
querySelector是document对象的属性
document : 页面中的全局对象,一个页面加载好了,就会自动生成一个全局变量,叫做document 这里面就有一些属性和方法,让我们来操作页面的内容
var element = document.querySelector(selectors);
<div>hello</div>
<script>
let obj = document.querySelector('div');
console.log(obj);
</script>
而使用 querySelector 能够完全复用前面学过的 CSS 选择器知识, 达到更快捷更精准的方式获取到元素对象.
- selectors 包含一个或多个要匹配的选择器的 DOM字符串
DOMString。 该字符串必须是有效的CSS选择器字符串；如果不是，则引发 SYNTAX_ERR 异常 - 表示文档中与指定的一组CSS选择器匹配的第一个元素的 html元素 Element 对象.
- 如果您需要与指定选择器匹配的所有元素的列表，则应该使用
querySelectorAll() - 可以在任何元素上调用，不仅仅是 document。 调用这个方法的元素将作为本次查找的根元素
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
</ul>
<script>
let obj = document.querySelector('ul li');
console.log(obj);
</script>
当querySelector匹配到多个元素的时候,此时返回的对象,就是匹配到的所有被选中的第一个元素
此时,如果想将所有的li都选择,就需要使用querySelectotAll ,此时返回的就是一个数组
querySelectotAll
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
</ul>
<script>
let obj = document.querySelectorAll('ul li');
console.log(obj);
</script>
事件初识
JS中的很多代码都是通过"事件"来触发的
事件就是浏览器对于用户的操作行为进行一个统称(准确来说,事件不一定全是由用户操作产生,但是大部分是)
例如:鼠标在页面上移动,就会产生鼠标移动事件
鼠标在页面某处点击,就会产生鼠标点击事件
鼠标滚轮,来滚动页面,就会产生滚动事件
-
事件源: 哪个元素触发的
-
事件类型: 是点击, 选中, 还是修改? 比如鼠标移动,鼠标点击,鼠标滚轮
-
事件处理程序: 进一步如何处理. 往往是一个回调函数.
最常见的就是点击事件
<button>按钮</button>
<script>
let button = document.querySelector('button');
button.onclick = function() {
alert('hello');
}
</script>
点击之后就会出现hello
操作元素
操作元素内容
通过对象里面的属性innerHTML来实现
<div>hello world</div>
<button>按钮</button>
<script>
let btn = document.querySelector('button');
btn.onclick = function() {
let obj = document.querySelector('div');
console.log(obj.innerHTML);
}
</script>
点击按钮之后,就会在控制台输出获取从对象获取到的元素
单标签没有这个属性
操作表单元素属性
表单(主要是指 input 标签)的以下属性都可以通过 DOM 来修改
- value: input 的值.
- disabled: 禁用
- checked: 复选框会使用
- selected: 下拉框会使用
- type: input 的类型(文本, 密码, 按钮, 文件等)
代码示例: 切换按钮的文本
假设这是个播放按钮, 在 “播放” - “暂停” 之间切换
<input type="button" value="播放">
<script>
var btn = document.querySelector('input');
btn.onclick = function () {
if (btn.value === '播放') {
btn.value = '暂停';
} else {
btn.value = '播放';
}
}
</script>
变化不好截图,就自己写一下吧
代码示例: 点击计数
使用一个输入框输入初始值(整数). 每次点击按钮, 值 + 1
<input type="text" id="text" value="0">
<input type="button" id="btn" value='点我+1'>
<script>
let text = document.querySelector('#text');
let btn = document.querySelector('#btn');
btn.onclick = function() {
let num = text.value;
num = parseInt(num);
num = num + 1;
text.value = num;
console.log(num);
}
</script>
注意:在js代码中获取到的value需要使用parseInt转成int类型,否则就会当做sting类型进行拼接
下图就是未转换时的结果
代码示例: 全选/取消全选按钮
点击全选按钮, 则选中所有选项
只要某个选项取消, 则自动取消全选按钮的勾选状态
<input type="checkbox" id="all">我全都要<br>
<input type="checkbox" id="girls">貂蝉<br>
<input type="checkbox" id="girls">妲己<br>
<input type="checkbox" id="girls">西施<br>
<input type="checkbox" id="girls">小乔
<script>
let all = document.querySelector('#all');
let girls = document.querySelectorAll('#girls');
all.onclick = function() {
for (let i = 0; i < girls.length; i++) {
girls[i].checked = all.checked;
}
}
for (let i = 0; i < girls.length; i++) {
girls[i].onclick = function() {
all.checked = checkGirls(girls);
}
}
function checkGirls(girls) {
for (let i = 0; i < girls.length; i++) {
if (!girls[i].checked) {
return "";
}
}
return 'checked';
}
</script>
操作元素样式
行内样式操作
element.style.[属性名] = [属性值];
element.style.cssText = [属性名+属性值];
代码示例: 点击文字则放大字体.
style 中的属性都是使用 驼峰命名 的方式和 CSS 属性对应的.
例如: font-size => fontSize, background-color => backgroundColor 等
这种方式修改只影响到特定样式, 其他内联样式的值不变
<div style="font-size: 20px;">这是一段文字</div>
<script>
let div = document.querySelector('div');
div.onclick = function() {
let size = parseInt(div.style.fontSize);
size += 5;
div.style.fontSize = size + 'px';
console.log(size);
}
</script>
类名样式操作
element.className = [CSS 类名];
代码示例: 开启夜间模式
<style>
* {
padding: 0;
margin: 0;
}
.light {
background-color: #fff;
color: #000;
}
.dark {
background-color: #000;
color: #fff;
}
</style>
<div class="light" style="height: 200px;">这是一段文字</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.innerHTML = '开灯';
} else if (div.className == 'dark') {
div.className = 'light';
button.innerHTML = '关灯';
}
}
</script>
操作节点
新增节点
分成两个步骤
-
创建元素节点
-
把元素节点插入到 dom 树中.
使用 createElement 方法来创建一个元素. options 参数暂不关注
var element = document.createElement(tagName[, options]);
<div class="container">
</div>
<script>
var newDiv = document.createElement('div');
newDiv.id = 'newdiv';
newDiv.className = 'one';
div.innerHTML = 'hehe';
console.log(newDiv);
</script>
此时发现, 虽然创建出新的 div 了, 但是 div 并没有显示在页面上. 这是因为新创建的节点并没有加入到
DOM 树中.
上面介绍的只是创建元素节点, 还可以使用:
createTextNode创建文本节点createComment创建注释节点createAttribute创建属性节点我们以
createElement为主即可.
插入节点到 dom 树中
使用appendChild把节点插入某个节点的子节点中
<div class="container">
</div>
<script>
var newDiv = document.createElement('div');
newDiv.id = 'newdiv';
newDiv.className = 'one';
div.innerHTML = 'hehe';
console.log(newDiv);
let container = document.querySelector('.container');
container.appendChild(newDiv);
</script>
删除节点
使用removeChild方法实现
<div class="container">
<button>删除div</button>
</div>
<script>
var newDiv = document.createElement('div');
newDiv.id = 'newdiv';
newDiv.className = 'one';
div.innerHTML = 'hehe';
console.log(newDiv);
let container = document.querySelector('.container');
container.appendChild(newDiv);
button.onclick = function() {
container.removeChild(newDiv);
}
</script>
