js Dom基础

获取元素

1、getElementById() 通过id属性获取一个元素节点对象

<div id="div1"></div>

 <script>

       var div1 = document.getElementById('div1')

 </script>

2、 getElementsByTagName()可以根据标签名来获取一组元素节点对象

这个方法会给我们返回一个类数组对象,所有查询到的元素都会封装到对象中

即使查询到的元素只有一个,也会封装到数组中返回

<div id="div1"></div>

 <div class="cls"></div>

<div></div>

<script>

        var divs = document.getElementsByTagName('div')

        console.log(divs);     //  [div#div1, div.cls, div, div]

</script>

3、getElementsByName() 通过name属性获取一组元素节点对象

<div id="div1" name='nme'></div>

<div class="cls" name='nme'></div>

<div name='nme'></div>

<script>

        var divs = document.getElementsByName('nme')

        console.log(divs);  //  [div#div1, div.cls, div]

</script>

4、 getElementsByClassName() 通过class属性获取一组元素节点对象 (不支持IE8及以下浏览器)

<div id="div1" class="cls"></div>

<div class="cls"></div>

<div class="cls"></div>

<script>

        var divs = document.getElementsByClassName('cls')

        console.log(divs);  // [div#div1.cls, div.cls, div.cls]

</script>

5、 document.querySelector()

-需要一个选择器的字符串作为参数,可以根据一个css选择器来查询一个元素节点对象

-该方法总会返回唯一的元素,如果满足条件的元素是多个,那么它只会返回第一个

-IE8以上的都适用

<div id="div1" class="cls"></div>

<div class="cls"></div>

<script>

        var divs = document.querySelector('.cls')

        console.log(divs);  // <div id="div1" class="cls"></div>

</script>

<div id="div1" class="cls">

        <p></p>

</div>

<script>

        var p = document.querySelector('.cls p')

        console.log(p);  // <p></p>

.</script>

6、document.querySelectorAll()

-该方法和qureySelector()用法类似,

    不同的是它将会将符合条件的元素封装到一个数组中返回

    -即使符 合条件的元素只有一个,它也会返回数组

<div id="div1" class="cls"></div>

<div class="cls"></div>

<div class="cls"></div>

<script>

        var divs = document.querySelectorAll('.cls')

        console.log(divs);  // [div#div1.cls, div.cls, div.cls]

</script>

操作元素

操作内容

element.innerText    从起始位置到终止位置的内容,但它去除html标签,同时空格和换行也会去掉

element.innerHTML   起始位置到终止位置的全部内容,包括HTML标签,同时保留空格和换

 <div class="box">

        <p> 内容 </p>

</div>

<script>

        var box = document.querySelector('.box')

        console.log(box.innerHTML);  //  <p> 内容 </p>

        console.log(box.innerText);  //  内容

</script>

操作属性

操作标签自带的属性

比如:src herf  value  chexked  disabled  title

<img src="./img1.png" alt="">

<input type="text">

<script>

        var img = document.querySelector('img')

        var ipt = document.querySelector('input')

        img.src = './img2.png'

        ipt.value = '直接赋值value'

</script>

操作元素样式

我们可以通过 JS 修改元素的大小、颜色、位置等样式。

1、修改行内样式操作

<img src="./img1.png" alt="">

<p>iedhfiuse</p>

<script>

        var img = document.querySelector('img')

        var p = document.querySelector('p')

        img.style.height = '100px'

        p.style.fontSize = '20px'

</script>

这种写法是通过js把样式写在行内

2、修改类名样式操作

<h1 class="title"></h1>

<p class="cont">iedhfiuse</p>

<script>

        var ttle = document.querySelector('.title')

        var cont = document.querySelector('.cont')

        ttle.className = 'title'

        cont.className = 'content'

</script>

这种方法需要提前在css中写好类名样式比如(title,content),然后通过js操作直接把类名换成写好的类名

注意:

JS里面的样式采取驼峰命名法,比如 fontSize ,backgroundColor
JS 修改 style 样式操作 ,产生的是行内样式,CSS权重比较高
如果样式修改较多,可以采取操作类名方式更改元素样式
class 因为是个保留字,因此使用className来操作元素类名属性
className 会直接更改元素的类名,会覆盖原先的类名

操作自定义属性

获取自定义的属性

element.getAttribute('属性');

<h1 class="title" index="'1"></h1>

<script>

        var ttle = document.querySelector('.title')

        console.log(ttle.getAttribute('index'));  //  1

</script>

设置自定义的属性

element.setAttribute('属性','值');

<h1 class="title"></h1>

<p class="cont">iedhfiuse</p>

<script>

        var ttle = document.querySelector('.title')

        var cont = document.querySelector('.cont')

        ttle.setAttribute('index', 123)

        cont.setAttribute('abc', 1)

        console.log(ttle.getAttribute('index'));  //  123

        console.log(cont.getAttribute('abc'));  // 1

</script>

移除属性

element.removeAttribute('属性');

<h1 class="title"></h1>

