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

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

news 2026/2/10 3:40:29

一、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
节点类型	1	2	3	9
节点属性	大写的标签名	属性名	#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

2、父元素节点 parentElement

parentNode与parentElement的区别：

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

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

每个li前后都有text

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

所有的li元素

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

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

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

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

并列关系

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

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

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

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

总结

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>

五、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

<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>

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

事件：onload、onscroll

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

C#学习笔记_数组

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

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

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

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

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

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

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

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

dart使用教程

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

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

CSS3：最新特性和实例教程

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

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

leetcode—跳跃游戏—贪心算法

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

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

Databend 开源周报第 130 期

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

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

【web安全】文件上传漏洞

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

编程日记 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台，苏州金龙2023年海外市场大单频现，全年出口客车5248辆，以超42亿元的出口额创历史新高，稳居行业第二位！ 重燃优势主力市场加速度&#xff…...

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

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

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

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

docker: missing signature key

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

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

选型之工业相机篇

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

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

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

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

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

XML Group端口详解

在XML数据映射过程中，经常需要对数据进行分组聚合操作。例如，当处理包含多个物料明细的XML文件时，可能需要将相同物料号的明细归为一组，或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码，增加了开…...

编程新知 2026/2/9 13:51:46

golang循环变量捕获问题

在 Go 语言中，当在循环中启动协程（goroutine）时，如果在协程闭包中直接引用循环变量，可能会遇到一个常见的陷阱 - 循环变量捕获问题。让我详细解释一下： 问题背景看这个代码片段： fo…...

编程新知 2026/1/21 14:29:57

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法文章目录前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言前几天听说公司某个项…...

编程新知 2025/9/8 23:14:43

FastAPI 教程：从入门到实践

FastAPI 是一个现代、快速（高性能）的 Web 框架，用于构建 API，支持 Python 3.6。它基于标准 Python 类型提示，易于学习且功能强大。以下是一个完整的 FastAPI 入门教程，涵盖从环境搭建到创建并运行一个简单的…...

编程新知 2025/10/16 7:51:26

P3 QT项目----记事本（3.8）

3.8 记事本项目总结项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

编程新知 2026/2/1 6:56:36

C++ 基础特性深度解析

目录引言一、命名空间（namespace） C 中的命名空间与 C 语言的对比二、缺省参数 C 中的缺省参数与 C 语言的对比三、引用（reference） C 中的引用与 C 语言的对比四、inline（内联函数…...

编程新知 2026/1/15 4:25:16

leetcodeSQL解题：3564. 季节性销售分析

leetcodeSQL解题：3564. 季节性销售分析题目： 表：sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

编程新知 2025/10/5 19:58:27

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面，避免重复抓取，以节省资源和时间。在分布式环境下，增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。另一种思路：将增量判…...

编程新知 2026/2/6 1:18:56

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？

uni-app 中 Web-view 与 Vue 页面的通讯机制详解一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件，用于在原生应用中加载 HTML 页面： 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

编程新知 2025/8/6 2:19:46

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中，从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备（如专用硬件设备），从而消除了直接物理连接的需要。USB over IP的…...

编程新知 2026/2/6 13:42:22