js必会的DOMBOM操作

未来笛卡尔

已于 2022-06-17 10:50:01 修改

阅读量198

点赞数 1

分类专栏：前端文章标签： javascript 前端 html

于 2022-05-25 17:24:38 首次发布

本文链接：https://blog.csdn.net/weixin_44954209/article/details/124887729

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在这里插入图片描述

DOM

DOM—文档对象模型，处理可扩展标记语言的标准编程接口
在这里插入图片描述
文档：一个页面
元素：页面中所有标签
节点：网页中所有内容（标签、属性、文本、注释等）
DOM把以上内容都看作是对象

获取元素

获取页面中的元素的方式：

根据ID获取
根据标签名获取
通过HTML5新增的方法获取
特殊元素获取

getElementByld()
在这里插入图片描述

getElementsByTagName()

在这里插入图片描述

element.getElementsByTagName(‘标签名’)；

注：父元素必须是单个对象（必须指明是哪个元素对象），获取的时候不包括父元素自己

在这里插入图片描述

事件三要素

事件源：事件被触发的对象
事件类型：如何触发什么事件
事件处理程序：通过一个函数赋值的方式完成

执行事件的步骤

获取事件源
注册事件（绑定事件）
添加事件处理程序（采取函数赋值形式）

改变元素内容
在这里插入图片描述

返回系统当前时间：

在这里插入图片描述

innerText不识别html标签非标准去除空格和换行
innerHTML识别 W3C标准保留空格和换行
两属性可读写可获取元素里的内容

在这里插入图片描述

修改元素属性
在这里插入图片描述

分时显示不同图片，显示不同问候语
在这里插入图片描述

在这里插入图片描述

//1.获取元素
var img=document.querySelector('img');
var div=document.querySelector('div');
//2.得到当前的小时
var date=new Date();
var h=date.getHours();
//3.判断小时改变图片和文字信息
if(h<12){
  img.src='';
  div.innerHTML='上午好';
}else if(h<18){
  img.src='';
  div.innerHTML='下午好';
}else{
  img.src='';
  div.innerHTML='晚上好';
}

表单
在这里插入图片描述

this.disabled=true;也可

案例：仿京东显示密码
在这里插入图片描述

//删掉一个id=‘’

在这里插入图片描述

//获取元素
var eye=document.getElementById('eye');
var pwd=document.getElementById('pwd');
//注册事件
var flag=0;
eye.onclick=function(){
  if(flag==0){
     pwd.type='text';
     eye.src='图片';
     flag=1;//赋值操作
  }else{
      pwd.type='password';
      eye.src='图片';
      flag=0;
  }
}

样式属性
在这里插入图片描述

仿淘宝关闭二维码
在这里插入图片描述

在这里插入图片描述

//获取元素
var btn=document.querySelector('.close-btn');
var boc=document.querySelector('.box');
//注册事件
btn.onclick=function(){
  box.style.display='none';
}

案例：循环精灵图背景
for循环
在这里插入图片描述

//获取元素
var lis=document.querySelectorAll('li');
for(var i=0;i<lis.length;i++){
//让索引号*44就是每个li的背景y坐标
   var index=i*44;
   lis[i].style.backgroundPosition='0 -'+index+'px';
}

案例：显示隐藏文本框内容
在这里插入图片描述

//获取元素
var text=document.querySelector('input');
//注册事件 获得焦点事件 onfocus
text.onfocus=function(){
   //console.log('得到焦点');
   if(this.value==='手机'){
     this.value='';
   }
   //获得焦点需要把文本框里文字颜色变黑
   this.style.color='#333';
}
//注册事件失去焦点 onblur
text.onblur=function(){
   //console.log('失去焦点');
   if(this.value===''){
     this.value='手机';
   }
   //失去焦点需要把文本框里文字颜色变浅
   this.style.color='#999';
}

通过className更改元素样式

//1.使用element.style获得修改元素样式
var test=document.querySelector('div');
test.onclick=function(){
   //this.style.background='purple';
   //this.style.color='#fff';
  // this.style.fonsize='25px';
   //this.style.marginTop='100px';
   //当前元素类名改为了change
   //2.可通过修改元素className更改元素样式
    this.className='change';
   //3.如想保留原先的类名
   this.className='first change';
}

