当前位置： 首页 > news >正文

3、css设置样式总结、节点、节点之间关系、创建元素的方式、BOM

news 2026/5/26 15:04:46

一、css设置样式的方式总结：

对象.style.css属性

对象.className = ‘’

  • 会覆盖原来的类

对象.setAttribut(‘style’,‘css样式’)

对象.setAttribute(‘class’,‘类名’)

对象.style.setProperty(css属性名,css属性值)

对象.style.cssText = “css样式表”

<style>.headerObj {height: 100px;background-color: red;}.select {background-color: blue;}</style>
<body><header class="headerObj" id="headerObj" style="" name-1="">我是头部元素</header>
</body><script>var headerObj = document.querySelector('#headerObj')headerObj.addEventListener('mouseover', function () {this.style.height = '200px'this.className = 'select'//会覆盖原来的类this.setAttribute('style', 'background-color:green')this.setAttribute('class', 'select headerObj')this.style.setProperty('background-color', 'green')this.style.cssText ='height: 200px;background-color: pink; font-size:30px'})
</script>

二、节点

DOM节点：网页中所有的内容都是节点

  • 标签、属性、文本、注释、document

节点的特征：

  • 节点类型：nodeType

  • 节点名称：nodeName

  • 节点值： nodeValue

    节点标签节点属性节点文本节点document
    节点类型1239
    节点属性大写的标签名属性名#text#document
    节点值null属性值文本内容null
    先获取属性节点: 元 素.getAttributeNode(“属性名”)1.先获取文本节点： 元 素.firstChild 2.标签的第一个子节点必是文本节点

标签节点

<body><header class="headClass" id="headerId" name-1="h1">我是头部区域标签</header><span class="spanClass" id="spanId" name-1="s1">我是行内元素范围标签</span>
</body>
<script>console.log(headerObj.nodeType) //1   块元素console.log(spanObj.nodeType) //1     行内元素console.log(headerObj.nodeName) //HEADERconsole.log(spanObj.nodeName) //SPANconsole.log(headerObj.nodeValue) //nullconsole.log(spanObj.nodeValue) //null
</script>

属性节点

<script>console.log(headerObj.getAttributeNode('class').nodeType) //2console.log(headerObj.getAttributeNode('name-1').nodeType) //2console.log(spanObj.getAttributeNode('name-1').nodeType) //2console.log(spanObj.getAttributeNode('id').nodeType) //2console.log(headerObj.getAttributeNode('class').nodeName) //classconsole.log(headerObj.getAttributeNode('name-1').nodeName) //name-1console.log(spanObj.getAttributeNode('name-1').nodeName) //name-1console.log(spanObj.getAttributeNode('id').nodeName) //idconsole.log(headerObj.getAttributeNode('class').nodeValue) //classconsole.log(headerObj.getAttributeNode('name-1').nodeValue) //name-1console.log(spanObj.getAttributeNode('name-1').nodeValue) //name-1console.log(spanObj.getAttributeNode('id').nodeValue) //id
</script>

文本节点

<script>console.log(headerObj.firstChild.nodeType) //3console.log(spanObj.firstChild.nodeType) //3console.log(headerObj.firstChild.nodeName) //#textconsole.log(spanObj.firstChild.nodeName) //#textconsole.log(headerObj.firstChild.nodeValue) //文本内容console.log(spanObj.firstChild.nodeValue) //
</script>

document节点

<script>console.log(document.nodeType) //9console.log(document.nodeName) //#documentconsole.log(document.nodeValue) //null
</script>

三、节点之间的关系

  <body><ul id="list"><!-- 我是ul的第一行文本 --><li id="li1">第一行</li><!-- 我是ul的第二行文本 --><li id="li2">第二行</li>111<li class="li3">第三行</li><li>第四行</li><!-- 我是ul的注释 --><li>第五行</li><!-- 我是ul的最后一行文本 --></ul></body><script>var ulList = document.getElementById('list')var li2 = document.getElementById('li2')</script>

嵌套关系

1、父节点 parentNode

image-20240129151332277

2、父元素节点 parentElement

image-20240129151342055

parentNode与parentElement的区别：

  • html标签的父节点是document的节点名称

  • html标签的父元素节点是document的节点值

    image-20240129151454709

3、子节点 childNodes (标签节点、文本节点、注释节点)

每个li前后都有text

image-20240129151701348

image-20240129165922508

4、子元素节点 children 标签节点

所有的li元素
image-20240129151708862

5、第一个子节点 firstChild 文本节点

image-20240129151719118

6、第一个子元素节点 firstElementChild 标签节点

image-20240129151729517

7、最后一个子节点 lastChild 文本节点

image-20240129151738392

8、最后一个子节点 lastElementChild 标签节点

image-20240129151751626

并列关系

1、上一个节点 previousSibling 文本节点

image-20240129151912115

2、上一个元素节点 previousElementSibling 标签节点

image-20240129151919630

3、下一个节点 nextSibling 文本节点

image-20240129165630046

4、下一个元素节点 nextElementSibling 标签节点

image-20240129165641674

总结

  • 1、firstChild/lastChild/previousSibling/nextSibling获取到的都是文本节点，
    如果有文本返回节点值-文本内容，如果没有文本返回节点名称-#text

  • 2、firstElementChild/lastElementChild/previousElementSibling/nextElementSibling获取到的都是标签节点

四、创建元素的三种方式

1、document.write() 弊端：只能往body中添加元素

document.write("<header class='hObj'>头部区域</header>")

2、innerHTML 弊端：覆盖原有的元素

3、document.createElement(“标签名”)

1、添加元素：

  • 父元素.appendChild(子元素)

2、删除元素：

  • 父元素.removeChild(子元素)

综合案例：

    <style>#btn {width: 300px;height: 100px;font-size: 30px;}#box {margin-top: 30px;width: 300px;height: 300px;border: 3px solid red;}.li1 {color: green;font-size: 30px;}</style><body>//1、先搭建静态页面<button id="btn">动态的创建列表</button><div id="box"></div></body><script>// 2、获取元素var btn = document.getElementById('btn')var box = document.getElementById('box')// 3、创建一个武功秘籍数组var arr = ['易经经','葵花宝典','辟邪剑谱','吸星大法','太极拳',]// 4、给按钮绑定单击事件btn.onclick = function () {// 5、创建ul元素，并将该元素当做box的子元素var ulObj = document.createElement('ul')box.appendChild(ulObj)// 6、遍历武功秘籍数组arr.forEach(function (value, index) {// 7、创建li元素，并将该元素当做ul的子元素var liObj = document.createElement('li')ulObj.appendChild(liObj)// 8、将数组的6个元素分别当做li的文本内容liObj.innerText = value// 9、设置每个li的class属性liObj.setAttribute('class', 'li' + (index + 1))// 10、给li绑定鼠标移入移出事件liObj.onmouseover = function () {this.style.setProperty('background-color', 'red')}liObj.onmouseout = function () {this.style.setProperty('background-color', '')}// 11、给li绑定单击事件liObj.onclick = function () {ulObj.removeChild(this)}})// 12、按钮禁用提示用户不能点了this.disabled = truethis.innerText = '别点了！！！'}</script>

image-20240129153028785image-20240129153209650

五、BOM

  • BOM:浏览器对象模型，顶级对象是window

属性：console、全局变量、location（ 操作地址栏）、history

location

console.log(window.location)

  • 1、hash 地址栏中#后面的内容 window.location.hash

  • 2、host 域名（主机民）和端口号 window.location.host

  • 3、hostname 主机名 window.location.hostname

  • 4、port 主机名 window.location.port

  • 5、href 整个地址 l ocation.href

  • 6、protocol 协议 window.location.protocol

  • 7、origin 协议+主机名+端口号 window.location.origin

  • 8、reload() 重新加载页面

  • 9、back(） 返回上一页

history

  • 9、back(） 返回上一页
<body><button id="btn">点我重新加载页面</button><button onclick="goToA()">点我跳转到A页面</button><button onclick="forwardToA()">前进一页</button>
</body>
<script>
// 8、reload() 重新加载页面document.getElementById('btn').onclick = function () {window.location.reload()}// 9、location   back()返回上一页console.log(window.history)function goToA() {window.location.href = './A.html'  //另一个网页}// 9、history    返回上一页function forwardToA() {window.history.forward()}
</script>

image-20240129161511484image-20240129161327563

方法：alert()、prompt()全局函数

事件：onload、onscroll

相关文章：

3、css设置样式总结、节点、节点之间关系、创建元素的方式、BOM

一、css设置样式的方式总结&#xff1a; 对象.style.css属性 对象.className ‘’ 会覆盖原来的类 对象.setAttribut(‘style’,‘css样式’) 对象.setAttribute(‘class’,‘类名’) 对象.style.setProperty(css属性名,css属性值) 对象.style.cssText “css样式表” …...

编程日记 2024/1/30 16:46:05

计算机网络-物理层传输介质（导向传输介质-双绞线 同轴电缆 光纤和非导向性传输介质-无线波 微波 红外线 激光）

文章目录 传输介质及分类导向传输介质-双绞线导向传输介质-同轴电缆导向传输介质-光纤非导向性传输介质小结 传输介质及分类 物理层规定电气特性&#xff1a;规定电气信号对应的数据 导向传输介质-双绞线 双绞线的主要作用是传输数据和语音信息。它通过将两根导线以特定的方…...

编程日记 2024/1/30 16:44:02

springboot3+vue3支付宝在线支付案例-渲染产品列表页面

springboot3vue3支付宝在线支付案例-渲染产品列表页面&#xff01;今天折腾了半天&#xff0c;完成了vue3前端项目的产品列表选染。 我们使用到了技术有axios&#xff08;发送跨域的请求获取产品&#xff09;。pinia&#xff08;绑定数据&#xff09;, import { ref } from vu…...

编程日记 2024/1/30 16:43:01

数字美妆技术：美颜SDK和动态贴纸技术的崭新时代

数字美妆的兴起标志着人们对于自身形象的追求不再局限于现实生活&#xff0c;而是延伸到了虚拟世界。同时&#xff0c;美颜SDK的动态贴纸技术也开始进入到大家的视野之中。 一、美颜SDK&#xff1a;技术之作 通过复杂的图像处理算法&#xff0c;美颜SDK能够实时检测人脸&…...

编程日记 2024/1/30 16:39:58

使用OpenCV实现一个简单的实时人脸跟踪

简介&#xff1a; 这个项目将通过使用OpenCV库来进行实时人脸跟踪。实时人脸跟踪是一项在实际应用中非常有用的技术&#xff0c;如视频通话、智能监控等。我们将使用OpenCV中的VideoCapture()函数来读取视频流&#xff0c;并使用之前加载的Haar特征级联分类器来进行人脸跟踪。 …...

编程日记 2024/1/30 16:37:55

关于监控的那些事，你有必要了解一下

监控在整个运维和产品生命周期中扮演着至关重要的角色。其目标是在应用的各个阶段&#xff0c;从程序设计、开发、部署到下线&#xff0c;实现事前预警、事中问题定位和事后问题分析的全方位服务。 一、监控的目的 监控贯穿应用的整个生命周期&#xff0c;服务对象主要包括技…...

编程日记 2024/1/30 16:36:54

C#学习笔记_数组

数组是一个存储相同类型元素的固定大小的顺序集合。数组是用来存储数据的集合&#xff0c;通常认为数组是一个同一类型变量的集合。 声明数组 一、一维数组 一维数组声明语法如下&#xff1a; datatype[] arrayName; 其中&#xff0c;datatype为数据类型&#xff0c;array…...

编程日记 2024/1/30 16:35:53

微信小程序canvas画布实现文字自由缩放、移动功能

目录 实现效果 一、获取画布信息并绘制背景 二、绘制文字 三、绘制文字编辑按钮...

编程日记 2024/1/30 16:34:51

jQuery 获取并设置 CSS 类 —— W3school 详解 简单易懂（十五）

通过 jQuery&#xff0c;可以很容易地对 CSS 元素进行操作。 jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些&#xff1a; addClass() - 向被选元素添加一个或多个类removeClass() - 从被选元素删除一个或多个类toggleClass() - 对被选元素进行添…...

编程日记 2024/1/30 16:33:50

dart使用教程

1. 关于类abstract, mixin多重继承, implement实现, extends继承,(with ... on限定范围 ...) Dart中的继承机制——分析extends、implements和mixin - 掘金 (juejin.cn) 详细文档&#xff1a;xGitHub - konieshadow/dart-tour: Dart语言中文教程&#xff0c;官方文档翻译...

编程日记 2024/1/30 16:31:48

CSS3：最新特性和实例教程

今天简单复习一下css3的相关特性吧。 一&#xff1a;响应式设计 CSS3引入了媒体查询&#xff08;Media Queries&#xff09;和弹性盒子布局&#xff08;Flexbox&#xff09;等特性&#xff0c;使得响应式设计变得更加容易。媒体查询可以根据设备的屏幕大小、分辨率等属性来应…...

编程日记 2024/1/30 16:29:46

leetcode—跳跃游戏—贪心算法

1 跳跃游戏1 给你一个非负整数数组 nums &#xff0c;你最初位于数组的 第一个下标 。数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个下标&#xff0c;如果可以&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示例 1&a…...

编程日记 2024/1/30 16:27:44

Databend 开源周报第 130 期

Databend 是一款现代云数仓。专为弹性和高效设计&#xff0c;为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务&#xff1a;https://app.databend.cn 。 Whats On In Databend 探索 Databend 本周新进展&#xff0c;遇到更贴近你心意的 Databend 。 支持 CREATE OR…...

编程日记 2024/1/30 16:26:43

【web安全】文件上传漏洞

upload-labs靶场 第一关 绕过前端 先打开哥斯拉&#xff0c;生成木马&#xff0c;选择php 打开brup开浏览器&#xff0c;上传文件&#xff0c;就会发现被阻止了&#xff0c;还没抓到包呢 那就是被前端代码阻止了&#xff0c;那通常前端代码都只能防御后缀名 我们抓到包后直…...

编程日记 2024/1/30 16:25:42

C++笔记之RTTI、RAII、MVC、MVVM、SOLID在C++中的表现

C++笔记之RTTI、RAII、MVC、MVVM、SOLID在C++中的表现 —— 杭州 2024-01-28 code review! 文章目录 C++笔记之RTTI、RAII、MVC、MVVM、SOLID在C++中的表现1.RTTI、RAII、MVC、MVVM、SOLID简述2.RAII (Resource Acquisition Is Initialization)3.RTTI (Run-Time Type Informat…...

编程日记 2024/1/30 16:24:40

出口额行业第二再创新高！苏州金龙的2023全球畅行之路

俄罗斯812台、沙特阿拉伯786台、埃塞俄比亚200台、阿尔及利亚445台、韩国382台&#xff0c;苏州金龙2023年海外市场大单频现&#xff0c;全年出口客车5248辆&#xff0c;以超42亿元的出口额创历史新高&#xff0c;稳居行业第二位&#xff01; 重燃优势主力市场加速度&#xff…...

编程日记 2024/1/30 16:23:39

Python入门到精通(六)——Python函数进阶

Python函数进阶 一、函数的多返回值 二、函数多种传参方式 1、位置参数 2、关键字参数 3、缺省参数 4、不定长参数 &#xff08;1&#xff09;位置传递 &#xff08;2&#xff09;关键字传递 三、匿名函数 &#xff08;1&#xff09;函数作为参数传递 &#xff08;2&…...

编程日记 2024/1/30 16:22:38

docker: missing signature key

问题描述 下载某些docker镜像时&#xff0c;可能会报missing signature key错误。 原因分析 docker推出了新的镜像构建工具&#xff0c;比较老版本的docker不能识别这种格式。用阿里云镜像源安装的docker版本是1.13.1&#xff0c;这个版本是2017年发布的&#xff0c;需要升级…...

编程日记 2024/1/30 16:21:36

选型 之 工业相机篇

一、概述 23年24年行情不会好&#xff0c;公司各种想办法裁员&#xff0c;在大陆这个大熔炉中只能不断地提炼。我个人主要是在工业领域做2D图像算法和3D算法&#xff0c;但是现在出去都需要全能人才 方案、算法、运动控制等&#xff0c;我目前最大的短板就是方案&#xff0c;在…...

编程日记 2024/1/30 16:19:32

深入解析美颜SDK和动态贴纸技术的工作原理与应用

美颜SDK和动态贴纸技术作为图像处理领域的瑰宝&#xff0c;为用户提供了实时、高质量的美化效果。 一、美颜SDK的工作原理 美颜SDK是一种集成在移动应用、直播平台中的处理工具&#xff0c;通过算法实现实时美颜效果。 1.人脸检测与关键点定位 美颜的第一步是识别图像中的人…...

编程日记 2024/1/30 16:18:31

AI时代程序员职业发展与个人创业可行性研究报告

一、行业宏观变革&#xff08;2026核心趋势数据佐证&#xff09; 1.1 开发范式已彻底重构&#xff08;行业不可逆拐点&#xff09; 2026年正式进入AI Agent智能体开发时代&#xff0c;传统CRUD编码价值持续崩塌。 核心权威数据&#xff1a; Gartner预测&#xff1a;2026年75%企…...

编程新知 2026/5/26 2:11:27

三十岁想从零转行现实吗？带你分辨真正有前景的好工作

![](https://img-blog.csdnimg.cn/direct/b0bfa28b59f9478dae4e6feee6659cce.png)我是29岁那年&#xff0c;完成从转行裸辞副业的职业转型。 如果你把职业生涯看成是从现在开始30岁&#xff0c;到你退休那年&#xff0c;中间这么漫长的30年&#xff0c;那么30岁转行完全来得及…...

编程新知 2026/5/26 1:19:05

ESP32多任务水位监测：从Arduino到ESP-IDF的FreeRTOS实战

1. 项目概述&#xff1a;从Arduino到ESP-IDF的跃迁去年我在做毕业设计时&#xff0c;为了搭建一个ESP32的传感器节点演示程序&#xff0c;第一次深入使用了FreeRTOS。那段时间&#xff0c;我几乎天天和任务调度、队列、信号量打交道&#xff0c;从最初的一头雾水到后来能流畅地…...

编程新知 2026/5/26 0:44:32

rk35xx 通过recovery升级问题

Firefly 的 recovery 库是一个核心组件&#xff0c;它构建了一个独立的微型 Linux 系统&#xff0c;专门用于在设备主系统之外执行高可靠性的固件升级。简单来说&#xff0c;它的工作流程是&#xff1a;主系统通过命令触发&#xff0c;将升级指令写入特定分区并重启&#xff1b…...

编程新知 2026/5/26 0:03:57

人类防伪指南：为什么你越写错字，HR越信你是真人？

前言各位码农、算法侠、CtrlC/V十级学者请注意&#xff1a;你有没有过这样的经历&#xff1f;辛辛苦苦肝了一晚上文档&#xff0c;逻辑严密、语法丝滑、连Markdown都对齐得像军训方阵&#xff0c;结果老板幽幽来一句&#xff1a;“这真是你自己写的&#xff1f;”那一刻&#x…...

编程新知 2026/5/25 23:27:16

别再手动编译了！Matlab一键调用CEC2017测试函数的完整配置指南（附30个函数调用示例）

别再手动编译了&#xff01;Matlab一键调用CEC2017测试函数的完整配置指南&#xff08;附30个函数调用示例&#xff09; 算法研究者们常常需要借助标准测试函数来验证优化算法的性能&#xff0c;而CEC2017测试函数集因其复杂性和多维度的挑战性&#xff0c;成为评估算法鲁棒性的…...

编程新知 2026/5/25 22:42:37

Unity项目DrawCall降不下来？试试用Mesh Baker合并贴图集，保姆级图文教程

Unity性能优化实战&#xff1a;用Mesh Baker合并贴图集降低DrawCall全流程解析当你的Unity项目帧率开始卡顿&#xff0c;Profiler里DrawCall数字居高不下时&#xff0c;合并贴图集往往是解决问题的关键一步。本文将以一个实际项目为例&#xff0c;带你从零开始使用Mesh Baker的…...

编程新知 2026/5/25 20:55:13

终极歌词同步神器LRCGET：5分钟为你的音乐库添加完美歌词

终极歌词同步神器LRCGET&#xff1a;5分钟为你的音乐库添加完美歌词 【免费下载链接】lrcget Utility for mass-downloading LRC synced lyrics for your offline music library. 项目地址: https://gitcode.com/gh_mirrors/lr/lrcget 你是否厌倦了在听歌时手动搜索歌词…...

编程新知 2026/5/25 20:53:12

大厂校招变了：AI 能力正在进入笔试和面试

最近不少同学投递校招时&#xff0c;应该已经发现一个变化&#xff1a; 以前 JD 里写的是“熟悉 Python / Java / SQL / Office 优先”。 现在越来越多岗位开始出现新的描述&#xff1a; “熟练使用 AI 工具者优先” “了解大模型应用者优先” “具备 AI 辅助编程经验优先” “…...

编程新知 2026/5/25 17:28:10

完整指南：如何在5分钟内快速上手BioAge生物年龄计算工具包

完整指南&#xff1a;如何在5分钟内快速上手BioAge生物年龄计算工具包 【免费下载链接】BioAge Biological Age Calculations Using Several Biomarker Algorithms 项目地址: https://gitcode.com/gh_mirrors/bi/BioAge BioAge生物年龄计算工具包是一款基于R语言开发的强…...

编程新知 2026/5/25 17:26:09