JavaScript 内容总结(DOM和BOM)(一)DOM基础

最新推荐文章于 2024-06-21 16:41:46 发布
最新推荐文章于 2024-06-21 16:41:46 发布
阅读量105 收藏 1
点赞数 1
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47735503/article/details/114139383
版权

JavaScript 内容总结（JavaScript高级程序设计）

  1. DOM简介
  2. 获取元素
  3. 事件基础
  4. 操作元素
  5. 节点操作
1.DOM简介
  • 编程接口：处理网页的结构 样式 内容
  • DOM树
    1. 文档：一个页面就是一个文档，DOM中使用document表示
    2. 元素：页面中的所有标签都是元素，DOM中使用element表示
    3. 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示
  • DOM把以上内容都看作是对象
2.获取元素

  • 根据ID获取

    <body>
  <div id="time">2101-8-9</div>
  <script>
    var time = document.getElementById('time');
    console.dir(time);
  </script>
</body>

  • 根据标签名获取 返回对象集合 以伪数组形式存储

    <body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <script>
    var li = document.getElementsByTagName('li');
    console.log(li);
    for (let i = 0; i < li.length; i++) {
      console.log(li[i]);
    }
    // 获取父元素内部所有制定标签名的子元素
    //父元素必须是单个对象（必须指明是哪个元素对象）
    var ul = document.getElementsByTagName('ul')[0]
    console.log(ul.getElementsByTagName('li'));
  </script>
</body>

    在这里插入图片描述

  • 通过HTML5新增的方法获取

    1. 通过类名获取：根据类名返回元素对象集合

      <body>
  <div class="box1"></div>
  <div class="box1"></div>
  <script>
    var box = document.getElementsByClassName('box1');
    console.log(box);
  </script>
</body>

    2. querySelector：根据指定选择器返回第一个元素对象

      <body>
  <div class="box1"></div>
  <div id="box1"></div>
  <ul>
    <li>1</li>
    <li>2</li>
  </ul>
  <script>
    var box = document.querySelector('.box1');
    var box1 = document.querySelector('#box1');
    var li = document.querySelector('li');
    console.log(li);//<li>1</li>
  </script>
</body>

    3. querySelectorAll：根据指定选择器返回所有元素对象

      <body>
  <div class="box1"></div>
  <div class="box1"></div>
  <script>
    var box = document.querySelectorAll('.box1');
    console.log(box);//伪数组
  </script>
</body>

  • 特殊元素获取（body、html）

    <body>
  <script>
    var box = document.body;//获取body
    var box1 = document.documentElement;//获取html元素对象
    console.log(box);
    console.log(box1);
  </script>
</body>
3.事件基础

  • 事件三要素（事件源 事件类型 事件处理程序）
    在这里插入图片描述

    <body>
  <button id="btn">唐伯虎</button>
  <script>
    var btn = document.getElementById('btn');//事件源
    //事件类型 onclick
    btn.onclick = function () {//事件处理程序
      alert('点秋香');
    }
  </script>
</body>
4.操作元素

  • 改变元素内容

    1. element.innerHTML：从起始位置到终止位置的内容，识别html标签，同时保留空格和换行（推荐）
    2. element.innerText：从起始位置到终止位置的内容，不识别html标签，同时空格和换行也会去掉

  • 改变元素属性

    1. element.src .href .id .alt .title

      <body>
  <img src="./images/erweima.png" alt="" class="img">
  <script>
    // var img = document.getElementsByClassName('img')[0]
    // var img = document.getElementsByTagName('img')[0]
    // var img = document.getElementById('img')
    var img = document.querySelector('img')
    // var img = document.querySelector('.img')
    // var img = document.querySelector('#img')
    console.log(img);
    img.onclick = function () {
      console.log(11);
      img.src = './images/miaosha.png'
    }
  </script>
