DOM BOM操作

已于 2022-06-06 17:26:55 修改
阅读量119 收藏
点赞数
分类专栏： 前端学习路线 文章标签： javascript 前端 html
于 2022-06-05 22:10:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39165819/article/details/125126020
版权

document.getElementById(‘time’);
dir可以打印出该对象结构
获取的是一个对象
举例

  <div id="time">2019</div>
<script>
  var time=document.getElementById('time');
  console.log(time);
  console.log(typeof time);
  console.dir(time);
</script>

在这里插入图片描述
通过getElementsByTagName获取某类标签。

<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<ol id="ol">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ol>
  <script>
    //1.返回的是 获取过来元素对象的集合 以伪元素形式存储
    var lis=document.getElementsByTagName('li');
    console.log(lis)
    for (var i=0;i<lis.length;i++){
      console.log(lis[i]);
    }
    //获取ol中的小li
    var lis2=document.getElementById('ol');
    for (var i=0;i<lis.length;i++){
      console.log(lis2.getElementsByTagName('li'));
    }
    //页面中只有一个ol时获取的是伪数组形式，该伪数组是没有内容的，需要指定
    //伪数组中的元素才可以获取到li
    var lis3=document.getElementsByTagName('ol');
    console.log(lis3[0].getElementsByTagName('li'));
  </script>
</body>

通过getElementsByClassName获取到类名，通过querySelector获取到body中第一个元素的值

<body>
  <div>
    <p class="hello">你好</p>
    <p class="hello">hello</p>
  </div>
  <ol>
    <li></li>
  </ol>
<script>
  var hello=document.getElementsByClassName('hello');
  console.log(hello);
  var div=document.querySelector('div');
  console.log(div);
  var p=document.querySelector('.hello');
  console.log(p)
</script>
</body>

效果如图
在这里插入图片描述
querySelectAll获取所有相关元素

document.querySelectAll('');

举例

<body>
  <div>
    <p class="hello">你好</p>
    <p class="hello">hello</p>
  </div>
  <script>
    //querySeletorAll返回指定选择器的所有元素对象集合
     var allHello = document.querySelectorAll('.hello');
     console.log(allHello);
  </script>
</body>

获取body元素可以直接使用document.body形式获取

<body>
  <script>
    var body=document.body;
    console.log(body);
  </script>
</body>

在这里插入图片描述
事件三要素:
1.获取事件源
2.绑定事件 注册事件
3.添加事件处理程序
举例

<body>
<div>11111111</div>
  <script>
    var body=document.body;
    console.log(body);
    var div=document.querySelector('div');
    div.onclick = function (e){
        alert('我被击中了');
        console.log(e)
    }
  </script>
</body>

改变事件内容

<button type="button">改变事件内容</button>
<div>11111111</div>

    var button=document.querySelector('button');
    button.onclick = function (){
        div.innerText="2222222";
    }

<div>
  <button id="bird">鸟</button>
  <button id="cat">猫</button>
</div>
<input id="input" value="输入内容" type="text">
<div id="box">
  <img  width="860" height="540" src="../first/image/bird.jpg" id="img">
  <i class="close-btn" id="close-btn">x</i>
</div>
<script>
  var bird=document.getElementById('bird');
  var cat = document.getElementById('cat');
  var img=document.getElementById('img');
  bird.onclick=function (){
    img.src='../first/image/bird.jpg'
    input.value="🐱"
  }
  cat.onclick = function (){
    img.src='../first/image/cat.jpg'
    input.value="🐕"
  }
    closeBtn.onclick = function (){
    alert("111111")
      box.style.display='none';
  }
</script>

在这里插入图片描述
在这里插入图片描述

显示隐藏文本框内容

<body>
  <input type="text" value="手机">

  <script>
    //1.获取元素
    var text=document.querySelector('input');
    //2.注册事件 获得焦点事件
    text.onfocus = function (){
      if (this.value==="手机"){
        this.value='';
      }
      this.style.color='#333';
      //设置四个边框
      this.style.outline='0';
    }
    //3.注册事件 失去焦点事件 onblur
    text.onblur = function (){
      if (this.value===''){
        this.value="手机";
      }
    }
    //失去焦点把文本框颜色变浅
    this.style.color='#999';
  </script>
</body>

在这里插入图片描述
在这里插入图片描述
通过className修改样式

  <style>
    .purple{
      width: 100px;
      height: 100px;
      background-color: purple;
      border: 2px solid gray;
      border-radius: 20px;
      text-align: center;
      line-height: 100px;
    }
  </style>
<body>
  <div className="text">文本</div>
<script>
  var div=document.querySelector('div');
  div.onclick =function (){
  //className会覆盖原来的样式所以只需要把原先样式加上就好
    this.className='text purple';
  }
</script>
</body>

点击后效果
在这里插入图片描述
改变border

<body>
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
  <button>按钮5</button>