在这里插入图片描述

注：

样式修改较多，可以采取操作类名方式更改元素样式
class是个保留字，因此使用className来操作元素类名属性
className会直接更改元素的类名，会覆盖原先的类名

案例：密码框格式提示错误信息
在这里插入图片描述

在这里插入图片描述

//获取元素
var ipt=document.querySelector('.ipt');
var message=document.querySelector('.message');
//注册事件 失去焦点
ipt.onblur=function(){
  //根据表单里面值得长度 ipt.value.length
  if(this.value.length<6||this.value.length>16){
    //console.log('错误');
    message.className='message wrong';
    message.innerHTML='您输入的位数不对要求6~16位';
  }else{
    message.className='message right';
    message.innerHTML='您输入的正确';
  }
}

排他思想
在这里插入图片描述

//获取所有按钮元素
var btns=document.getElementsByTagName('button');
//btns得到的是伪数组 里面每个元素 btns[]
for(var i=0;i<btns.length;i++){
   btns[i].onclick=function(){
   //1)先把所有按钮背景颜色去掉
   for(var i=0;i<btns.length;i++){
   }
   //2）再让当前元素背景颜色为pink
     this.style.backgroundColor='pink';
   }
}

百度换肤效果
在这里插入图片描述

//获取元素
var imgs=document.querySelector('.baidu').querySelectorAll('img');
//循环注册事件
for(var i=0;i<imgs.length;i++){
  imgs[i].onclick=function(){
    //this.src就是点击图片的路径
    //console.log(this.src);
    //把这个路径this.src给body
    document.body.style.backgroundImage='url('+this.src+')';
  }
}

案例：表格隔行变色
在这里插入图片描述

//获取元素 获取tbody里所有的行
var trs=document.querySelector('tbody').querySelectorAll('tr');
//利用循环绑定注册事件
for(var i=0;i<trs.length;i++){
//鼠标经过事件onmouseover
  trs[i].onmouseover=function(){
     this.className='bg';
  }
  //鼠标离开事件onmouseout
  trs[i].onmouseout=function(){
     this.className='';
  }
}

案例：表单全选取消全选案例

在这里插入图片描述

//全选 取消全选
var j_cbAll=document.grtElementById('j_cbAll');//全选按钮
var j_tbs=document.grtElementById('j_tb').getElementByTagName('input');//下面所有复选框

//注册事件
j_cbAll.onclick=function(){
//this.checked  ture 选中
   console.log(this.checked);
   for(var i=0;i<j_tbs.length;i++){
     j_tbs[i].checked=this.checked;
   }
}

//下面全部选中 上面全选选中
for(var i=0;i<j_tbs.length;i++){
  j_tbs[i].onclick=function(){
     var flag=true;
    //每次点击下面的复选框都要循环检查这4个小按钮是否全被选中
    for(var i=0;i<j_tbs.length;i++){
       if(!j_tbs[i].checked){
          flag=false;
          break;//退出
       }
    }
    j_cbAll.checked=flag;
  }
}

获取属性值

element.属性内置属性
element.getAttribute(‘属性’);

设置属性值

element.属性=‘值’ 设置内置属性值
element.setAttribute(‘属性’,‘值’)；（主要针对自定义属性）

移除属性

element.removeAttribute(‘属性’);

案例：tab栏切换
在这里插入图片描述

//获取元素
var tab_list=document.querySelector('.tab_list');
var lis=tab_list.querySelectorAll('li');
var items=document.querySelectorAll('.item');
//for循环绑定点击事件
for(var i=0;i<;is.length;i++){
  //5个小li设置索引号
  lis[i].setAttribute('index',i);
  lis[i].onclick=function(){
    for(var i=0;i<lis.length;i++){
      lis[i].className='';
    }
    this.className='current';
    //下面的显示内容模块
    var index=this.getAttribute('index');
    console.log(index);
    //排他思想
    for(var i=0;i<items.length;i++){
      items[i].style.display='none';
    }
    items[index].style.display='block';
  }
}