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

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

news 文章来源：https://blog.csdn.net/m0_58779986/article/details/135920670 2025/5/10 19:20:50

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

java代码中调用自定义函数

定义函数 CREATE DEFINERrootlocalhost FUNCTION test_fun1(num1 FLOAT,num2 FLOAT) RETURNS float BEGINDECLARE SUM FLOAT DEFAULT 0;SET SUMnum1num2;RETURN SUM; END <select id"cunchu" resultType"java.util.Map">SELECT test_fun1(1,2) as r…...

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

备战蓝桥杯---数据结构与STL应用（基础实战篇1）

话不多说，直接上题： 当然我们可以用队列，但是其插入复杂度为N,总的复杂度为n^2,肯定会超时，于是我们可以用链表来写，同时把其存在数组中，这样节点的访问复杂度也为o(1).下面是AC代码： 下面我们来…...

编程日记 2024/1/30 16:16:28

项目解决方案：非执法视频监控系统项目设计方案

目录一、概述 （一）前言 （二）设计思路 （三）设计原则 1、实用性 2、可靠性 3、安全性 4、先进性 5、开放性 6、易管理、易维护 （四）设计依据二、方案总…...

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

网络安全01--负载均衡

目录一、环境准备 1.1三台虚拟机二、开始搭建负载均衡： 2.1准备一下源 2.2正式安装 2.3Nginx安装情况三、负载均衡--轮询（round robin） 3.1在 http 部分添加如下负载均衡配置： 3.2简单解释一下server端： …...

编程日记 2024/1/30 16:06:16

Mamba系列日积月累（一）：状态空间模型SSM的离散化过程推导

文章目录 1. 背景基础知识1.1 什么是状态空间模型（State Space Model，SSM）？1.2 什么是离散化（Discretization）？1.3 为什么需要离散化？ 2. SSM离散化过程推导2.1 为什么在离散化过程中…...

编程日记 2024/1/30 16:04:14

React中使用LazyBuilder实现页面懒加载方法二

前言： 在一个表格中，需要展示100条数据，当每条数据里面需要承载的内容很多，需要渲染的元素也很多的时候，容易造成页面加载的速度很慢，不能给用户提供很好的体验时，懒加载是优化页面加载速度的方…...

编程日记 2024/1/30 16:03:12

安全测试：史上最全的攻防渗透信息收集方法、工具！

信息收集的意义信息收集对于渗透测试前期来说是非常重要的。正所谓，知己知彼百战不殆，信息收集是渗透测试成功的保障，只有我们掌握了目标网站或目标主机足够多的信息之后，才能更好地进行渗透测试。信息收集的方式可以分为两种…...

编程日记 2024/1/30 15:59:06

minio2023版本安装对象存储文件迁移

一、环境 minio版本：minio-20230320201618.0.0.x86_64.rpm 二、安装将下载好的rpm包放在文件夹下，然后cd到该目录 sudo rpm -ivh minio-20230320201618.0.0.x86_64.rpm 三、启动 1、minio的位置 which minio cd /usr/local/bin 2、启动 （可…...

编程日记 2024/1/30 15:58:05

###C语言程序设计-----C语言学习（7）#（调试篇）

前言：感谢您的关注哦，我会持续更新编程相关知识，愿您在这里有所收获。如果有任何问题，欢迎沟通交流！期待与您在学习编程的道路上共同进步。一. 程序调试 1.程序调试介绍： 程序调试是软件开发过程中非常重…...

编程日记 2024/1/30 15:53:00

腾讯云Linux(OpenCloudOS)安装tomcat9（9.0.85）

腾讯云Linux(OpenCloudOS)安装tomcat9 下载并上传 tomcat官网 https://tomcat.apache.org/download-90.cgi 下载完成后上传至自己想要放置的目录下解压文件输入tar -xzvf apache-tomcat-9.0.85.tar.gz解压文件，建议将解压后的文件重新命名为tomcat,方便后期进…...

编程日记 2024/1/30 15:51:59