<script>
<!--  1.获取所有按钮元素-->
var btns=document.getElementsByTagName('button');
for (var i=0;i<btns.length;i++){
  btns[i].onclick = function (){
    for (var i=0;i<btns.length;i++){
      btns[i].style.backgroundColor='';
      btns[i].style.border='2px outset buttonbar'
    }
    this.style.backgroundColor='cyan';
    this.style.border='1px solid grey';
  }
}
</script>
</body>

隔行变色实现

<body>
  <table>
    <thead>
      <th>代码</th>
      <th>名称</th>
      <th>最新公布净值</th>
      <th>累计净值</th>
      <th>前单位净值</th>
      <th>净值增长率</th>
    </thead>
    <tbody>
      <tr>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
      </tr>
      <tr>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
      </tr>
      <tr>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
      </tr>
      <tr>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
      </tr>
      <tr>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
      </tr>
      <tr>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
      </tr>
    </tbody>
  </table>
<script>
  //1.获取元素 获取的是tbody里面所有的行
  var trs=document.querySelector('tbody').querySelectorAll('tr');
  //2.利用循环绑定注册事件
  for (var i=0;i<trs.length;i++){
    //3.鼠标经过事件onmouseover
    trs[i].onmouseover = function (){
      this.className='bg';
    }
    //4.鼠标离开事件 onmouseout
    trs[i].onmouseout = function (){
      this.className='';
    }
  }
</script>

效果：
在这里插入图片描述

全选反选实现，即选中全选框后把状态给下面的每个单选框。

选择底下的单选框，选中后将全选框一起勾中的效果是，遍历每个单选框，只要有一个没有勾到，就不勾选全部。
代码如下：

<body>
  <table>
    <thead>
      <th>
        <input type="checkbox" id="j_cbAll">
      </th>
      <th>代码</th>
      <th>名称</th>
      <th>最新公布净值</th>
      <th>累计净值</th>
      <th>前单位净值</th>
      <th>净值增长率</th>
    </thead>
    <tbody id="j_tb">
      <tr>
        <td>
          <input type="checkbox">
        </td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox">
        </td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox">
        </td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox">
        </td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox">
        </td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox">
        </td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
        <td>11231</td>
      </tr>
    </tbody>
  </table>
<script>

  var j_tbAll=document.getElementById('j_cbAll');
  var j_tbs=document.getElementById('j_tb').getElementsByTagName('input');
  j_tbAll.onclick = function (){
    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;
      for (var j=0;j<j_tbs.length;j++){
        if (!j_tbs[j].checked){
          flag=false;
          break;
        }
      }
      j_tbAll.checked=flag;
    }
  }
</script>
</body>

效果：
在这里插入图片描述

怎么获取属性值
element.getAttribute(‘属性’)；
在这里插入图片描述
关于DOM 操作，我们主要是针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。
创建

//重写页面
1.document.write
2.innerHTML //效率高
3.createElement //创建节点清晰

增

1.appendChild
2.insertBefore

改
在这里插入图片描述
查询操作
在这里插入图片描述
属性操作
在这里插入图片描述
事件操作
在这里插入图片描述

