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 ...
随机推荐
- Anaconda 创建新环境
使用conda 命令创建一个名为 python311 的python版本为3.11的环境 conda create -n python311 python=3.11 接着使用 conda activa ...
- Docker Commands Diagram
- 【已解决】linux安装mysql依赖包（mysql-community-common-5.7.35-1.el7.x86_64）冲突
错误信息: 软件包 mysql-community-common-5.7.35-1.el7.x86_64 (比 mysql-community-common-5.7.28-1.el7.x86_64 还 ...
- #欧拉回路#AT4518 [AGC032C] Three Circuits
题目 给定一个 \(n\) 个点,\(m\) 条边的简单无向连通图, 问是否能将边分成三部分,使每部分都能成为环 分析 每个点的度数都得为偶数,这不由得想到了欧拉回路. 如果整张图是一个简单环那么一定 ...
- 网络协议之:haproxy的Proxy Protocol代理协议
目录 简介 Proxy Protocol的实现细节 版本1 版本2 Proxy Protocol的使用情况 总结 简介 代理大家应该都很熟悉了,比较出名的像是nginx,apache HTTPD,st ...
- Docker学习路线1：介绍
Docker是什么? Docker是一个开源平台,通过将应用程序隔离到轻量级.可移植的容器中,自动化应用程序的部署.扩展和管理.容器是独立的可执行单元,封装了运行应用程序所需的所有必要依赖项.库和配置 ...
- Git安装和配置教程：Windows/Mac/Linux三平台详细图文教程，带你一次性搞定Git环境
Git是一款免费.开源的分布式版本控制系统,广泛应用于软件开发领域.随着开源和云计算的发展,Git已经成为了开发者必备的工具之一.本文将为大家介绍Git在Windows.Mac和Linux三个平台上的 ...
- HDC2021技术分论坛：广发证券携手HarmonyOS打造智慧金融服务
以下文章来源于广发证券科技金融 ,作者GFS 本期我们给大家带来的是广发证券前端开发工程师黄钦佳的分享,希望能给你的HarmonyOS开发之旅带来启发~ 10月22日,华为开发者大会2021(Toge ...
- Linux之openssl实现私有CA
一.简介 Centos7.9通过openssl工具构建一个私有的CA,用于颁发证书. 验证私有CA为httpd应用签署证书 二.构建私有CA 1.编辑CA的配置文件 [root@HLWHOST tls ...
- 重新整理 .net core 实践篇—————应用层[三十]
前言 简单介绍一下应用层. 正文 应用层用来做什么的呢? 应用层用来做处理api请求的. [HttpPost] public Task<long> CreateOrder([FromBod ...