<p class="cont">iedhfiuse</p>

<script>

        var ttle = document.querySelector('.title')

        var cont = document.querySelector('.cont')

        ttle.setAttribute('index', 123)

        cont.setAttribute('abc', 1)

        console.log(ttle.getAttribute('index'));  //  123

        console.log(cont.getAttribute('abc'));  // 1

        ttle.removeAttribute('index')

        cont.removeAttribute('abc')

        console.log(ttle.getAttribute('index'));  //  null

        console.log(cont.getAttribute('abc'));  // null

</script>

H5新增自定义属性

H5新规定的自定义属性必须由 data- 开头  例如:data-index="abcd"

获取自定义属性

1、element.getAttribute("自定义属性名")

2、element.dataset.属性名

<h1 data-index="123"></h1>

<script>

        var ttle = document.querySelector('h1')

        console.log(ttle.dataset.index);  //  123

        console.log(ttle.dataset['index']);  // 123

</script>

设置自定义属性

<h1 data-index="123"></h1>

<script>

        var ttle = document.querySelector('h1')

        ttle.setAttribute('data-id', 1)

        console.log(ttle.dataset.id);  // 1

</script>

排他思想

有一组元素,你只想给其中一个设置设置样式,此时就需要把其他的元素排除掉

利用循环先给所有元素清除样式,然后再设置自己想设置的那个

<!-- 需求:给当前点击的按钮,添加背景色 -->

<button>按钮1</button>

<button>按钮2</button>

<button>按钮3</button>

<button>按钮4</button>

<script>

//1、获取到所有的按钮

 var btns = document.querySelectorAll("button");

 //2、通过循环,给所有的按钮绑定点击事件,处理函数

for (var i = 0; i < btns.length; i++) {

      // console.log(btns[i]);

      btns[i].onclick = function () {

        // 排他思想    先去除所有的背景色样式,点击谁就给谁添加背景色

        for (var j = 0; j < btns.length; j++) {

          btns[j].style.backgroundColor = "";

        }

        // 给你每个按钮添加背景色

        this.style.backgroundColor = "red";

      };

    }

 </script>

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

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

相关文章

pcdn服务器应该怎么配?

要配置PCDN&#xff08;Private Content Delivery Network&#xff09;服务器&#xff0c;可以按照以下步骤进行&#xff1a; 需求分析&#xff1a;明确业务需求&#xff0c;确定所需的CDN功能和性能参数。这包括预期的流量、负载、内容类型、目标用户群体等。 硬件选择&#…

VCRUNTIME140_1.dll丢失是怎么回事?vcruntime140_1.dll无法继续执行代码的处理方法

VCRUNTIME140_1.dll丢失是怎么回事&#xff1f;问出这样的问题的人&#xff0c;一般是遇到vcruntime140_1.dll无法继续执行代码的问题了&#xff0c;找不到VCRUNTIME140_1.dll文件&#xff0c;那么程序就肯定是启动不了的&#xff0c;程序的启动是需要VCRUNTIME140_1.dll文件的…

Java进阶学习笔记1——课程介绍

课程适合学习的人员&#xff1a; 1&#xff09;具备一定java基础的人员&#xff1b; 2&#xff09;想深刻体会Java编程思想&#xff0c;成为大牛的人员&#xff1b; 学完有什么收获&#xff1f; 1&#xff09;掌握完整的Java基础技术体系&#xff1b; 2&#xff09;极强的编…

git常用命令使用

1 查看分支 git branch 查看本地分支&#xff08;*号绿色高亮就是所在分支&#xff09;git branch -a 查看远程分支 2 分支常用命令 git branch xxx&#xff1a;新建分支git checkout xxx&#xff1a;切换分支git checkout -b xxx&#xff1a;新建分支并切换到该分支&#x…

可执行文件以及其加载过程

在计算机系统中&#xff0c;可执行文件是指包含机器代码的文件&#xff0c;计算机可以直接执行这些代码以运行特定的任务或程序。不同的操作系统对可执行文件有不同的定义和处理方式。本文将探讨常见操作系统中的可执行文件格式及其加载过程&#xff0c;特别是以ELF&#xff08…

行为设计模式之状态模式

文章目录 概述定义结构图 2.代码示例小结 概述 定义 状态模式(state pattern)的定义: 允许一个对象在其内部状态改变时改变它的行为。 对象看起来似乎修改了它的类。 状态模式就是用于解决系统中复杂对象的状态转换以及不同状态下行为的封装问题.。状态模式将一个对象的状态…

Apache Doris 2.1.3 版本正式发布!

亲爱的社区小伙伴们&#xff0c;Apache Doris 2.1.3 版本已于 2024 年 5 月 20 日正式发布。该版本在功能特性上对数据湖、物化视图、负载管理等方面进行了多项更新&#xff0c;进一步简化湖仓一体架构、加速了查询性能&#xff1b;同时提交了若干改进项以及问题修复&#xff0…

简单的网页分享按钮代码

