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);
<body>
<div id="time">2020.8.11</div>
<script>
//因为我们的文档页面是从上往下加载，所以先得有标签，然后将script写到标签下面
//get ：获得，element：元素，by：通过
//参数id是大小写敏感的字符串
//返回的是一个元素对象
var timer = document.getElementById('time');
//console.dir，打印我们返回的元素对象
console.dir(timer);
</script>
</body>
2、根据标签名获取-getElementsByTagName
我们是用的getElementsByTagName来获取的；
语法：var element = document.getElementsTagName(‘字符’)
<script>
//返回的是获取过来元素对象的集合，以伪数组的形式储存
var element = document.getElementsByTagName('字符')
//我们想要依次打印里面对象，我们可以采用遍历的方式
for(var i=0;i<element.length;i++){
console.log(element[i]);
}
</script>
注意：1、如果页面中只有一个标签，返回的还是伪数组的形式
2、如果页面中没有这个元素，返回的是空的伪数组的形式
3、根据类名获取-getElementsByClassName
getElementsByClassName 来获取某些元素的集合
语法:var element=document.getElementsByClassName(‘类名’)；
<body>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
// 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);
</script>
</body>
// 2. querySelector 返回指定选择器的第一个元素对象,切记 里面的选择器要加符号
// 3. querySelectorAll( )返回指定选择器的所有元素对象集
4、获取特殊元素
<body>
<script>
// 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);
</script>
</body>
二、事件基础
1、事件三要素
三要素是：
事件源：事件被触发的对象，谁，比如 按钮；
事件类型：如何触发，什么事件
事件处理程序：通过一个函数赋值的方式，完成
2、常见的鼠标事件
onclick 鼠标点击左键触发
onmouseover 鼠标经过触发
onmouseout 鼠标离开触发
onfocus 获得鼠标焦点触发
onblur 失去鼠标焦点触发
onmousemove 鼠标移动触发
onmouseup 鼠标弹起触发
onmousedown 鼠标按下触发
3、执行事件过程
<script>
//执行事件步骤
//点击div控制台输出我被选中了
// 1.获取事件源
var div = document . querySelector( 'div' );
// 2.绑定事件注册事件
// div. onclick
// 3.添加事件处理程序
div. onclick = function() {
console.1og('我被选中了');
</script>
执行事件步骤：
点击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标签,同时保留空格和换行
<body>
<button id="tim">
显示当前时间
</button >
<p>123</p>
<script >
//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];
}
</script>
</body>
运行结果：
2、修改元素属性
案例：修改图片 的src、title 属性
<body>
<button id = "happy">开心的样子</button>;
<button id = "sad">难过的时候</button>;
<img src="happy.jpg" title="happy" >;
<script >
//1、获取元素
var happ = document.getElementById('happy');
var sa = document.getElementById('sad');
var img = document.querySelector('img');
//2、注册事件
happy.onclick = function(){
//3、处理程序
img.src = "happy.jpg" ;//修改属性img
img.title ="happy" ;//修改属性 title
}
sa.onclick = function(){
//3、处理程序
img.src = "sad.jpg" ;
img.title = "sad" ;
}
</script>
</body>
最后结果：
3、修改表单属性
.注册事件处理程序
bth.onclick = function() {
// input . innerHTML = ’ 点击了’;
这个是普通盒子比如div标签里面的内容
//表单里面的值文字内容是通过value 来修改的
input.value = ‘被点击了’;
//如果想要某个表单被禁用不能再点击disabled 我们想要这个按钮button禁用
// btn.disabled = true;
this.disabled = true;
// this指向的是事件函数的调用者btn
}
案列：
点击眼睛图片显示隐藏密码
<html>
<head>
<meta charset="utf-8">
<title></title>
<style >
.da{
width: 400px;
height: 80px;
background-color: aliceblue;
position: relative;
}
.xiao{
position:absolute;
right: 0;
top: 0;
color: black;
}
</style>
</head>
<body>
<div class = "da">
<input type="password" id="tu">
<div class="xiao">
<img src="close.png" id="eye">
请输入6-16位数字
</div>
</div>
<script >
//1、获取元素
var src = document.getElementById('eye');
var input = document.getElementById('tu') ;
//2、注册事件 处理事件
var flag = 0;
src.onclick = function(){
if(flag==0){
input.type='text' ;
src.src = 'open.png' ;
flag = 1 ;
}
else{
input.type='password' ;
src.src = 'close.png' ;
flag = 0 ;
}
}
</script>
</body>
</html>
结果如下：
点击眼睛之后：
恩…眼睛图片将就一下。。。
4、修改样式属性
我们可以通过JS修改元素的大小、颜色、位置等样式。
- element. style行内样式操作
- element. className类名样式操作
注意:
1.JS里面的样式采取驼峰命名法比如fontsize、backgroundColor
2.JS修改style样式操作,产生的是行内样式, css权重比较高
案例：显示隐藏的文本框内容
<body>
<div id="da">
<input type="text" name="" id="xiao" value="手机" style="color : #999"/>
<span>搜索</span>
</div>
<script >
//1、获取元素
var input = document.getElementById('xiao')
//2、注册事件 处理事件
input.onfocus = function(){//获得焦点
if(input.value==='手机'){
input.value ='';
}
//获得焦点后 将文字颜色变黑色
input.style.color = '#333' ;
}
input.onblur = function(){//失去焦点
if(this.value===''){
this.value ='手机'
}
//失去焦点后，将文字颜色变浅色
this.style.color = '#999'
}
</script>
</body>
运行结果：
当用className进行修改是 需要注意的是：
1.如果样式修改较多,可以采取操作类名方式更改元素样式。
2. class因为是个保留字,因此使用className来操作元素类名属性
3. className会直接更改元素的类名,会覆盖原先的类名。
案列：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style >
.da{
width: 350px;
height: 80px;
background-color: aliceblue;
position: relative;
}
.xiao{
position:absolute;
right: 0;
top: 0;
color:#00aa00;
}
.wrong{
color: #ff0000;
}
</style>
</head>
<body>
<div class = "da">
<input type="password" id="ipt">
<div class="xiao">
<img src="close.png" id="eye">
<span class="sp">请输入6-16位数字</span>
</div>
</div>
<script >
//1、获取元素
var src = 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 = 'open.png' ;
flag = 1 ;
}
else{
input.type='password' ;
src.src = 'close.png' ;
flag = 0 ;
}
}
//失去焦点
input.onblur = function(){
//判断长度
if(this.value.length < 6 || this.value.length > 16){
spa.className = 'wrong';
spa.innerHTML = '您输入的位数不对！';
}
else{
spa.innerHTML = '输入正确！';
}
}
</script>
</body>
</html>
运行结果：
6、排他思想（算法）
在写代码中，排除他人，添加自己是排他思想。
//排他思想（算法）
<body>
<button type="button">1111</button>
<button type="button">2222</button>
<button type="button">3333</button>
<button type="button">4444</button>
</body>
<script>
//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' ;//留下点击的那个 变色
}
}
</script>
运行结果：
点击1111后：
点击3333后：
7、案例
更换背景图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background: url(one.jpg) no-repeat center top;
}
li{
list-style: none;
}
.u{
overflow: hidden;
margin:100px auto;
width: 410px;
height: 80px;
}
.u img{
width: 100px;
}
.u li{
float: left;
margin: 0 1px;
cursor: pointer;
}
</style>
</head>
<body>
<ul class="u">
<li><img src="one.jpg" ></li>
<li><img src="two.jpg" ></li>
<li><img src="three.jpg" ></li>
<li><img src="four.jpg" ></li>
</ul>
<script >
//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+')'
}
}
</script>
</body>
</html>
结果如下：
点击第三张图片：
这里的四张图片都可以点击更换。
表格隔行变色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<thead class="head">
<th>姓名</th>
<th>身高</th>
<th>爱好</th>
<th>工作</th>
</thead>
<tbody>
<tr class="bod">
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr class="bod">
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr class="bod">
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr class="bod">
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
//1、获取元素 获取表格身体部分（不包含表头）
var trs = document.querySelector('table').querySelectorAll('.bod') ;
console.log(trs);
//2/3 注册元素 处理程序
for(var i=0;i<trs.length;i++){
trs[i].onmouseover = function(){
this.style.backgroundColor = 'pink' ;
}
trs[i].onmouseout = function(){
this.style.backgroundColor = '' ;
}
}
</script>
</body>
</html>
运行结果如下：
当我将鼠标放在第一行时：
放在第三行时：
表单全选、取消全选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<thead>
<th><input type="checkbox" name="" id="all" value="" /></th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</thead>
<tbody>
<tr >
<td><input type="checkbox" name="" class="a" value="" /></td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td><input type="checkbox" name="" class="a" value="" /></td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td><input type="checkbox" name="" class="a" value="" /></td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td><input type="checkbox" name="" class="a" value="" /></td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
<script type="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 ;
}
}
</script>
</body>
</html>
结果如下：
点击全选按钮时：
取消全选按钮时：
单选框没有满时：
满后：
8、自定义属性的操作
获取属性值
●element.属性 获取属性值。
●element .getAttribute(‘属性’);
区别:
●element.属性 获取内置属性值(元素本身自带的属性)
●element .getAttribute(‘属性’);主要获得自定义的属性 (标准)我们程序员自定义的属性
<body>
<div id="hh" index='aa'>
</div>
</body>
<script>
var div = document.querySelector('div') ;
console.log(div.id) ;//输出hh
console.log(div.index) ;//输出undefined
console.log(div.getAttribute('index')) ;//输出 aa ，此处为自定义属性
</script>
设置属性值
●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)