JavaScript的DOM操作(二)

一、元素的特性attribute

1.元素的属性和特性

前面我们已经学习了如何获取节点,以及节点通常所包含的属性,接下来我们来仔细研究元素Element。

我们知道,一个元素除了有开始标签结束标签内容之外,还有很多的属性(attribute)

浏览器在解析HTML元素时,会将对应的attribute也创建出来放到对应的元素对象上。

  • 比如id、class就是全局的attribute,会有对应的id、class属性;
  • 比如href属性是针对a元素的,type、value属性是针对input元素的;

接下来我们学习一下如何获取和设置这些属性。

2.attribute的分类

属性attribute的分类:

  • 标准的attribute:某些attribute属性是标准的,比如id、class、href、type、value等;
  • 非标准的attribute:某些attribute属性是自定义的,比如abc、age、height等;
  <div class="box" id="main" name="kobe" abc="def" age="18">哈哈哈哈</div>

3.attribute的操作

对于所有的attribute访问都支持如下的方法:

  • elem.hasAttribute(name) — 检查特性是否存在。
  • elem.getAttribute(name) — 获取这个特性值。
  • elem.setAttribute(name, value) — 设置这个特性值。
  • elem.removeAttribute(name) — 移除这个特性。
  • attributes:attr对象的集合,具有name、value属性;

attribute 具备以下特征:

  • 它们的名字是大小写不敏感的(id 与 ID 相同)。
  • 它们的值总是字符串类型的。

4.元素的属性(property)

对于标准的attribute,会在DOM对象上创建与其对应的property属性:

console.log(boxE1.id,boxEl.className) //box main
console.log(boxEl.abc, boxEl.age, boxEl.height) // undefined...

在大多数情况下,它们是相互作用的

  • 改变property,通过attribute获取的值,会随着改变;
  • 通过attribute操作修改,property的值会随着改变;
    • 但是input的value修改只能通过attribute的方法;

除非特别情况,大多数情况下,设置、获取attribute,推荐使用property的方式:

  • 这是因为它默认情况下是有类型的;
toggleBtn.onclick = function () {checkBoxInput.checked = !checkBoxInput.checked;
}

5.HTML5的data-*自定义属性

前面我们有学习HTML5的data-*自定义属性,那么它们也是可以在dataset属性中获取到的:

// data-*
console.log(div2El.dataset);//DOMStringMap
console.log(typeof div2El.dataset);//object
console.log(div2El.dataset.name, div2El.dataset.age);

二、元素的class、style

1.JavaScript动态修改样式

有时候我们会通过JavaScript来动态修改样式,这个时候我们有两个选择:

  • 选择一:在CSS中编写好对应的样式,动态的添加class
  • 选择二:动态的修改style属性;

开发中如何选择呢?

  • 在大多数情况下,如果可以动态修改class完成某个功能,更推荐使用动态class
  • 如果对于某些情况,无法通过动态修改class(比如精准修改某个css属性的值),那么就可以修改style属性;

接下来,我们对于两种方式分别来进行学习。

2.元素的className和classList

元素的class attribute,对应的property并非叫class,而是className

  • 这是因为JavaScript早期是不允许使用class这种关键字来作为对象的属性,所以DOM规范使用了className;
  • 虽然现在JavaScript已经没有这样的限制,但是并不推荐,并且依然在使用className这个名称;

我们可以对className进行赋值,它会替换整个类中的字符串。

var boxE1 = document.querySelector(".box");
boxE1.className = "why abc";

如果我们需要添加或者移除单个的class,那么可以使用classList属性。

elem.classList 是一个特殊的对象

  • elem.classList.add(class) :添加一个类
  • elem.classList.remove(class):添加/移除类。
  • elem.classList.toggle(class) :如果类不存在就添加类,存在就移除它。
  • elem.classList.contains(class):检查给定类,返回 true/false。

classList是可迭代对象,可以通过for of进行遍历。

3.元素的style属性

如果需要单独修改某一个CSS属性,那么可以通过style来操作:

  • 对于多词(multi-word)属性,使用驼峰式 (camelCase )
boxEl.style.width = "100px';
boxEl.style.height = "50px";
boxE1.style.backgroundColor = "red";

如果我们将值设置为空字符串,那么会使用CSS的默认样式

boxEl.style.display = "";

多个样式的写法,我们需要使用cssText属性:

h1El.style.color = "blue";
h1El.style.border = "1px solid red";
// 会覆盖上面的color和border配置
h1El.style.cssText = "font-size: 24px";
  • 不推荐这种用法,因为它会替换整个字符串;