天怀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
BOM DOM
Waller_的博客
09-10 198
JavaScript---BOM和DOM BOM和DOM实现与网页交互 BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。 DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。 Window对象是客户端JavaScript最高层对象之一，由于window对...
DOM操作 和 BOM操作
estrusKing的博客
07-08 292
DOM操作 和 BOM操作 DOM操作 JavaScript 提供的 操作 html文件的方法 BOM操作 JavaScript 提供的 操作 浏览器的方法 DOM操作之获取标签对象 推荐使用方式 对于低版本IE不兼容 document.querySelector('条件'); 获取符合条件的第一个标签对象 执行结果是 一个独立的标签对象 可以直接操作这个独立的标签对象 如果没有符合条件的标签对象 结果是 null
DOM和BOM元素的操作
li_3579的博客
06-20 155
DOM(文档对象模型)（一） 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model） HTML DOM树 DOM经常进行的操作 获取元素 对元素进行操作(设置其属性或调用其方法) 动态创建元素 事件(什么时机做相应的操作) 获取页面元素 为什么要获取页面元素 例如：我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，才进行后续操作 根据id获取元素 var div = document.getElementById('main'); con
45-js操作DOM和bom操作
weixin_44614066的博客
04-15 444
一、js中的DOM和BOM的基本操作 ECMAScript(核心语法)： BOM(Browser Object Model 浏览器对象模型) 操作浏览器 DOM(Document Object Model 文档对象模型) 操作标记语言标签 BOM对象： window 用来操控浏览器窗口 - BOM的核心 location(操作浏览器的地址栏) document(操作浏览器窗口内容节点) - DO...
day57 BOM操作和DOM操作
xiaoyurainzi的博客
09-24 247
目录每日测验上周内容回顾HTMLCSSJS今日内容概要今日内容详细BOM与DOM操作BOM操作window子对象history对象location对象(掌握)弹出框计时器相关DOM操作查找标签节点操作获取值操作class、css操作事件 每日测验 """ 今日考题: 1.什么是Js，Js的数据类型有哪些,Js序列化反序列化用的是什么方法 2.现有三个普通函数a,b,c都需要用户登陆之后才能访问。现需要你写一个装饰器校验用户是否登陆，并且用户只要登陆一次其他函数在调用时也无需再校验(提示:全局标志位) 3.什
DOM和BOM的使用
01-08
BOM 提供了一些浏览器相关的功能，例如窗口、导航、历史记录等，而 DOM 则是文档对象模型，它允许开发者通过 JavaScript 操作文档的内容和结构。 DOM 概述 DOM 是一个文档对象模型，它将 HTML 文档抽象为一个树形...
Javascript之BOM与DOM讲解
02-09
JavaScript是Web开发中不可或缺的一部分，主要由三个组成部分构成：ECMAScript、DOM（文档对象模型）...在实际开发中，理解DOM和BOM的差异以及如何协同使用它们是至关重要的，因为这直接影响到网页的可操作性和功能性。
javascript操作BOM对象.docx
07-05
JavaScript 操作 BOM 对象 本文档主要介绍了 JavaScript 操作 BOM（ Browser Object Model）对象的相关知识点，包括 window 对象、history 对象、location 对象、Document 对象、Math 对象和 Date 对象等。 window...
BOM与DOM的区别分析
09-05
在Web开发中，BOM（Browser Object Model）和DOM（Document Object Model）是两个至关重要的概念，它们都是用于处理和操作网页内容的接口。DHTML（Dynamic HTML）技术的实现离不开这两者的支持，因为它们提供了...
javascript学习笔记（三）BOM和DOM详解
10-25
本文应用了很多实例，来解读JavaScript中BOM和DOM，DOM是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。,而BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的...
Dom 与 Bom 学习
angel_791的博客
06-26 814
JS进阶 DOM BOM
11.前端JavaScript之【BOM操作】&【DOM操作】
放纵kf的博客
11-18 1322
目录 1.BOM与DOM操作基本概念 2.BOM操作 (window对象，window子对象，弹出框，计算器) 3.DOM操作(查标签，操作标签，操作class与css，获取值) 1.BOM与DOM操作基本概念 1.BOM: 浏览器对象模型 Browser Object Model js代码操作浏览器 2.DOM: 文档对象模型 Document Object Model js代码操作标签 2.BOM操作 (windo..
DOM操作 和 BOM操作，超详细
最新发布
2301_76379462的博客
04-03 1015
给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里免费领取，先到先得哦。由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里免费领取，先到先得哦。[外链图片转存中…(img-T3gLu0JI-1712095662938)][外链图片转存中…(img-l7ymwMCE-1712095662939)]
Javascript操作BOM和DOM详解（1）
葡萄藤的博客
12-26 4235
一、JavaScript的实现包括以下3个部分： 1.ECMAScript(核心) 描述了JS的语法和基本对象。 2.浏览器对象模型（BOM） 与浏览器交互的方法和接口 3.文档对象模型 （DOM） 处理网页内容的方法和接口 （1）ECMAScript：         ...
DOM操作和BOM操作
MY的博客
08-07 1315
DOM操作（文档对象模型）知识点：1、DOM本质什么？ 浏览器把拿到的HTML代码，结构化一个浏览器能识别并且js可操作的一个模型而已 2、DOM节点操作//获取DOM节点： var div=document.getElementById('div1')//元素 var divList=document.getElementsByTagName('div')//元素集合
HTML DOM和BOM常用操作总结
胤字堂的博客
11-24 2058
HTML DOM和BOM常用操作总结 HTML DOM常用操作 getElementById()//返回带有指定 ID 的元素。 element.getElementsByTagName()//返回拥有指定标签名的所有子元素的集合。 getElementsByClassName()//返回包含带有指定类名的所有元素的节点列表。 element.appendChild()//向元素添加新的
JS 面试知识学习历程（第六天） -- DOM操作和BOM操作
huhao0829的博客
02-01 1009
Chapter6 JS-Web-API – DOM操作和BOM操作这是我自己的学习过程总结，如果有什么写的不清楚的地方，欢迎大家交流、批评、提问。可以在这里评论，也可以在github上提问，谢谢大家6.1 DOM操作（Document Object Model）题目 DOM是哪种基本的数据结构？ DOM操作的常用API有哪些 DOM节点的attr和property有何区别 知识点 DOM本质 D
JS-DOM操作和BOM操作
IT_Mr_guo的博客
05-26 710
DOM 简介 DOM是Document、Object、Model的简称。(文档对象模型) W3C DOM 标准被分为 3 个不同的部分： 核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 HTML DOM - 针对 HTML 文档的标准模型 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值