DOM操作学习
一、DOM对象-查找元素
# 1.直接查找
# 获取标签对象的方式:
document.getElementById('#id') #根据ID获取一个标签（获取的是单独的对象）
document.getElementsByClass('.class') # 获取的是列表 列表中套对象
document.getElementsByName # 根据name属性获取标签集合
document.getElementsByClassName # 根据class属性获取标签集合
document.getElementsByTagName # 根据标签名获取标签集合（获取的是列表 列表中套对象）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1">hellozekai</div>
<div class="c1">helloc1</div>
<div class="c1">helloc2</div>
<input type="checkbox" name="hobby" id="myhobby" >足球
</body>
</html> # 根据标签获取标签集合
>var obj=document.getElementsByTagName("div");
>obj
# 结果：
[div#i1, div.c1, div.c1, i1: div#i1]
# 根据id获取标签
>var s = document.getElementById("myhobby");
>s
# 结果
<input type="checkbox" name="hobby" id="myhobby">
案例：表格的全选、反选和取消
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="selectAll()">
<input type="button" value="取消" onclick="cancelAll()">
<input type="button" value="反选" onclick="reverseAll()">
<!--简易写法：table>thead>tr>th然后按table键就会自动补齐格式-->
<table border="1px">
<thead>
<tr>
<th>id</th>
<th>ip</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>192.168.11.21</td>
<td>
<input type="checkbox" class="mycheck">
</td>
</tr>
<tr>
<td>2</td>
<td>192.168.11.22</td>
<td>
<input type="checkbox" class="mycheck">
</td>
</tr>
<tr>
<td>3</td>
<td>192.168.11.23</td>
<td>
<input type="checkbox" class="mycheck">
</td>
</tr>
</tbody>
</table> </body>
<script>
function selectAll(){
// 1. 获取所有的复选框 列表形式返回
var arr = document.getElementsByClassName('mycheck');
// 2. 循环列表, 获取对象
for (var i=0; i<arr.length; i++){
// console.log(chks[i]);
// 3. 设置对象的checked属性
arr[i].checked = true;
}
} function cancelAll(){
// 1. 获取所有的复选框 列表形式返回
var arr = document.getElementsByClassName('mycheck');
// 2. 循环列表, 获取对象
for (var i=0; i<arr.length; i++){
// console.log(chks[i]);
// 3. 设置对象的checked属性
arr[i].checked = false;
}
} function reverseAll(){
// 1. 获取所有的复选框 列表形式返回
var arr = document.getElementsByClassName('mycheck'); // 2. 循环列表, 获取对象
for (var i=0; i<arr.length; i++){ if(arr[i].checked){
arr[i].checked = false;
}else{
arr[i].checked = true;
}
}
}
</script>
</html>
二、DOM对象-操作属性
1.操作内容：
# 操作内容
innerText 文本
innerHTML HTML内容
value 值 # 操作属性
attributes 获取所有标签属性
setAttribute(key,value) 设置标签属性
getAttribute(key) 获取指定标签属性
removeAttribute(key) 删除属性
<div id="i1" clasid = 'sss'>这个是内容</div>
<input type="text" value="dbshabdsabda" id="i2">
<input type="button" value="发送" id="btn"> # 操作标签对象的内容
# 查看
>var obj = document.getElementById("i1");
>obj
<div id="i1" clasid = 'sss'>这个是内容</div> # 获取内容
>obj.innerText
这个是内容 # 设置内容
>obj.innerText="xxxx"
xxxx
>obj.innerHTML= '<a href="www.baidu.com">设置的内容</a>';
<a href="www.baidu.com">设置的内容</a>
# innerHTML可以看到设置的内容变成了可以跳转的链接 # 也可以设置value的值
>var obj2 = document.getElementById("i2");
>obj2.value = "ccccc"
>obj2.value
ccccc
# 属性操作
<div id="i1" clasid = 'sss'>这个是内容</div>
<input type="button" value="发送" id="btn"> obj = document.getElementById("i1")
# 获取属性
>obj.attributes
{0: id, 1: clasid, id: id, clasid: clasid, length: 2} # 获取单个属性值
>obj.getAttribute('id')
i1
# 设置增加属性值
>obj.setAttribute('k2','v2')
>obj
<div id="i1" clasid = 'sss' k2="v2">这个是内容</div> # 删除属性值
>obj.removeAttribute('k2')
>obj
<div id="i1" clasid = 'sss'>这个是内容</div> # 设置按钮不能点击
>obj = document.getElementById('btn')
>obj2.setAttribute('disabled','true');
>obj
# 可以看到发送按钮变为灰色
<input type="button" value="发送" id="btn" disabled="true">
时间函数
// 在特定的时间内, 执行函数
// setInterval() ### crontab
// setInterval("test()", 1000); # 每隔1s执行一次
// setTimout() ## 只执行一次结束 ## at
//setTimeout("test()", 1000);
案例：验证码倒计时
# 验证码倒计时
# 分析：点击按钮后，按钮显示倒计时并变为灰色；记时结束后又变回来 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验证码倒计时</title>
</head>
<body>
<input type="button" value="发送验证码" id="btn" onclick="sendMsg()">
</body>
<script>
var total_time = 10; //倒计时总是
var press = document.getElementById("btn");
function sendMsg() {
press.setAttribute('disabled','true');
press.value = "还剩下" + total_time + "秒";
setInterval("lesstime()",1000);
} function lesstime() {
if (total_time == 1){
press.removeAttribute("disabled");
press.value = "发送验证码"; } else {
total_time -= 1;
press.value = "还剩下" + total_time + "秒";
}
}
</script>
</html>
2.样式操作
1.指定类操作
className 获取所有类名
classList.remove(cls) 删除指定类
classList.add(cls) 添加类
案例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: blue;
}
.c2{
border: 1px solid red;
}
</style>
</head>
<body>
<div class="c1" >dsabdsnajd;sna</div>
</body>
</html> # 大颗粒度的设置:
style:
.c2{
xxxx
}
js:
d1.classList.add('c2') : 添加样式
d1.classList
d1.classList.remove('c2'): 删除样式 # 细颗粒度的设置:
对象.style.css的属性 = 值:
# 两种情况:
# 1.
css:
color: red;
DOM:
obj.style.color = 'red'
# 2.
css:
font-size: 20px;
background-position-y
DOM:
obj.style.fontSize = "20px"
案例2：模态框练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.shadow{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: black;
opacity: 0.3;
}
.content{
position: absolute;
top:200px;
left: 500px;
width: 300px;
height: 200px;
background-color: white;
}
.hide{
display: none;
}
</style>
</head>
<body>
<input type="button" value="添加" onclick="getModal()"> <!--遮罩层-->
<div class="shadow hide"></div> <!--模态框-->
<div class="content hide">
<form action="">
用户名:<input type="text" ><br>
<input type="button" value="提交">
<input type="button" value="取消" onclick="cancelModal();">
</form>
</div>
</body>
<script>
function getModal() {
document.getElementsByClassName('shadow')[0].classList.remove('hide');
document.getElementsByClassName('content')[0].classList.remove('hide');
}
function cancelModal(){
document.getElementsByClassName('shadow')[0].classList.add('hide');
document.getElementsByClassName('content')[0].classList.add('hide');
}
</script>
</html>
三、事件
1. 常见的事件：焦点
获得焦点事件——–onfocus
失去焦点事件——–onblur
内容改变事件——–onchange
载入页面———–onload
单击事件———–onclick
鼠标移入事件——–onmouseover
鼠标移出事件——–onmouseout
案例：onchange 多级菜单联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select name="province" id="province" onchange="ld();">
<option value="-1">请选择</option>
<option value="0">北京</option>
<option value="1">山西</option>
</select>
<select name="city" id="city">
</select>
</body>
<script>
var citys = [
["海淀","东城","西城","朝阳"],
["太原","大同","运城","晋中"]
];
function ld(){
var provinces = document.getElementById("province");
var opts;
if(provinces.value == -1){
opts = '';
document.getElementById("city").innerHTML = opts;
return;
}
var areas = citys[provinces.value];
for(var i = 0; i < areas.length; i++){
opts += "<option value='" + i + "'>" + areas[i] + "</option>";
}
document.getElementById("city").innerHTML = opts;
}
</script>
</html>
2.事件的绑定方式
# a.html属性的方式绑定
<a href='www.baidu.com' onclick="t1();"> 百度 </a> 作为WEB开发人员,这是最早碰到的一种事件绑定方式，这种绑定方式非常古老
优点：兼容性最强
缺点也很明显:
1:需要在DOM渲染时分析绑定语句,影响DOM渲染速度(IE下尤其)
2:形式上没达到”结构与行为”相分离的原则
# b.对象属性方式
var bd = document.getElementById('bd');
bd.onclick = function(){
console.log(this.id);
} # 这种绑定是把一个DOM对象onclick属性赋值为一个函数，那此时函数内部的this指向的是该DOM对象，即这个a对象
# 缺点:该方式只能为一种事件，绑定一个回调函数
即：.onclick = fn1, .onclick=fn2;
最终的效果是.onclick=fn2 执行
# c.addEventListener方式(了解)
var i0 = document.getElementById('i1');
i0.addEventListener('click', function(){console.log('a');})
i0.addEventListener('click', function(){console.log('b');}) 格式：addEventListener(‘事件’,绑定的函数, true/false);
1.如果添加了多个事件处理函数，则按添加时的先后顺序来执行
2.事件处理函数中的this指代的是DOM对象本身(w3c标准)
3.第一个事件参数，一律把事件名称的“on”去掉
优点: 能为同一种事件,如onclick,绑定多个函数函数中的this指向该DOM对象,操作方便
缺点:IE8及以下版本不支持此方法
3.windows常见方法
window常见方法:
alert('1234') # 浏览器弹出消息
confirm('是否确定删除?'); #浏览器跳出弹窗询问
open(): 打开一个网页
location.href = "资源" ### 跳转到某一个网页
location.reload(): 刷新当前页面
DOM操作学习的更多相关文章
- 第25篇 jQuer快速学习（上）---选择器和DOM操作
这个文章经历的时间比较长,不是因为jQuery比较难,而是东西比较多,真心是个体力活.所以本来想把jQuery做成一篇去写,但由于写的时候发现jQuery发现写成一篇的话过于长,对于阅读起来也不是一个 ...
- jQuery学习之旅 Item4 细说DOM操作
jQuery-–DOM操作(文档处理) Dom是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准 ...
- jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
- jQuery学习之路（2）-DOM操作
▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...
- HTML 学习笔记 JQuery（DOM 操作）
一般来说,DOM操作分为三个方面,即:DOM Core(核心), HTML_DOM 和 CSS_DOM. 1.DOM Core DOM Core 并不专属于JavaScript,任何一种支持DOM的程 ...
- 【Java EE 学习 32 下】【JQuery】【JQuey中的DOM操作】
一.JQuery中的DOM操作. 什么是DOM:DOM是一中和浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DOM简称文档对象模型,是Document Oject Mode ...
- jQuery学习笔记(二)jQuery中DOM操作
目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...
- jquery学习笔记---Dom操作
一.DOM操作的分类 DOM(document object model)是一种与浏览器.平台.语言无关的接口,使用该接口可以访问页面中的·所有组件.DOM的操作可以分为DOM Core.HTML-D ...
- 【jQuery基础学习】02 jQuery的DOM操作
DOM操作分为3个方面: DOM Core 任何一种支持DOM Core的语言都可以使用它,比如getElementById就是DOM Core操作 HTML-DOM 只能用来处理web文档 ...
- javascript学习（二） DOM操作HTML
一:DOM操作HTML JavaScript能够改变页面中所有的HTML元素 JavaScript能够改变页面中所有的HTML属性 JavaScript能够改变页面中所有的CSS样式 JavaScri ...
随机推荐
- AI实用指南：5分钟搭建你自己的LLM聊天应用
今天,我们将迅速着手搭建一个高效且富有创意的混元聊天应用,其核心理念可以用一个字来概括--快.在这个快节奏的时代,构建一个基础的LLM(Large Language Model,大型语言模型)聊天应用 ...
- KDE算法解析
核密度估计(Kernel Density Estimation, KDE)算法通过样本估计这些样本所属的概率密度函数,是non-parametric方法,也就是在进行估计时无需假设分布的具体形式.本文 ...
- Non-local Network：人类早期在CV驯服Transformer尝试 | CVPR 2018
Non-local操作是早期self-attention在视觉任务上的尝试,核心在于依照相似度加权其它特征对当前特征进行增强,实现方式十分简洁,为后续的很多相关研究提供了参考 来源:晓飞的算法工程 ...
- Kingbase ES 函数返回-return语句
文章概要: 本文在https://www.cnblogs.com/kingbase/p/15703611.html 一文的基础上总结了Kingbase ES中函数能支持的return语句,整体上兼容o ...
- KingbaseES V8R6 常用的系统函数
查看当前日志文件lsn位置: select sys_current_wal_lsn(); 查看某个lsn对应的日志名: select sys_walfile_name('0/1162FBA0'); 查 ...
- 5 个编写高效 Makefile 文件的最佳实践
在软件开发过程中,Makefile是一个非常重要的工具,它可以帮助我们自动化构建.编译.测试和部署.然而,编写高效的Makefile文件并不是一件容易的事情.在本文中,我们将讨论如何编写高效的Make ...
- Excel分析师的工资能一直飙升，原因其实是...
世界上的数据分析师分为使用Excel的分析师和其他分析师两类. 即使在互联网数据分析界,java遍街头,Python不如狗,Excel也是不可替代的. 上班前以为自己是西装笔挺的Excel数据分析师, ...
- .Net 代码分析工具对比 visual studio 2022 current
目录 原因 背景知识 名词解释 分析器 分析器在IDE里 目标 查找思路及过程 CodeMaid Roslyn StyleCop.Analyzer StyleCop? StyleCop.Analyze ...
- Maven 必备技能：MAC 系统下 JDK和Maven 安装及环境变量配置详细讲解
开发中难免因系统问题或者版本变更反复折腾JDK和Maven环境变量,干脆写个笔记备忘个,也方便小伙伴们节省时间. =================JDK安装与环境变量配置====== 1.官网下载j ...
- Web前端 -- ES6
ES标准中不包含 DOM 和 BOM的定义,只涵盖基本数据类型.关键字.语句.运算符.内建对象.内建函数等通用语法. 本部分只学习前端开发中ES6的最少必要知识,方便后面项目开发中对代码的理解. 1. ...