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

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

news 2026/4/6 10:09:05

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

【Linux 物联网网关主控系统-Web部分（四）】

Linux 物联网网关主控系统-Web部分&#xff08;四&#xff09;调用关系总体框架main.htmltop.htmlleft.htmlright.htmlcgi部分调用关系 总体框架 main.html 调用的 HTML&#xff1a; top.html left.html right.html &#xff08;框架集页面&#xff0c;加载顶部、左侧、右侧三…...

编程新知 2026/4/6 9:54:03

trackerjacker硬件推荐：选择最佳无线网卡提升监控效果

trackerjacker硬件推荐&#xff1a;选择最佳无线网卡提升监控效果 【免费下载链接】trackerjacker Like nmap for mapping wifi networks youre not connected to, plus device tracking 项目地址: https://gitcode.com/gh_mirrors/tr/trackerjacker trackerjacker是一款…...

编程新知 2026/4/6 9:23:38

开发提效新利器：集成openclaw与ollama的智能编码助手在快马平台实践

最近在尝试优化开发流程时&#xff0c;发现将openclaw与ollama结合使用能带来意想不到的效率提升。作为一个经常需要写Python和JavaScript的开发者&#xff0c;我一直在寻找能够减少重复劳动的工具&#xff0c;这次实践让我找到了一个不错的解决方案。 代码自动补全与建议的实现…...

编程新知 2026/4/6 9:15:16

3步驯服锐龙：RyzenAdj性能调校实战指南

3步驯服锐龙&#xff1a;RyzenAdj性能调校实战指南 【免费下载链接】RyzenAdj Adjust power management settings for Ryzen APUs 项目地址: https://gitcode.com/gh_mirrors/ry/RyzenAdj 问题诊断&#xff1a;你的锐龙处理器是否被"封印"&#xff1f; 场景一…...

编程新知 2026/4/6 8:56:52

如何在Windows系统上3分钟搞定PDF处理：Poppler预编译包终极指南

如何在Windows系统上3分钟搞定PDF处理&#xff1a;Poppler预编译包终极指南 【免费下载链接】poppler-windows Download Poppler binaries packaged for Windows with dependencies 项目地址: https://gitcode.com/gh_mirrors/po/poppler-windows 还在为Windows上的PDF处…...

编程新知 2026/4/6 8:54:48

告别热键劫持：Hotkey Detective让Windows快捷键回归掌控

告别热键劫持&#xff1a;Hotkey Detective让Windows快捷键回归掌控 【免费下载链接】hotkey-detective A small program for investigating stolen key combinations under Windows 7 and later. 项目地址: https://gitcode.com/gh_mirrors/ho/hotkey-detective 在数字…...

编程新知 2026/4/6 8:32:39

Z-Image-Turbo-辉夜巫女效果实测：LoRA微调模型在Gradio界面的高清出图表现

Z-Image-Turbo-辉夜巫女效果实测&#xff1a;LoRA微调模型在Gradio界面的高清出图表现 1. 模型简介与部署 Z-Image-Turbo-辉夜巫女是基于Z-Image-Turbo模型进行LoRA微调后的特殊版本&#xff0c;专门针对生成"辉夜巫女"风格图片进行了优化。该模型通过Xinference框…...

编程新知 2026/4/6 8:24:38

DeepSeek-R1-Distill-Qwen-1.5B实战体验：边缘计算、手机助手的AI新选择

DeepSeek-R1-Distill-Qwen-1.5B实战体验&#xff1a;边缘计算、手机助手的AI新选择 1. 引言&#xff1a;小钢炮模型的崛起 在AI大模型领域&#xff0c;参数规模与计算资源需求一直是制约模型落地的关键瓶颈。当我们还在为动辄数十亿参数的大模型寻找合适算力时&#xff0c;De…...

编程新知 2026/4/6 8:16:37

CCS12.2搭配C2000ware 4.03导入工程报错？手把手教你修复头文件路径变量（MATLAB 2023b适用）

CCS12.2与C2000ware 4.03工程导入报错全解析&#xff1a;从路径变量修复到MATLAB 2023b联调实战 当你满怀期待地将MATLAB 2023b生成的代码导入CCS12.2&#xff0c;准备与C2000ware 4.03来场完美邂逅时&#xff0c;编译器却毫不留情地抛出一连串头文件找不到的错误——这种从云端…...

编程新知 2026/4/6 8:06:35

CefFlashBrowser：让Flash内容在现代系统中延续生命的技术方案

CefFlashBrowser&#xff1a;让Flash内容在现代系统中延续生命的技术方案 【免费下载链接】CefFlashBrowser Flash浏览器 / Flash Browser 项目地址: https://gitcode.com/gh_mirrors/ce/CefFlashBrowser 问题引入&#xff1a;Flash技术的现代困境与解决方案 随着主流浏…...

编程新知 2026/4/6 8:02:34