JavaScript——DOM之操作元素
目录
- 一、如何获取元素
-
- 1、根据ID获取-getElementById
- 2、根据标签名获取-getElementsByTagName
- 3、根据类名获取-getElementsByClassName
- 4、获取特殊元素
- 二、事件基础
-
- 1、事件三要素
- 2、常见的鼠标事件
- 3、执行事件过程
- 三、操作元素
-
- 1、改变元素内容
- 2、修改元素属性
- 3、修改表单属性
- 4、修改样式属性
- 6、排他思想（算法）
- 7、案例
-
- 更换背景图片
- 表格隔行变色
- 表单全选、取消全选
- 8、自定义属性的操作
-
- 获取属性值
- 设置属性值
- 9、 H5自定义属性
-
- 1.设置H5自定义属性
一、如何获取元素 1、根据ID获取-getElementById 我们会用到 getElementById 来进行获取元素：
语法：var element = document.getElementById(id);
2020.8.11
>
//因为我们的文档页面是从上往下加载，所以先得有标签，然后将script写到标签下面
//get ：获得，element：元素，by：通过
//参数id是大小写敏感的字符串
//返回的是一个元素对象
var timer = document.getElementById('time');
//console.dir，打印我们返回的元素对象
console.dir(timer);
2、根据标签名获取-getElementsByTagName 我们是用的getElementsByTagName来获取的；
语法：var element = document.getElementsTagName(‘字符’)
>
//返回的是获取过来元素对象的集合，以伪数组的形式储存
var element = document.getElementsByTagName('字符')
//我们想要依次打印里面对象，我们可以采用遍历的方式
for(var i=0;
i
注意：1、如果页面中只有一个标签，返回的还是伪数组的形式
2、如果页面中没有这个元素，返回的是空的伪数组的形式
3、根据类名获取-getElementsByClassName getElementsByClassName 来获取某些元素的集合
语法:var element=document.getElementsByClassName(‘类名’)；
盒子1
盒子2
>
// 1. getElementsByClassName 根据类名获得某些元素集
var boxs = document . getElementsByClassName( 'box' ) ;
console . log(boxs);
// 2. querySelector 返回指定选择器的第一个元素对象,切记 里面的选择器要加符号
var firstBox = document . querySelector(' .box' );
console . log(firstBox);
var nav = document . querySelector( ' #nav' );
console .1og(nav);
var li = document . querySelector( ' li' );
console . log(1i);
// 3. querySelectorA11( )返回指定选择器的所有元素对象集
var al1Box = document . querySelectorAll(' . box' );
console .1og(al1Box);
var lis = document . querySelectorAl1('li' );
console.1og(lis);
// 2. querySelector 返回指定选择器的第一个元素对象,切记 里面的选择器要加符号
// 3. querySelectorAll( )返回指定选择器的所有元素对象集
4、获取特殊元素
>
// 1.获取body元素
var bodyEle = document . body;
console . log(bodyEle);
console .dir (bodyEle);
// 2.获取html元素
// var htmlEle = document. html ;
错误！
var htmlEle = document . documentElement ;
console . log(htmlEle);
二、事件基础 1、事件三要素 三要素是：
事件源：事件被触发的对象，谁，比如 按钮；
事件类型：如何触发，什么事件
事件处理程序：通过一个函数赋值的方式，完成
2、常见的鼠标事件 onclick 鼠标点击左键触发
onmouseover 鼠标经过触发
onmouseout 鼠标离开触发
onfocus 获得鼠标焦点触发
onblur 失去鼠标焦点触发
onmousemove 鼠标移动触发
onmouseup 鼠标弹起触发
onmousedown 鼠标按下触发
3、执行事件过程
>
//执行事件步骤
//点击div控制台输出我被选中了
// 1.获取事件源
var div = document . querySelector( 'div' );
// 2.绑定事件注册事件
// div. onclick
// 3.添加事件处理程序
div. onclick = function() {
console.1og('我被选中了');
执行事件步骤：
点击div控制台输出我被选中了
1.获取事件源
var div = document . querySelector( ‘div’ );
2.绑定事件注册事件
div. onclick
3.添加事件处理程序
div. onclipk = function() {
console.1og(‘我被选中了’);
三、操作元素 1、改变元素内容 a、 element. innerText
从起始位置到终止位置的内容,但它去除html标签，同时空格和换行也会去掉
b、 element. innerHTML
起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行
123
>
//1、获取元素
var tim = document.querySelector("button");
var show = document.querySelector('p');
//2、注册事件
tim.onclick = function(){
show.innerText = getDate();
tim.innerHTML = getDate() ;
}
function getDate(){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1 ;
var dates = date.getDate() ;
var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var day = date.getDay() ;
return "今天是："+year+'年'+month+'月'+dates +'日'+arr[day];
}
运行结果：
文章图片
文章图片
2、修改元素属性 案例：修改图片 的src、title 属性
;
;
文章图片
;
>
//1、获取元素
var happ = document.getElementById('happy');
var sa = document.getElementById('sad');
var img = document.querySelector('img');
//2、注册事件
happy.onclick = function(){
//3、处理程序
img.src = "https://www.it610.com/article/happy.jpg" ;
//修改属性img
img.title ="happy" ;
//修改属性 title
}
sa.onclick = function(){
//3、处理程序
img.src = "https://www.it610.com/article/sad.jpg" ;
img.title = "sad" ;
}
最后结果：
文章图片
文章图片
3、修改表单属性 .注册事件处理程序
bth.onclick = function() {
// input . innerHTML = ’ 点击了’;
这个是普通盒子比如div标签里面的内容
//表单里面的值文字内容是通过value 来修改的
input.value = https://www.it610.com/article/‘被点击了’;
//如果想要某个表单被禁用不能再点击disabled 我们想要这个按钮button禁用
// btn.disabled = true;
this.disabled = true;
// this指向的是事件函数的调用者btn
}
案列：
点击眼睛图片显示隐藏密码
- 锐客网
>
.da{
width: 400px;
height: 80px;
background-color: aliceblue;
position: relative;
}
.xiao{
position:absolute;
right: 0;
top: 0;
color: black;
}
文章图片
请输入6-16位数字
>
//1、获取元素
var src = https://www.it610.com/article/document.getElementById('eye');
var input = document.getElementById('tu') ;
//2、注册事件 处理事件
var flag = 0;
src.onclick = function(){
if(flag==0){
input.type='text' ;
src.src = 'https://www.it610.com/article/open.png' ;
flag = 1 ;
}
else{
input.type='password' ;
src.src = 'https://www.it610.com/article/close.png' ;
flag = 0 ;
}
}
结果如下：
文章图片
点击眼睛之后：
文章图片
恩…眼睛图片将就一下。。。
4、修改样式属性 我们可以通过JS修改元素的大小、颜色、位置等样式。
- element. style行内样式操作
- element. className类名样式操作
注意:
1.JS里面的样式采取驼峰命名法比如fontsize、backgroundColor
2.JS修改style样式操作,产生的是行内样式, css权重比较高
>搜索
>
//1、获取元素
var input = document.getElementById('xiao')
//2、注册事件 处理事件
input.onfocus = function(){//获得焦点if(input.valuehttps://www.it610.com/article/==='手机'){
input.value ='';
}
//获得焦点后 将文字颜色变黑色
input.style.color = '#333' ;
}
input.onblur = function(){//失去焦点
if(this.valuehttps://www.it610.com/article/===''){
this.value ='https://www.it610.com/article/手机'
}
//失去焦点后，将文字颜色变浅色
this.style.color = '#999'
}
运行结果：
文章图片
文章图片
文章图片
当用className进行修改是 需要注意的是：
【JavaScript——DOM之操作元素】1.如果样式修改较多,可以采取操作类名方式更改元素样式。
2. class因为是个保留字,因此使用className来操作元素类名属性
3. className会直接更改元素的类名,会覆盖原先的类名。
案列：
- 锐客网
>
.da{
width: 350px;
height: 80px;
background-color: aliceblue;
position: relative;
}
.xiao{
position:absolute;
right: 0;
top: 0;
color:#00aa00;
}
.wrong{color: #ff0000;
}
文章图片
class="sp">请输入6-16位数字
>
//1、获取元素
var src = https://www.it610.com/article/document.getElementById('eye');
var input = document.getElementById('ipt');
var spa = document.querySelector('.sp');
//2、注册事件 处理事件
var flag = 0;
src.onclick = function(){
if(flag==0){
input.type='text' ;
src.src = 'https://www.it610.com/article/open.png' ;
flag = 1 ;
}
else{
input.type='password' ;
src.src = 'https://www.it610.com/article/close.png' ;
flag = 0 ;
}
}
//失去焦点
input.onblur = function(){
//判断长度
if(this.value.length < 6 || this.value.length > 16){
spa.className = 'wrong';
spa.innerHTML = '您输入的位数不对！';
}
else{
spa.innerHTML = '输入正确！';
}
}
运行结果：
文章图片
文章图片
6、排他思想（算法） 在写代码中，排除他人，添加自己是排他思想。
//排他思想（算法）
>
//1、获取元素
var buts = document.getElementsByTagName('button') ;
//2、注册元素 处理程序
for(var i=0;
i < buts.length ;
i++){
buts[i].onclick = function(){//点击时
for(var i=0;
i < buts.length ;
i++){//将其他全部颜色去掉，变为原样
buts[i].style.backgroundColor = '';
}
this.style.backgroundColor = 'pink' ;
//留下点击的那个 变色
}
}
运行结果：
点击1111后：
文章图片
点击3333后：
文章图片
7、案例 更换背景图片
- 锐客网
="text/css">
body{
background: url(one.jpg) no-repeat center top;
}
li{
list-style: none;
}
.u{
overflow: hidden;
margin:100pxauto;
width: 410px;
height: 80px;
}
.u img{
width: 100px;
}
.u li{
float: left;
margin: 0 1px;
cursor: pointer;
}
文章图片
文章图片
文章图片
文章图片
>
//1、获取元素
var but = document.querySelector('.u').querySelectorAll('img');
//获取到的是li标签里面img的集合
console.log(but) ;
//2、注册事件 处理程序
for(var i=0;
i < but.length ;
i++){
but[i].onclick = function(){
console.log(this.src);
document.body.style.backgroundImage = 'url('+this.src+')'
}}
结果如下：
点击第三张图片：
这里的四张图片都可以点击更换。
表格隔行变色
- 锐客网
姓名
身高
爱好
工作
Data
Data
Data
Data
Data
Data
Data
Data
Data
Data
Data
Data
Data
Data
Data
Data
="text/javascript">
//1、获取元素 获取表格身体部分（不包含表头）
var trs = document.querySelector('table').querySelectorAll('.bod') ;
console.log(trs);
//2/3 注册元素 处理程序
for(var i=0;
i
运行结果如下：
当我将鼠标放在第一行时：
文章图片
放在第三行时：
文章图片
表单全选、取消全选
- 锐客网
Header
Header
Header
Data
Data
Data
Data
Data
Data
Data
Data
Data
Data
Data
Data
="text/javascript">
//1、获取元素
var tr = document.getElementById('all') ;
//全选按钮var trs = document.querySelectorAll('.a') ;
//单选按钮
//2、注册元素、3、处理程序
//全选、取消全选
tr.onclick = function(){
for(var i = 0 ;
i < trs.length ;
i++){
trs[i].checked = this.checked ;
}
}
//当单选框都选满了 全选按钮全选
for(var i=0 ;
i < trs.length ;
i++){
trs[i].onclick = function(){
var flag=true ;
//flag 用来判断按钮是否全选中
for(var i=0 ;
i < trs.length ;
i++){//每次选择单选框，判断是否全选满了
if(!trs[i].checked){
flag = false ;
break ;
}
}
tr.checked = flag ;
}
}
结果如下：
点击全选按钮时：
文章图片
取消全选按钮时：
文章图片
单选框没有满时：
文章图片
满后：
文章图片
8、自定义属性的操作 获取属性值
●element.属性 获取属性值。
●element .getAttribute(‘属性’);
区别:
●element.属性 获取内置属性值(元素本身自带的属性)
●element .getAttribute(‘属性’); 主要获得自定义的属性 (标准)我们程序员自定义的属性
>
var div = document.querySelector('div') ;
console.log(div.id) ;
//输出hh
console.log(div.index) ;
//输出undefined
console.log(div.getAttribute('index')) ;
//输出 aa，此处为自定义属性
设置属性值
●element.属性= ‘值’ 设置内置属性值。
●element . setAttribute(‘属性’，‘值’) ;
区别:
●element.属性 设置内置属性值
●element. setAttribute( ‘属性’); 主要设置自定义的属性 ( 标准)
div. setAttribute( ‘class’, ‘footer’); // class 特殊这里面写的就是class不是className
●移除属性removeAttribute(属性)
div . removeAttribute( ‘index’); //index是自己设置的属性名。
9、 H5自定义属性 自定义属性目的:是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
自定义属性获取是通过**getAttribute ( ‘属性’)**获取。
但是有些自定义属性很容易引起歧义,不容易判断是元素的内置属性还是自定义属性。
H5给我们新增了自定义属性
1.设置H5自定义属性
H5规定自定义属性data-开头做为属性名并且赋值。
比如
或者使用JS设置
element.setAttribute( ‘data index’ ,2)
推荐阅读
- JavaScript|英雄联盟轮播图逻辑
- Zabbix安装部署六————监控nginx
- 运维同学极力推荐的网络设备管理监测工具——WGCLOUD
- 人工智能|机器学习——从0开始构建自己的GAN网络
- 如何在JavaScript中实现HashMap（详细实现指南）
- 什么是JavaScript运算符以及如何使用它（）
- JAVA SE——对String类的深入理解
- JavaScript分组运算符用法示例和解析
- 准时下班系列！Excel合集之第5集—如何用Excel实现微信通讯录查找功能
- JavaScript中如何检查变量是否为数组（）