// 1.在property中使用的驼峰格式
// console.log(boxEl.style.backgroundColor)// 2.如果将一个属性的值, 设置为空的字符串, 那么是使用默认值
// boxEl.style.display = ""
// boxEl.style.fontSize = ""// 3.设置多个样式
// boxEl.style.fontSize = "30px"
// boxEl.style.color = "red"
boxEl.style.cssText = "font-size: 30px; color: red;"

4.元素style的读取 - getComputedStyle

如果我们需要读取样式:

  • 对于内联样式,是可以通过style.*的方式读取到的;
  • 对于style、css文件中的样式,是读取不到的;

这个时候,我们可以通过getComputedStyle的全局函数来实现:

console.log(getComputedStyle(boxEl).fontSize)

四、元素的常见操作

1.创建元素

前面我们使用过 document.write 方法写入一个元素:

  • 这种方式写起来非常便捷,但是对于复杂的内容元素关系拼接并不方便;
  • 它是在早期没有DOM的时候使用的方案,目前依然被保留了下来;

那么目前我们想要插入一个元素,通常会按照如下步骤:

  • 步骤一:创建一个元素;
  • 步骤二:插入元素到DOM的某一个位置;

创建元素: document.createElement(tag)

 // 创建元素
var div1El = document.createElement("div");
div1El.textContent = "我是div元素";
div1El.style.color = "red";
div1El.style.fontSize = "18px";

2.插入元素

插入元素的方式如下:

  • node.append(...nodes or strings) —— 在 node 末尾 插入节点或字符串,
  • node.prepend(...nodes or strings) —— 在 node 开头 插入节点或字符串,
  • node.before(...nodes or strings) —— 在 node 前面 插入节点或字符串,
  • node.after(...nodes or strings) —— 在 node 后面 插入节点或字符串,
  • node.replaceWith(...nodes or strings) —— 将 node 替换为给定的节点或字符串。

在这里插入图片描述

3.移除和克隆元素

移除元素我们可以调用元素本身的remove方法:

如果我们想要复制一个现有的元素,可以通过cloneNode方法:

  • 可以传入一个Boolean类型的值,来决定是否是深度克隆
  • 深度克隆会克隆对应元素的子元素,否则不会;
<body><button class="remove-btn">移除box</button><button class="clone-btn">复制box</button><div class="box"><h2>我是标题</h2><p>我是文本, 哈哈哈哈哈</p></div><script>// 1.获取元素var boxEl = document.querySelector(".box")var removeBtnEl = document.querySelector(".remove-btn")var cloneBtnEl = document.querySelector(".clone-btn")// 2.监听removeBtn的点击removeBtnEl.onclick = function() {boxEl.remove()}// 3.复制boxvar counter = 0cloneBtnEl.onclick = function() {var newNode = boxEl.cloneNode(true)newNode.children[0].textContent = "我是标题" + counter// boxEl.after(newNode)document.body.append(newNode)counter++}</script></body>

4.旧的元素操作方法

在很多地方我们也会看到一些旧的操作方法:

  • parentElem.appendChild(node)
    • 在parentElem的父元素最后位置添加一个子元素
  • parentElem.insertBefore(node, nextSibling)
    • 在parentElem的nextSibling前面插入一个子元素;
  • parentElem.replaceChild(node, oldChild)
    • 在parentElem中,新元素替换之前的oldChild元素;
  • parentElem.removeChild(node)
    • 在parentElem中,移除某一个元素;

5.元素的大小和滚动

clientWidth:contentWith+padding(不包含滚动条)

clientHeight:contentHeight+padding

clientTop:border-top的宽度

clientLeft:border-left的宽度

offsetWidth:元素完整的宽度

offsetHeight:元素完整的高度

offsetLeft:距离父元素的x

offsetHeight:距离父元素的y

scrollHeight:整个可滚动的区域高度

