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 ...
随机推荐
- .NET分布式Orleans - 3 - Grain放置
在Orleans 7中,Grain放置是指确定将Grain对象放置在Orleans集群中的哪些物理节点上的过程. Grain是Orleans中的基本单位,代表应用程序中的逻辑单元或实体.Grain放置 ...
- Avalonia项目生成银河麒麟操作系统安装包
1 在项目根目录添加xxx.desktop文件,文件内容: [Desktop Entry] Name=xxx Type=Application Exec=/usr/share/xxx/xxx Icon ...
- CPU上下文切换 CPU的调度策略
CPU上下文切换 就是先把前一个任务的CPU上下文(也就是CPU寄存器和程序计数器)保存起来,然后加载新任务的上下文,到这些寄存器和程序计数器,最后再跳转到程序计数器所指的新位置,运行新任务. 根据任 ...
- SHELL使用教程
疑难解答 执行完shell文件后不退出 在shell文件末尾添加如下命令即可. exec /bin/bash 参考资料 为什么sh脚本运行之后自动退出,有没有让终端不自动关闭的方法. - Ubuntu ...
- RelationNet++：基于Transformer融合多种检测目标的表示方式 | NeurIPS 2020
论文提出了基于注意力的BVR模块,能够融合预测框.中心点和角点三种目标表示方式,并且能够无缝地嵌入到各种目标检测算法中,带来不错的收益 来源:晓飞的算法工程笔记 公众号 论文: RelationN ...
- 索引与查询使用的 collate 不一致导致无法使用索引
索引与表的collate 不一致的情况下,会导致表上的索引不可用,这时要想使用索引,必须在SQL 语句指定建索引所用的collate. 数据库默认collate : test=# \l List of ...
- SynchronousQueue详解
目录 简介 举例说明 总结 SynchronousQueue详解 简介 SynchronousQueue是BlockingQueue的一种,所以SynchronousQueue是线程安全的.Synch ...
- C语言简易万年历带注释
同学问的课后作业,顺便加了写注释. #include<stdio.h> /* * 注意 每周的第一天是星期天 */ int main() { int day_per_mo[12] = { ...
- C# 发布你的程序包到Nuget
1.新建一个.NET Standard 的类库项目 2.选择项目属性,在 package 栏目下填写我们的nuget包信息 3.选择我们的项目,点击"Pack" 打包 主要注意的是 ...
- 【直播回顾】Hello HarmonyOS应用篇第六课——短视频应用开发
由HDE夏德旺老师主讲的Hello HarmonyOS进阶系列应用篇第六课<短视频应用开发>, 已于6月8日晚上 19 点在HarmonyOS社群内成功举行. 本节课夏德旺老师带领大家了解 ...