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 ...
随机推荐
- Linux修改账户密码
打开终端并登录到要修改密码的账户 输入 passwd 命令,然后 Enter 系统会提示你输入 Current password. 如果是第一次登录或者忘记密码,使用 passwd -d userna ...
- C#词云生成器
GitHub - sdcb/Sdcb.WordCloud: Generate WordCloud image from .NET/.NET Core 效果 根据mask生成
- [ERROR] “不支持使用 SOAP 编码。SOAP 扩展元素包含 use=“encoded“ “ 无法解析 WSDL。
下载axis-1_4,地址https://archive.apache.org/dist/ws/axis/1_4/ 解压,进入D:\axis-1_4\lib 执行命令 java -cp mail.ja ...
- PS的流水灯设计分析
PS的流水灯设计分析 1.实验原理 PS设计流水灯就是采用ARM的硬核实现流水灯设计.ARM内核采用的就是一个可以执行软件程序的平台.这里采用C语言设计.基于前面构建的GPIO外设的硬件平台,这里实现 ...
- java使用Ffmpeg合成音频和视频
1.Maven依赖 <!-- 需要注意,javacv主要是一组API为主,还需要加入对应的实现 --> <dependency> <groupId>org.byte ...
- 【已解决】aconda3 创建和切换jupyter Kernel（安装好了tensorflow在jupyter中无法使用）
如下图:在这里更换python环境内核(如果你把tensorflow安装在了一个新建的虚拟环境) 1. 创建新的环境(或者是直接激活进入已经安装了tensorflow的环境) conda create ...
- C++设计模式 - 门面模式（Facade）
接口隔离模式 在组件构建过程中,某些接口之间直接的依赖常常会带来很多问题.甚至根本无法实现.采用添加一层间接(稳定)接口,来隔离本来互相紧密关联的接口是一种常见的解决方案. 典型模式 Facade P ...
- 进程管理与 SELinux
进程管理与 SELinux 在 Linux 系统当中:『触发任何一个事件时,系统都会将他定义成为一个进程,并且给予这个进程一个 ID ,称为 PID,同时依据启发这个进程的用户与相关属性关系,给予 ...
- 玩转OpenHarmony智能家居：如何实现树莓派“碰一碰”设备控制
一.简介 "碰一碰"设备控制,依托NFC短距通信协议,通过碰一碰的交互方式,将OpenAtom OpenHarmony(简称"OpenHarmony")标准系统 ...
- 【直播回顾】OpenHarmony知识赋能六期第五课—WiFi子系统
8月11日晚上19点,知识赋能第六期第五节直播 <OpenHarmony知识赋能-WiFi子系统> ,在OpenHarmony开发者成长计划社群内成功举行. 第六期直播由从事底层基础工作1 ...