文学网站开发/重庆疫情最新消息
DOM：
概念：Document Object Model： 文档对象模型
将标记语言的各个组成部分封装为对应的对象：
Document: 整个文档对象
Element：元素对象
Attribute： 属性对象
Text：文本对象
Comment：注释对象
JavaScript通过DOM，就能够对HTML进行操作：
1）改变HTML元素的内容；
2）改变HTML元素的样式；
3）对HTML DOM事件作出反应；
4）添加和删除HTML元素；
DOM是W3C的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分。
Core DOM - 所有文档类型的标准模型。
Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象
XML DOM - XML文档的标准类型
HTML DOM - HTML 文档的标准模型
将所有的标签都包装成对象。
image： <img>
Button: <input type="button">
HTML中Element对象可以通过Document对象获取，而Document对象是通过Window对象获取的。
Document对象中提供了以下获取Element元素对象的函数：
获取Element元素的四种方式：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-DOM</title>
</head><body><img id="h1" src="img/off.gif"> <br><br><div class="cls">传智教育</div> <br><div class="cls">黑马程序员</div> <br><input type="checkbox" name="hobby"> 电影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戏
</body><script>// 1. 获取Element元素// 1.1 获取元素- 根据ID获取 // var image = document.getElementById('h1');// alert(image);// 1.2 获取元素 - 根据标签获取// var divs = document.getElementsByTagName('div');// for(let i = 0; i < divs.length; i++) {// alert(divs[i]);// }// 1.3 获取元素 - 根据name获取// var hobbys = document.getElementsByName('hobby');// for(let i = 0; i < hobbys.length; i++) {// alert(hobbys[i]);// }// 1.4 获取元素 - 根据class属性获取var divs = document.getElementsByClassName('cls');for(let i = 0; i < divs.length; i++) {alert(divs[i]);}</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-DOM</title>
</head><body><img id="h1" src="img/off.gif"> <br><br><div class="cls">传智教育</div> <br><div class="cls">黑马程序员</div> <br><input type="checkbox" name="hobby"> 电影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戏
</body><script>// 1. 获取Element元素// 1.1 获取元素- 根据ID获取 // var image = document.getElementById('h1');// alert(image);// 1.2 获取元素 - 根据标签获取// var divs = document.getElementsByTagName('div');// for(let i = 0; i < divs.length; i++) {// alert(divs[i]);// }// 1.3 获取元素 - 根据name获取// var hobbys = document.getElementsByName('hobby');// for(let i = 0; i < hobbys.length; i++) {// alert(hobbys[i]);// }// 1.4 获取元素 - 根据class属性获取// var divs = document.getElementsByClassName('cls');// for(let i = 0; i < divs.length; i++) {// alert(divs[i]);// }// 2. 查询参考手册，属性和方法var divs = document.getElementsByClassName('cls');var div1 = divs[0];div1.innerHTML = "传智教育666";</script>
</html>案例：
通过DOM操作，完成如下效果：
1、点亮灯泡；
2、将所有的div标签的标签体内容后面加上：very good；
3、使所有的复选框呈现选中的状态。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-DOM-案例</title>
</head><body><img id="h1" src="img/off.gif"> <br><br><div class="cls">传智教育</div> <br><div class="cls">黑马程序员</div> <br><input type="checkbox" name="hobby"> 电影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戏
</body><script>//1. 点亮灯泡 src的属性值var image = document.getElementById('h1');image.src = "img/on.gif";//2. 将所有div标签的内容后面加上var divs = document.getElementsByTagName('div');for(let i = 0; i < divs.length; i++) {const div = divs[i];div.innerHTML += "<font color='red'>very good</font>"; }//3. 使所有的复选框呈现选中状态var hobbys = document.getElementsByName('hobby');for(let i = 0; i < hobbys.length; i++) {const hobby = hobbys[i];hobby.checked = true;}</script>
</html>两步操作：
1）获取需要操作的元素对象；
2）查找参考手册，查看这些元素的属性和方法，来完成元素的控制。
属性和方法，就是对象思想。
相关文章：
Java Web学习笔记15——DOM对象
DOM： 概念：Document Object Model： 文档对象模型 将标记语言的各个组成部分封装为对应的对象： Document: 整个文档对象 Element：元素对象 Attribute： 属性对象 Text：文本对象 Comment&a…...
中电联系列一：rocket手把手教你理解中电联协议！
分享《一套免费开源充电桩物联网系统，是可以立马拿去商用的！》 第1部分：总则 Charging and battery swap service information exchange for electric vehicles Part 1:General 前 言 T/CEC102—2016《 电动汽车充换电服务信息交换》分为四…...
（面试官问我微服务与naocs的使用我回答了如下，面试官让我回去等通知）微服务拆分与nacos的配置使用
微服务架构 正常的小项目就是所有的功能集成在一个模块中，这样代码之间不仅非常耦合，而且修改处理的时候也非常的麻烦，应对高并发时也不好处理，所以 我们可以使用微服务架构，对项目进行模块之间的拆分，每一…...
冯喜运：6.7今日黄金原油行情分析及独家操作策略
【黄金消息面分析】：周三（6月5日），金价回升逾1.2%，收盘报每盎司2,355.49美元，全面收复前一交易日的跌幅。周三当天前公布的美国民间就业数据弱于预期，增强了美联储将在今年晚些时候降息的预期&a…...
Android 蓝牙概述
一、什么是蓝牙 蓝牙是一种短距离（一般10m内）无线通信技术。蓝牙技术允许固定和移动设备在不需要电缆的情况下进行通信和数据传输。 “蓝牙”这名称来自10世纪的丹麦国王哈拉尔德(Harald Gormsson)的外号。出身海盗家庭的哈拉尔德统一了北欧四分五裂的国…...
Python3 笔记：字符串的 find()、rfind()、index()、rindex()
1、find() 方法检测字符串中是否包含子字符串 str ，如果指定 beg（开始） 和 end（结束） 范围，则检查是否包含在指定范围内，如果指定范围内如果包含指定索引值，返回的是索引值在字符串中…...
【研发日记】Matlab/Simulink软件优化(二)——通信负载柔性均衡算法
文章目录 前言 背景介绍 初始代码 优化代码 分析和应用 总结 前言 见《【研发日记】Matlab/Simulink软件优化(一)——动态内存负荷压缩》 背景介绍 在一个嵌入式软件开发项目中，需要设计一个ECU节点的CAN网路数据发送，需求是在500k的通信波特率上&a…...
Python 设计模式（行为型）
文章目录 策略模式场景示例 迭代器模式场景示例 访问者模式场景示例 观察者模式场景示例 命令模式场景示例 模板方法模式场景示例 模板方法模式场景示例 事件驱动模式场景示例 责任链模式场景示例 中介者模式场景示例 状态模式场景示例 策略模式 策略模式（Strategy…...
电商API商品数据采集接口||助力电商企业采集商品大数据提高开发效率
提高开发效率：电商API接口允许不同的应用程序之间高效地进行交互，节省了大量的人力物力成本，使得开发者可以将更多时间和精力集中于自身的核心业务。 增加数据安全性：通过对数据进行安全加密，API接口实现了对数据的保护…...
Day34 事件聚合器实现消息过滤功能
当前章节，实现了消息事件过滤功能 在上一章节中，我们发现在Login视图页和Main视图页都使用了同一个事件聚合器，导致在Login视图页发送的消息也被Main 视图主页所接收，这违反了事件传递的意图和模块化设计的原则。为了解决这个问题，我们需要为事件聚合器引入消息过滤的…...
前端 JS 经典：Reflect 本质
1. 什么是 Reflect Reflect 可以调用对象的基本方法（内部方法），在 ES6 之前我们是没有任何方法去直接调用对象的基本方法的。只能间接调用，间接调用它又会给你做一些额外得事。 2. 对象的基本方法 什么是对象的基本方法呢&…...
accelerate 的一个tip：early stopping 处可能存在的bug
在分布式训练中进行提前停止时，如果每个进程都有特定的停止条件（例如验证损失），这可能不会在所有进程中同步。 因此，可能在进程 0 中发生中断，而进程 1 则不会——>这将导致代码无限期挂起，直…...
企业数据挖掘建模平台极简建模流程
泰迪智能科技企业数据挖掘建模平台是企业自主研发，面向企业级用户的快速数据处理构建模型工具。平台底层算法基于R语言、Python、Spark等引擎，使用JAVA语言开发，采用 B/S 结构，用户无需下载客户端，可直接通过浏览器进…...
使用pkg打包了一个使用了sqlite3的nodejs项目，启动后闪退
从截图来看，问题出在 sqlite3 模块上。说明在打包过程中，sqlite3 模块的 .node 文件没有正确加载。 紧急解决方法： 其实就是exe文件还需要node_modules中的sqlite3 依赖，我们直接在系统顶级放一个node_modules，且其中只…...
网络编程(UPD和TCP)
//发送数据 //UDP协议发送数据 package com.example.mysocketnet.a02UDPdemo;import java.io.IOException; import java.net.*;public class SendMessageDemo {public static void main(String[] args) throws IOException {//发送数据//1.创建DatagramSocket对象(快递公司)//…...
cesium 之 flyTo、setView、lookat
orientation配置项的参数 cesium中，朝向orientation，通常使用heading、pitch、roll这三个参数来描述 heading 通过调整heading的值，使相机朝向特定的方向朝向方向说明【北：0， 东：π/2弧度， …...
超速解读多模态InternVL-Chat1.5 ，如何做到开源SOTA——非官方首发核心技巧版（待修订）
解读InternVL-chat1.5系列 最近并行是事情太杂乱了，静下心来看一看优秀的开源项目,但是AI技术迭代这么快，现在基本是同时看五、六个方向的技术架构和代码，哪个我都不想放，都想知道原理和代码细节，还要自己训练起来&am…...
Vue 组件_动态组件+keep-alive
文章目录 Vue 动态组件 keep-alive知识点讲解业务场景实例代码实现keep-alive Vue 动态组件 keep-alive 知识点讲解 通过 Vue 的 <component> 组件和特殊的 is 属性实现的。 <!-- curentComponent 改变时组件也改变 --> <component :is"componentMap[…...
深入理解Redis：多种操作方式详解
Redis（Remote Dictionary Server）是一款高性能的开源键值存储系统，广泛应用于缓存、会话管理、实时分析等领域。它支持多种数据结构，如字符串、哈希、列表、集合和有序集合等，提供了丰富的操作命令。本篇博客将详细介绍…...
stm32太阳能追光储能系统V2
大家好，我是 小杰学长 stm32太阳能追光储能系统V2. 增加了命令行交互和内置AT指令解析框架 （就是可以用电脑串口发送at指令控制板子的所有功能） 改动了spi 换成硬件 改动了硬件电源 增加了pcb原理图 附带上pcb源文件 增加了freertos 互斥锁…...
Docker笔记-解决非交互式运行python时print不输出的问题
换句话来说就是在docker中如何不会python的print 只需要在启动时，不让python缓冲其输出。 关键命令如下：PYTHONUNBUFFERED1 如下： docker run -e PYTHONUNBUFFERED1 <your_image> 下面解释下-e "-e"选项的全称是"…...
06- 数组的基础知识详细讲解
06- 数组的基础知识详细讲解 一、基本概念 一次性定义多个相同类型的变量，并且给它们分配一片连续的内存。 int arr[5];1.1 初始化 只有在定义的时候赋值，才可以称为初始化。数组只有在初始化的时候才可以统一赋值。 以下是一些示例规则： …...
CentOS6系统因目录有隐含i权限属性致下属文件无法删除的故障一例
CentOS6服务器在升级openssh时因系统目录权限异常（有隐含i权限属性），下属文件无法删除，导致系统问题的故障一例。 一、问题现象 CentOS6在升级openssh时，提示如下问题： warning: /etc/ssh/sshd_config c…...
【视频转码】ZLMediaKit漏洞报告的问题
漏洞问题： 支持ss1 rc4密码套件(bar mitzvah) 漏洞级别： 中危 漏洞修复： 方法：避免使用RC4密码，参考代码如下： 修改文件位于：webrtc/DtlsTransport.cpp ret SSL_CTX_set_cipher_list(ssl…...
100道大模型面试八股文
算法暑期实习机会快结束了，校招大考即将来袭。 当前就业环境已不再是那个双向奔赴时代了。求职者在变多，岗位在变少，要求还更高了。 最近，我们陆续整理了很多大厂的面试题，帮助球友解惑答疑和职业规划，分…...
【ARM Cache 及 MMU 系列文章 6.2 -- ARMv8/v9 Cache 内部数据读取方法详细介绍】
请阅读【ARM Cache 及 MMU/MPU 系列文章专栏导读】 及【嵌入式开发学习必备专栏】 文章目录 Direct access to internal memoryL1 cache encodingsL1 Cache Data 寄存器Cache 数据读取代码实现Direct access to internal memory 在ARMv8架构中，缓存（Cache）是用来加速数据访…...
使用Vue.js将form表单传递到后端
一.form表单 <form submit.prevent"submitForm"></form> form表单像这样写出来，然后把需要用户填写的内容写在form表单内。 二.表单内数据绑定 <div class"input-container"><div style"margin-left: 9px;"&…...
6、架构-服务端缓存
为系统引入缓存之前，第一件事情是确认系统是否真的需要缓 存。从开发角度来说，引入缓存会提 高系统复杂度，因为你要考虑缓存的失效、更新、一致性等问题；从运维角度来说，缓存会掩盖一些缺 陷，让问题在更久的…...
服务器遭遇UDP攻击时的应对与解决方案
UDP攻击作为分布式拒绝服务(DDoS)攻击的一种常见形式，通过发送大量的UDP数据包淹没目标服务器，导致网络拥塞、服务中断。本文旨在提供一套实用的策略与技术手段，帮助您识别、缓解乃至防御UDP攻击，确保服务器稳定运行。我们将探讨监…...
美团发布2024年一季度财报：营收733亿元，同比增长25%
6月6日，美团(股票代码:3690.HK)发布2024年第一季度业绩报告。受益于经济持续回暖和消费复苏，公司各项业务继续取得稳健增长，营收733亿元(人民币，下同)，同比增长25%。 财报显示，一季度，美团继续…...