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

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

news 2025/7/6 23:44:00

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

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...

编程新知 2025/7/4 19:19:18

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

编程新知 2025/6/26 0:13:17

BCS 2025｜百度副总裁陈洋：智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

编程新知 2025/7/6 8:09:34

是否存在路径（FIFOBB算法）

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

编程新知 2025/7/3 10:13:08

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

编程新知 2025/7/6 16:59:34

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

编程新知 2025/7/6 13:21:15

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

编程新知 2025/7/6 1:26:33

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...

编程新知 2025/7/5 18:20:18

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后&#xff0c;迭代器会失效&#xff0c;因为顺序迭代器在内存中是连续存储的&#xff0c;元素删除后&#xff0c;后续元素会前移。 但一些场景中&#xff0c;我们又需要在执行删除操作…...

编程新知 2025/6/16 16:11:49

android RelativeLayout布局

<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...

编程新知 2025/7/4 14:24:21