创建一个网页分享按钮通常涉及到HTML、CSS和JavaScript的组合使用。下面是一个简单的示例代码&#xff0c;展示了如何创建一个包含微博、QQ和QQ空间分享的按钮。请注意&#xff0c;这只是一个前端的实现示例&#xff0c;实际分享功能需要依赖于相应的社交媒体平台提供的API或分…

Flutter 中的 CompositedTransformFollower 小部件:全面指南

Flutter 中的 CompositedTransformFollower 小部件&#xff1a;全面指南 在Flutter的动画和视觉效果世界中&#xff0c;CompositedTransformFollower是一个高级组件&#xff0c;它允许开发者创建复杂的跟随动画。这个小部件通常用于实现视差效果或者当一个组件需要跟随另一个组…

New Phytologist:杨树特有miRNA在调控杨树抗旱中的分子机制

2024年3月6日&#xff0c;林木遗传育种全国重点实验室、北京林业大学生物科学与技术学院尹伟伦与夏新莉教授课题组在New Phytologist&#xff08;中科院一区&#xff0c;影响因子9.4&#xff09;期刊发表了题为“The miR6445-NAC029 module regulates drought tolerance by reg…

CSS:transform作用

transform作用 介绍常用函数&#xff1a;1.平移&#xff08;Translate&#xff09;介绍代码举例 2.旋转&#xff08;Rotate&#xff09;介绍代码举例 3.缩放&#xff08;Scale&#xff09;介绍代码举例 4.倾斜&#xff08;Skew&#xff09;介绍代码举例 5.矩阵变换&#xff08;…

selenium 学习笔记(一)

pip的安装 新建一个txt curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py 把上面的代码复制进去后&#xff0c;把后缀名改为.bat然后双击运行 当前目录会出现一个这个文件 然后在命令行pyhon get-pip.py等它下好就可以了selenium安装 需要安装到工程目…

linux查看是否被入侵(二)

1、检查异常系统文件 [rootbastion-IDC ~]# find / -uid 0 -perm -4000 -print [rootbastion-IDC ~]# find / -size 10000k –print [rootbastion-IDC ~]# find / -name "…" –print [rootbastion-IDC ~]# find / -name ".." –print [rootbastion-I…

云计算-Lambda事件 (Lambda Events)

检索事件信息 (Retrieving Event Information) 在上一个主题中&#xff0c;我们已经看到了如何创建一个Lambda函数、添加handler、添加触发器和配置执行策略。在本主题中&#xff0c;我们将对其进行扩展。到目前为止&#xff0c;我们看到的handler应用非常简单&#xff0c;但我…

香橙派——创建Service打开热点

文章目录 要创建一个service来创建热点&#xff0c;你可以按照以下步骤进行操作&#xff1a; 创建一个service文件&#xff1a; sudo vim /etc/systemd/system/hotspot.service这将使用nano编辑器创建一个新的service文件。 在打开的文件中&#xff0c;添加以下内容&#xff1…

linux 定时执行shell、python脚本

在linux里设置定时执行一般是用crontab&#xff0c;如果没有的话&#xff0c;可以先安装&#xff1a; 安装 查看是否安装 cron -v # 对于基于Debian的系统&#xff08;如Ubuntu&#xff09; sudo apt-get install cron# 对于基于RedHat的系统&#xff08;如CentOS&#xff…

【5】:三维到二维变换(模型、视图、投影)

观测变换 物体上某一点的坐标变换顺序&#xff1a;M->V->P MVP变换用来描述视图变换的任务&#xff0c;即将虚拟世界中的三维物体映射&#xff08;变换&#xff09;到二维坐标中。 1.Model Transformation 模型变换 场景中每个物体上的某一点&#xff0c;从局部坐标系…

YoloV8实战:各种图绘制汇总(mAP50、mAP50-95、loss、PR_curve、F1_curve)|科研必备|绘图神器

摘要 本文的内容是告诉大家如何绘制mAP50、mAP50-95、loss、PR_curve、F1_curve等图像,方便大家写论文。 绘制mAP50、mAP50-95、loss等图。 先上效果,如下图: 首先将,训练的result.csv汇总到一个文件夹下面(这样方便寻找),要不然找起来太麻烦。如下图: 我都放到re…

Pyinstaller打包exe文件解决指南

打包命令 打包 Python 文件 输入如下格式的命令即可 默认命令 Pyinstaller 文件名.py Pyinstaller -option1 -option2 -... 要打包的文件 Pyinstaller 文件名.pyPyinstaller -option1 -option2 -... 要打包的文件 参数选项比较多&#xff0c;这里我列一个表&#xff1a;…

onnx模型转换到rknn脚本

from rknn.api import RKNN ONNX_MODEL ./onnx_models/yolov5s_rm_transpose.onnx # platform"rk1808" platform "rv1109" RKNN_MODEL yolov5s_relu_{}_out_opt.rknn.format(platform) if __name__ __main__: add_perm False # 如果设置成True,则将模…