目录
JS
分成三个大的部分（1）ECMAScript: 基础语法部分（2）DOM API: 操作页面结构浏览器给JS提供的原生接口，基于这样的接口，就可以针对页面上的元素进行操作了DOM=》文档对象模型（html中，会把每个html标签，视为是js中可以操作的对象，这个操作的对象就可以影响到界面的显示）（3）BOM API: 操作浏览器WebAPI
就包含了
DOM + BOM.
DOM基本概念
1. 获取元素（querySelector）
要想操作页面上的元素，就需要先拿到对应的JS对象DOM中提供了一组API能够获取到网页的元素，比如querySelector，querySelectorAll这是一个document（页面中的全局对象，一个页面加载完成，就会自动生成一个全局变量，就叫做document，这里面就有一些属性和方法，让我们来操作页面的内容）这样的对象的属性
可以看到只选中了，第一个元素
所以要想全部选中，就要使用querySelectorAll，querySelectorAll返回的是一个数组，就包含了所有被选中的元素
实际上是querySelectorAll返回的不是一个真正的原生数组，而是一个对象，只不过这个对象，有length，也能够通过下标的方式来访问内部元素，使用起来和数组没啥区别，这种就叫“伪数组”
2. 事件(onclick)
JS中很多代码，都是通过“事件”来触发的
事件就是浏览器对于用户的操作行为进行了一个“统称”
（实际上，事件也不一定全是用户操作产生的，但绝大部分是）
事件的三要素：
a）事件源：哪个html元素产生的事件
b）事件类型：鼠标移动、鼠标点击、键盘事件、窗口大小改变事件…
c）事件的处理程序：当事件产生之后，执行什么样的JS代码（回调函数，函数不会立刻调用，而是在合适的时机，被浏览器调用）
这种写法也可以
类似的还有这些
3. 操作元素
3.1 获取/修改元素内容(innerHTML)
（1）通过对象里面的一个属性innerHTML来实现（元素里面包含的html代码是啥样的）
onclick作用是捕获鼠标点击事件
<body>
<div id="screen">
<ul>
<li>aaa</li>
<li>aaa</li>
<li>aaa</li>
</ul>
</div>
<button id="btn">这是获取内容的按钮</button>
<button id="btn2">这是修改内容的按钮</button>
<script>
let btn = document.querySelector('#btn');
btn.onclick = function() {
let screen = document.querySelector('#screen');
console.log(screen.innerHTML);
}
let btn2 = document.querySelector('#btn2');
btn2.onclick = function() {
let screen = document.querySelector("#screen");
screen.innerHTML = '<h1>修改后的内容</h1>';
}
</script>
</body>
java中的parselnt，是interger类的成员方法
这里JS中的parselnt相当于一个全局的函数（由于JS是动态类型，转为数字之后，仍然可以赋值给val）
3.2 获取/修改元素属性(.属性名)
通过DOM对象，.属性名 就可以进行操作了
比如搞一个图片点击切换图片的功能
<body>
<img src="111.jpg" alt="">
<script>
let img = document.querySelector('img');
img.onclick = function() {
console.log(img.src);
if(img.src.indexOf('111.jpg') >= 0) {
img.src = '222.jpg';
} else if (img.src.indexOf('222.jpg' >= 0)) {
img.src = '111.jpg'
}
}
</script>
</body>可以通过console.dir这个方法，打印出一个dom对象的全部属性和值
3.3 获取/修改元素表单属性
表单
(
主要是指
input
标签
)
的以下属性都可以通过
DOM
来修改value:input的值disabled:禁用checked:复选框使用selected:下拉框使用type:input的类型（文本、密码、按钮、文件等）
实现一个按钮切换的功能
<body>
<input type="button" value="播放">
<script>
let input = document.querySelector('input');
input.onclick = function() {
if(input.value == '播放') {
input.value = '暂停';
} else if(input.value == '暂停') {
input.value = '播放';
}
}
</script>
</body>全选/取消全选按钮
<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 '';
}
}
//遍历完发现，所有都被选中着，就让 all 也是选择状态
return 'checked';
}
</script>
</body>3.4 获取/修改样式(style className)
1.style 对应 行内样式（直接把样式写到style里面）
2.className / classList 对应 内部样式/外部样式，应用了一个/一组css类名
在HTML中，表示类名的属性，就是class
在JS中，属性名就变成了 className/classList
因为JS中 class也是一个关键字（JS ES6版本以上，也引入了类这个概念）
实现 点击文字放大字体的操作
parseInt进行数字字符，转数字操作时，是从前往后开始转换，如果遇到非数字字符，就转换停止
当修改CSS属性值的时候，一定要注意单位，不写单位就会失效
<body>
<div style="font-size:20px;">这是一个文本</div>
<script>
let div = document.querySelector('div');
div.onclick = function() {
//1. 先获取当前字体的大小(要进行字符串转数字操作)
console.log(parseInt(div.style.fontSize));
let fontSize = parseInt(div.style.fontSize);
//2. 在当前字体大小的基础上， 多增加 5px
fontSize += 5;
div.style.fontSize = fontSize + 'px';
}
</script>
</body>
如果要修改的样式比较多，通过style来修改就比较麻烦
可以直接借助CSS类来修改
修改元素的 CSS 类名. 适用于要修改的样式很多的情况.
实现一个 开启夜间模式
<body>
<style>
.light {
background-color: #fff;
color: black;
}
.dark {
background-color: black;
color: #fff;
}
</style>
<div class="light" style="height: 500px;">这是一段话</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>
</body>4. 操作结点
4.1 新增结点(createElement)
1. 创建新结点
var element = document.createElement(tagName[, options])createTextNode 创建文本节点createComment 创建注释节点createAttribute 创建属性节点2. 把结点挂在dom树上
element.appendChild(aChild)
（1）创建新结点
此处创建的结点，并没有被挂在dom树上
所以在浏览器页面上，是显示不出来的
（2）把结点挂在dom树上
使用appendChild把节点插入到某个结点的子元素中
<body>
<div class="containor">
</div>
<script>
let newDiv = document.createElement('div');
newDiv.id = 'newDiv';
newDiv.className = 'one';
newDiv.innerHTML = 'hello';
console.log(newDiv);
let containor = document.querySelector('.containor');
containor.appendChild(newDiv);
</script>
</body>4.2 删除结点(removeChild)
使用 removeChild 删除子节点oldChild = element.removeChild(child);child
为待删除节点element 为 child 的父节点返回值为该被删除节点被删除节点只是从 dom 树被删除了, 但是仍然在内存中, 可以随时加入到 dom 树的其他位置.如果上例中的
child
节点
不是
element
节点的子节点
,
则该方法会抛出异常
<body>
<div class="containor">
</div>
<button>删除 div</button>
<script>
let newDiv = document.createElement('div');
newDiv.id = 'newDiv';
newDiv.className = 'one';
newDiv.innerHTML = 'hello';
console.log(newDiv);
let containor = document.querySelector('.containor');
containor.appendChild(newDiv);
let button = document.querySelector('button');
button.onclick = function() {
containor.removeChild(newDiv);
}
</script>
</body>版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/91227.html