scrollTop:滚动部分的高度

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {padding: 100px;}.box {width: 100px;height: 100px;padding: 20px;border: 10px solid red;/* box-sizing: border-box; */background-color: orange;overflow: auto;}</style>
</head>
<body><div class="box">你去过国内最美的地方是哪# 我去过国内最美的地方是新疆喀纳斯。喀纳斯是一个美丽而神秘的地方,这里群山环抱,森林密布,湖水清澈,风景奇特。为国家级5A级景区,国家地质公园,国家森林公园。</div><script>var boxEl = document.querySelector(".box")// 1.获取样式(局限性很强)var boxStyle = getComputedStyle(boxEl)console.log(boxStyle.width, boxStyle.height)// 2.获取更多信息console.log(boxEl.clientWidth)console.log(boxEl.clientHeight)console.log(boxEl.clientLeft)console.log(boxEl.clientTop)console.log(boxEl.offsetWidth)console.log(boxEl.offsetHeight)console.log(boxEl.offsetLeft)console.log(boxEl.offsetTop)console.log(boxEl.scrollHeight)console.log(boxEl.scrollTop)// window对象window.onclick = function() {console.log(boxEl.scrollTop)}</script></body>
</html>

五、window的大小和滚动

window的width和height

  • innerWidthinnerHeight:获取window窗口的宽度和高度(包含滚动条)
  • outerWidthouterHeight:获取window窗口的整个宽度和高度(包括调试工具、工具栏)
  • documentElement.clientHeightdocumentElement.clientWidth:获取html的宽度和高度(不包含滚动条)

window的滚动位置:

  • scrollX:X轴滚动的位置(别名pageXOffset)
  • scrollY:Y轴滚动的位置(别名pageYOffset)

也有提供对应的滚动方法:

  • 方法 scrollBy(x,y) :将页面滚动至 相对于当前位置的 (x, y) 位置;
  • 方法 scrollTo(pageX,pageY) 将页面滚动至 绝对坐标;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/78838.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Flutter 使用pageview无缝隙自动轮播教程

