JavaWeb-【3】DOM

姜暮、

于 2024-07-21 21:36:05 发布

阅读量1k

点赞数 11

CC 4.0 BY-SA版权

分类专栏： JavaWeb全系列文章标签：前端

本文链接：https://blog.csdn.net/m0_74044018/article/details/140473589

笔记系列持续更新，真正做到详细！！本次系列重点讲解后端，那么第一阶段先讲解前端【续上篇CSS和JavaScript】

1、dom介绍

而每一个对象都存在一定的属性和方法从而反作用于对象，其中所有的对象就构成了一个dom树,注意：浏览器是按照dom树进行展示的，单独一个对象浏览器无法展示，所以一个对象必须挂到dom树上才能显示这个对象

2、html-dom

3、document

js36应用实例1

静态绑定：

4、应用实例

①、应用实例1

要求完成点击韩顺平教育时，出现弹窗

解决这个问题可以用静态绑定或者动态绑定来解决

innerText和innerHTML的区别 + 静态绑定：

动态绑定：

②、多选框案例

要求你把全选，全不选以及反选功能实现【全选就是运动项目全选，另外两个同理】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getElementsByName 函数</title>
<script type="text/javascript">

//完成全选
function selectAll() {
//1.获取到 sport这一组复选框
var sports = document.getElementsByName("sport");
//sports是什么?是 nodeList，即是一个集合
//alert(sports); 

//2.拿到[dom ,集合]，操作【属性和方法 api】
//遍历 sports， 进行修改
for (var i = 0; i < sports.length; i++) {
sports[i].checked = true;//选中
}
}

//全不选
function selectNone() {
var sports = document.getElementsByName("sport");
for (var i = 0; i < sports.length; i++) {
sports[i].checked = false;//全部不选中
}
}

//反选
function selectReverse() {
var sports = document.getElementsByName("sport");
for (var i = 0; i < sports.length; i++) {
// if(sports[i].checked) {//js true
// sports[i].checked = false;
// } else {
// sports[i].checked = true;//
选中
// }
sports[i].checked = !sports[i].checked;
}
}
</script>
</head>
<body>
你会的运动项目：
<input type="checkbox" name="sport" value="zq" checked="checked">足球
<input type="checkbox" name="sport" value="tq">台球
<input type="checkbox" name="sport" value="ppq">乒乓球 <br/><br/>
<button onclick="selectAll()">全选</button>
<button onclick="selectNone()">全不选</button>
<button onclick="selectReverse()">反选</button>
</body>
</html>