</body>

  • 表单元素的属性操作 （type、value、checked、selected、disabled）

    用法同上

  • 改变css样式

      <style>
    div {
      width: 200px;
      height: 200px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div></div>
  <script>
    var div = document.querySelector('div');
    div.onclick = function () {
      div.style.backgroundColor = 'purple';//变成行内样式
      div.style.width = '300px';
    }
  </script>
</body>

  • 排他思想

    如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：

    1. 所有元素全部清除样式（干掉其他人）

    2. 给当前元素设置样式（留下我自己）

    3. 注意顺序不能颠倒

      //tab切换
var tabtitle = document.getElementsByClassName('tabtitle')[0].children[0].children;
var content = document.getElementsByClassName('tabcontent_main');
for (let i = 0; i < tabtitle.length; i++) {
  tabtitle[i].setAttribute('data-index', i);//自定义属性
  tabtitle[i].onclick = function () {
      //干掉其他人
    for (let i = 0; i < tabtitle.length; i++) {
      tabtitle[i].className = '';
    }
    for (let i = 0; i < content.length; i++) {
      content[i].style.display = 'none';
    }
       //留下我自己
    this.className = 'tabtitle_first';
    var index = this.getAttribute('data-index');
    content[index].style.display = 'block';
  }
}

  • 自定义属性操作

    自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中；

    • 设置自定义属性：H5规定自定义属性data-开头作为属性名并且赋值；

    • dataset:包含所有以data开头的自定义属性；

      比如 < div data-index=‘1’ >< /div >

    1. 获取属性值

      • element.属性名； ------自带

      • element.getAttribute(‘属性名’)；-------自定义

      • element.dataset.设置自定义属性时data-后面的名；

      • element.dataset[‘设置自定义属性时data-后面的名’]

        <div data-index='1' data-list-index='1' ></div>
div.dataset.index
div.dataset.listIndex //注意驼峰命名法

    2. 设置属性值

      • element.属性名=’’； ------自带
      • element.setAttribute(‘属性名’，‘属性值’)； -------自定义

    3. 移除属性

      • removeAttribute(‘属性名’)
tabtitle[i].setAttribute('data-index', i);//自定义属性
var index = this.getAttribute('data-index');
content[index].style.display = 'block';
5.节点操作

  • 利用父子兄级获取元素

    在这里插入图片描述

  • 获取父级节点：parentNode 只能得到离他最近的父节点 没有则返回null

    <body>
  <div class="grandparent">
    <div class="parent">
      <div class="son">

      </div>
    </div>
  </div>
  <script>
    var son = document.querySelector('.son');
    console.log(son.parentNode);//<div class="parent">
  </script>
</body>

  • 获取子级节点：childNodes 包含元素节点 文本节点 不推荐使用

在这里插入图片描述

  • 获取子级节点：children 包含元素节点 推荐使用

    <body>
  <ul>
    <li>01</li>
    <li>02</li>
    <li>03</li>
    <li>04</li>
  </ul>
  <script>
    var ul = document.querySelector('ul');
    console.log(ul.children);
    console.log(ul.children[0]);
    console.log(ul.children[ul.children.length - 1]);
    console.log(ul.firstChild);
    console.log(ul.firstElementChild);
  </script>
</body>

在这里插入图片描述

  • 下拉菜单例子

        .ul {
      margin-left: 20px;
    }

    .ul>li {
      float: left;
      width: 200px;
    }

    .ul>li>ul {
      display: none;
    }
  </style>
</head>
<body>
  <ul class="ul">
    <li><a href="#">手机</a>
      <ul>
        <li><a href="#">xiaomi</a></li>
        <li><a href="#">huawei</a></li>
        <li><a href="#">hongmi</a></li>
      </ul>
    </li>
    <li><a href="#">电脑</a>
      <ul>
        <li><a href="#">daiwe</a></li>
        <li><a href="#">lianxing</a></li>
        <li><a href="#">heihei</a></li>
      </ul>
    </li>
    <li><a href="#">家具</a>
      <ul>
        <li><a href="#">hongm</a></li>
        <li><a href="#">l</a></li>
        <li><a href="#">hei</a></li>
      </ul>
    </li>
  </ul>

  <script>
    var ul = document.querySelector('.ul')
    for (let i = 0; i < ul.children.length; i++) {
      ul.children[i].onmouseover = function () {
        ul.children[i].children[1].style.display = 'block';
      }
      ul.children[i].onmouseout = function () {
        ul.children[i].children[1].style.display = 'none';
      }
    }
  </script>
</body>

  • 获取兄弟级节点：nextSibling 包含元素节点 文本节点 不推荐使用 下一个兄弟

    ​ previousSibling 包含元素节点 文本节点 不推荐使用 上一个兄弟

    ​ nextElementSibling 包含元素节点 找不到返回null 推荐 使用 下一个兄弟

    ​ previousElementSibling 包含元素节点 找不到返回null 推荐 使用 上一个兄弟

    <body>
  <div>1</div>
  <span>2</span>
  <script>
    var div = document.querySelector('div');
    console.log(div.nextSibling);//#text "
    console.log(div.previousSibling);//#text "
    console.log(div.nextElementSibling);//<span>
  </script>
</body>
<!--鉴于previousElementSibling 、nextElementSibling有兼容性，可以如下封装函数  -->

在这里插入图片描述

  • 创建节点

    var li = document.createElement('li');

  • 添加节点 ：父节点.appendChild(子节点)；添加到原有元素的后面

    ​ 父节点.insertBefore(子节点,指定元素)；添加到原有元素的前面

    <body>
  <div>1</div>
  <script>
    var div = document.querySelector('div');
    var span = document.createElement('span');
    var label = document.createElement('label');
    div.appendChild(span);
    div.insertBefore(label,span);
  </script>
</body>

    在这里插入图片描述

  • 简单版发布留言案例

      <style>
    li {
      background-color: aqua;
    }
  </style>
</head>

<body>
  <textarea name="" id="" cols="30" rows="10"></textarea>
  <button>确定</button>
  <ul>
    <li>精彩评论</li>
  </ul>
  <script>
    var textarea = document.querySelector('textarea');
    var button = document.querySelector('button');
    var li = document.querySelector('li');
    var ul = document.querySelector('ul');
    button.onclick = function () {
      if (textarea.value == '') {
        alert('请输入评论内容');
      }
      else {
        var lili = document.createElement('li');
        lili.innerHTML = textarea.value;
        //ul.appendChild(lili);
        ul.insertBefore(lili, ul.children[1]);
      }
    }
  </script>
</body>

在这里插入图片描述

  • 删除节点：父节点.removeChild(子节点) 返回删除的节点

      <style>
    li {
      background-color: aqua;
      width: 200px;
      height: 30px;
      margin-top: 20px;
      line-height: 30px;

    }

    li a {
      float: right;
    }
  </style>
</head>

<body>
  <textarea name="" id="" cols="30" rows="10"></textarea>
  <button>确定</button>
  <ul>
    <li>精彩评论</li>
  </ul>
  <script>
    var textarea = document.querySelector('textarea');
    var button = document.querySelector('button');
    var li = document.querySelector('li');
    var ul = document.querySelector('ul');
    button.onclick = function () {
      if (textarea.value == '') {
        alert('请输入评论内容');
      }
      else {
        //(1)创建元素
        var lili = document.createElement('li');
        lili.innerHTML = textarea.value + "<a href='javascript:;'>删除</a>";
        //ul.appendChild(lili);
        //(2)添加元素
        ul.insertBefore(lili, ul.children[1]);
        //(3)删除元素
        var a = document.querySelectorAll('a');
        for (let i = 0; i < a.length; i++) {
          a[i].onclick = function () {
            ul.removeChild(this.parentNode);
          }
        }
      }
    }
  </script>
</body>

  • 克隆节点：父节点.cloneNode()

    //括号为空或者里面是false 浅拷贝 只复制标签不复制里面内容

    //括号为true 深拷贝 复制标签和里面内容

    <body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
    var ul = document.querySelector('ul');
    //括号为空或者里面是false 浅拷贝 只复制标签不复制里面内容
    //括号为true 深拷贝 复制标签和里面内容
    var lili = ul.children[0].cloneNode(true);
    ul.appendChild(lili)
  </script>
</body>

  • 动态生成表格

      <style>
    table {
      border-collapse: collapse;
      width: 500px;
      height: 30px;
    }

    table tr th {
      border: 1px solid red;
      background-color: slategrey;
    }

    table tr td {
      border: 1px solid red;
      text-align: center;
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <th>姓名</th>
      <th>学科</th>
      <th>分数</th>
      <th>操作</th>
    </tr>
  </table>
  <script>
    var datas = [{
      name: '魏璎珞',
      subject: 'javaScript',
      score: 100
    }, {
      name: '弘历',
      subject: 'javaScript',
      score: 98
    }, {
      name: '傅亨',
      subject: 'javaScript',
      score: 67
    }]
    var table = document.querySelector('table');
    for (let i = 0; i < datas.length; i++) {
      var tr = document.createElement('tr');
      table.appendChild(tr);
      for (const j in datas[i]) {
        var td = document.createElement('td');
        td.innerHTML = datas[i][j]
        tr.appendChild(td);
      }
      var td = document.createElement('td');
      td.innerHTML = "<a href='javascript:;'>删除</a>";
      tr.appendChild(td);
    }
    var a = document.querySelectorAll('a');
    for (let i = 0; i < a.length; i++) {
      a[i].onclick = function () {
        table.removeChild(this.parentNode.parentNode)
      }
    }
  </script>
</body>

在这里插入图片描述

  • 三种动态创建元素区别

    1. document.write(‘标签’)：直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
    2. document.innerHTML=“标签”：将内容写入某个DOM节点，创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
    3. document.createElement(‘标签名’)：创建多个元素效率稍微低一些，但结构更清晰
    <body>
  <div></div>
  <script>
    var div = document.querySelector('div');
    //1.
    document.write('<span>didi</span>');
    var span = document.querySelector('span');
    var arr = [];
    for (let i = 0; i <= 100; i++) {
      //2.数组形式拼接效率高
      arr.push("<label>baidu</label>");
      div.innerHTML = arr.join('');
      //div.innerHTML += "<label>baidu</label>"
      //3.
      var label = document.createElement('label')
      span.appendChild(label)
    }
  </script>
</body>
辛跃
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript之BOM和DOM总结
少年与梦
04-22 1514
1、BOMBOM(Browser Object Model) 即浏览器对象模型，主要是指一些浏览器内置对象如：window、location、navigator、screen、history等对象，用于完成一些操作浏览器的特定API。用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window...
JavaScript-BOM+DOM 知识讲解
OuYyds的博客
03-24 162
BOM 是Browser Object Model的缩写，简称浏览器对象模型, 提供了独立于内容而与浏览器窗口进行交互的对象，用于访问浏览器的功能。 1.BOM是进行浏览器操作的 2.BOM里面是存在多个对象的 3.BOM实际进行操作浏览器是使用多个对象里面的属性以及相关方法 4.BOM没有规范，我们所讲的是BOM的共有对象 window对象是BOM的核心, window对象表示浏览器窗口的一个对象 window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的. windo
JavaScript 内容总结(DOM和BOM)(三)BOM基础
qq_47735503的博客
02-27 124
JavaScript 内容总结（JavaScript高级程序设计） BOM概述 window对象的常见事件 定时器 JS执行机制 location对象 navigator对象 history对象 1.BOM概述 浏览器对象模型，提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window DOM BOM 文档对象模型 浏览器对象模型 把文档当作一个对象来看待 把浏览器当作一个对象来看待 顶级对象是document 顶级对象是window 操作页面元素 浏览器窗口
JavaScript对象之DOM和BOM
秋雨绵绵
02-23 642
本文简单对JavaScript的BOM对象和DOM对象进行了介绍，以及其中相关方法和用法。
JavaScript之彻底搞懂DOM与BOM及其区别与用法
热门推荐
跳探戈的小龙虾的博客
03-19 1万+
ECMAScript 是JavaScript（简称JS）的标准，浏览器就是去执行这个标准。 DOM（DocumentObjectModel ，文档对象模型）一种独立于语言，用于操作xml，html文档的应用编程接口。对于JavaScript：为了能够使JavaScript操作Html，JavaScript就有了一套自己的DOM编程接口。 BOM 是 Browser Object Model，浏览器对象模型。BOM 是为了控制浏览器的行为而出现的接口。
Javascript基础知识（三）BOM，DOM总结
10-25
本文是基础知识系列的第三篇文章，主要介绍javascript中BOM,DOM的一些心得总结，非常实用，有需要的朋友可以参考下
javascript bom是什么及bom和dom的区别
10-23
BOM是浏览器对象模型，DOM是文档对象模型，前者是对浏览器本身进行操作，而后者是对浏览器（可看成容器）内的内容进行操作。这篇文章给大家介绍javascript bom是什么及bom和dom的区别，感兴趣的朋友一起学习吧
实现JavaScript的组成—-BOM和DOM详解
01-19
我们知道，一个完整的JavaScript的实现，需要由三部分组成：ECMAScript(核心),BOM(浏览器对象模型)，DOM(文档对象模型)。 今天主要学习BOM和DOM。 BOM: BOM提供了很多对象，用来访问浏览器的功能，这些功能于网页...
javascript学习笔记（三）BOM和DOM详解
10-25
本文应用了很多实例，来解读JavaScript中BOM和DOM，DOM是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。,而BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的...
DOM和BOM的使用
01-08
DOM 是一个平台中立、语言中立的接口，它允许开发者通过 JavaScript 操作文档的内容和结构。DOM 将 HTML 文档抽象为一个树形结构，文档中的每个元素都是一个节点，节点之间通过父子关系连接。DOM 提供了许多方法和...
不出网上线CS的各种姿势（内网横向）
最新发布
qq_64395221的博客
06-21 435
在内网环境中可以使用ipc $生成的SMB Beacon上传到目标主机执行，但是目标主机并不会直接上线的，需要我们自己用链接命令(link <ip>)去连接它。经常是拿下一台边缘机器，其有多块网卡，用于连接内外网，内网机器都不出网。因为连接的Beacons使用Windows命名管道进行通信，此流量封装在SMB协议中，所以SMB Beacon相对隐蔽，绕防火墙时可能发挥奇效。一样，建立pystinger连接之后，直接生成payload在业务主机执行，业务内网主机192.168.111.236即可成功上线。
Day43
m0_67496588的博客
06-20 683
JSON，Ajax
工具链--nuxt框架 简介（一）
qq_35876316的博客
06-16 365
Nuxt框架是一个基于Vue.js的服务器端渲染（SSR）框架，旨在提供一套完整的前端开发解决方案，帮助开发者构建高性能、可扩展的Web应用。是一个功能强大、易于使用的Web开发框架，适用于多种开发场景和需求。Nuxt框架建立在Vue.js之上，它抽象出了管理异步数据、中间件和路由所涉及的大部分复杂配置。Nuxt不仅继承了Vue.js的所有优点，如易用性、灵活性等，还与Node.js紧密集成，使得开发者可以在项目中轻松地使用Node.js的各种功能。
vue2 使用 tailwind css vscode 100%成功
qq_57420582的博客
06-21 210
环境不一样可能不会100%成功哦。
一个很好用的地图工具的使用：思极地图，以及vue+思极地图的使用
浩星
06-18 373
思极地图，给我们带来了很多便利，这里分享下他的信息与使用。
【element 】修改下拉菜单＜el-dropdown样式为横向（超简单）
qq_61798306的博客
06-18 253
【element 】修改下拉菜单
vue格网图
南北粉面馆
06-16 322
【代码】vue格网图。
什么是try-catch?
qq_60504665的博客
06-18 400
try-catch是编程中用于处理异常（errors 或 exceptions）的一种结构，特别是在许多编程语言中，如 JavaScript、Java、C#、Python（尽管 Python 的语法略有不同）等。它的主要目的是在代码执行过程中捕获并处理运行时错误，从而防止程序因未处理的异常而意外终止。以下是try-catch。
vue3：实现图片放大浏览功能组件
qq_45820271的博客
06-15 290
本文介绍了如何在vue3种实现一个放大预览图片效果的组件
出五道和JavaScript的DOM和BOM有关的五道判断题
05-11
1. DOM（文档对象模型）是一种编程接口，用于在JavaScript中访问HTML文档的元素和内容。 (正确/错误) 2. BOM（浏览器对象模型）是一种编程接口，用于在JavaScript中控制浏览器窗口和框架的属性和方法。 (正确/错误)...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值