导入要使用的轮播图片 List<String> imagesa ["assets/images/car_qidian.jpg","assets/images/car_bg.jpg","assets/images/car_bg.jpg","assets/images/car_bg.jpg","assets/images/car_bg.jpg","assets/imag…

【算法与数据结构】450、LeetCode删除二叉搜索树中的节点

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析&#xff1a;本题首先要分析删除节点的五种情况&#xff1a; 1、没有找到节点2、找到节点 左右子树为空左子树为空…

docker容器管理-实操命令

本单元主要是在docker镜像管理下进一步的培训学习文档。 docker镜像管理-实操_忍冬行者的博客-CSDN博客 四.容器管理 1.运行一个容器 docker container run --name c1 -it nginx:latest /bin/sh 2.后台运行一个容器 docker container run --name c1 -it -d nginx:latest 3.查…

微信小程序项目开发Day1

没接触过&#xff0c;直接看视频学习&#xff1a; 千锋教育微信小程序开发制作前端教程&#xff0c;零基础轻松入门玩转微信小程序_哔哩哔哩_bilibili千锋教育微信小程序开发制作前端教程&#xff0c;零基础轻松入门玩转微信小程序共计56条视频&#xff0c;包括&#xff1a;学…

List 获取前N条数据

1.使用for循环遍历 public static void main(String[] args) {int limit 5;List<Integer> oldList Lists.newArrayList(1, 2, 3, 4, 5, 6, 7);List<Integer> newList Lists.newArrayList();if (oldList.size() < limit) {newList.addAll(oldList);return;}fo…

软件工程课件

软件工程 考点概述软件工程概述能力成度模型能力成熟度模型集成软件过程模型逆向工程软件需求需求获取数据流图 需求定义 考点概述 重点章节 软件工程概述 之前老版教程的&#xff0c;之前考过 能力成度模型 记忆 能力等级 和 特点 能力成熟度模型集成 相比于CMM&#xff0c;第…

结合el-input、el-select实现纯前端过滤树形el-table数据

样式图示 1.搜索实现方法 const searchBtn async () > {// 获取table列表数据接口const res await Api.menuList({paging: false})if (res.code 200) {// 把树形结构转成扁平结构let result treeToArray(res.data)// 处理搜索框中数据进行table显示项过滤if(commonData…

分享!JetBrains IDE中的GitLab支持

GitLab是流行的基于git的软件开发和部署平台之一&#xff0c;虽然很长一段时间以来&#xff0c;所有基本git操作都已经可以通过GitLab实现&#xff0c;但GitLab集成仍是JetBrains社区的一大最热门请求。为此&#xff0c;JetBrains团队今年与GitLab联手提供了这种类型的集成。 …

2023年华为杯研究生数学建模竞赛辅导

2023年华为杯研究生数学建模竞赛辅导 各研究生培养单位&#xff1a; 中国研究生数学建模竞赛作为教育部学位管理与研究生教育司指导&#xff0c;中国学位与研究生教育学会、中国科协青少年科技中心主办的“中国研究生创新实践系列大赛”主题赛事之一&#xff0c;是一项面向在校…

使用阿里PAI DSW部署Stable Diffusion WebUI

进入到网址https://pai.console.aliyun.com/里边。 点击创建实例。 把实例名称填写好&#xff0c;选择GPU规格&#xff0c;然后选择实例名称是ecs.gn6v-c8g1.2xlarge。 选择stable-diffusion-webui-env:pytorch1.13-gpu-py310-cu117-ubuntu22.04&#xff0c;然后点击下一步。…

如何利用软文推广进行SEO优化(打造优质软文,提升网站排名)

在当今的互联网时代&#xff0c;SEO优化成为了网站推广的关键。而软文推广作为一种有效的推广方式&#xff0c;其优点不仅仅局限于SEO&#xff0c;还可以带来更多的曝光和用户流量。本文将深入探讨如何做好软文推广&#xff0c;从而提升网站排名和流量。 了解目标受众群体 内容…

springboot集成excel导入导出

1、引入依赖 <dependency><groupId>com.pig4cloud.excel</groupId><artifactId>excel-spring-boot-starter</artifactId><version>1.2.7</version> </dependency> 2、导出 ResponseExcel(name "测试列表") Post…

【学习总结】EasyExcel合并同列不同行,表格数据相同的行

实体类 Data HeadRowHeight(50) ContentStyle(horizontalAlignment HorizontalAlignmentEnum.CENTER, verticalAlignment VerticalAlignmentEnum.CENTER, wrapped BooleanEnum.TRUE) public class CriterionDataExportDTO {ColumnWidth(15)ExcelProperty(value "所属…

点云从入门到精通技术详解100篇-基于补全点云与图像像素级融合的障碍物识别(中)

目录 2.2.2 图像预处理公式章 2 基于隶属云理论点云场景补全 3.1 点云补全方法公 3.2 隶属云理论

Unet语义分割-语义分割与实例分割概述-001

文章目录 前言1、图像分割和图像识别1.语义分割2.实例分割 2、分割任务中的目标函数定义3.IOU 前言 大纲目录 1、图像分割和图像识别 下面是图像识别和图像分割的区别&#xff0c;图像识别就是识别出来&#xff0c;画个框&#xff0c;右边的是图像分割。 1.语义分割 两张图把…

ORB-SLAM2_RGBD_DENSE_MAP编译、问题解决、离线加载TUM数据和在线加载D435i相机数据生成稠密地图

文章目录 0 引言1 安装依赖1.1 其他库安装1.2 pcl库安装 2 编译ORB-SLAM2_RGBD_DENSE_MAP2.1 build.sh2.2 build_ros.sh 3 运行ORB-SLAM2_RGBD_DENSE_MAP3.1 build.sh编译版本3.2 build_ros.sh编译版本 0 引言 ORB-SLAM2_RGBD_DENSE_MAP是基于ORB-SLAM2框架的一种RGB-D稠密地图…

【视频】Python用LSTM长短期记忆神经网络对不稳定降雨量时间序列进行预测分析|数据分享...

全文下载链接&#xff1a;http://tecdat.cn/?p23544 在本文中&#xff0c;长短期记忆网络——通常称为“LSTM”——是一种特殊的RNN递归神经网络&#xff0c;能够学习长期依赖关系&#xff08;点击文末“阅读原文”获取完整代码数据&#xff09;。 本文使用降雨量数据&#xf…

基于FPGA的图像sobel锐化实现,包括tb测试文件和MATLAB辅助验证

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 将FPGA的仿真结果导入到matlab显示图像效果 2.算法运行软件版本 MATLAB2022a,vivado2019.2 3.部分核心程序 .................................…

如何工作和生活相平衡?

之前待过一家外企&#xff0c;他们的口号是 Balancing work and life&#xff0c;工作和生活相平衡。辗转几家公司之后&#xff0c;发现这个越来越难了&#xff0c;越来越少的时间投入家庭和自己的生活。 人生的意义 &#xff08;AI&#xff09; 人生的意义是一个深奥而复杂的…

EMANE中olsrd的调试

1 调试目的 本着学习的态度&#xff0c;对emane tutorial中的示例程序进行重现&#xff0c;以加深对EMANE的理解和掌握。在示例程序0(见https://github.com/adjacentlink/emane-tutorial/wiki/Demonstration-0)中介绍了使用olsrlinkview.py脚本来通过可视化界面观察olsr节点的链…