Js中获取HTML元素的方式有哪些?小白指南_元素使用帮助

对于许多前端开发项目来说,获取元素进行操作是必不可少的,例如tab标签,全屏切换,自动滚播等效果都需要通过获取节点元素来实现。下面我们来看一下JavaScript获取HTML元素的方式。JavaScript中获取HTML元素的方式:getElementById()作用:用于获取一个基于唯一的ID的元素。用法:getelementById(),接受一个你要获取

Js中获取HTML元素的方式有哪些?小白指南

对于许多前端开发项目来说,获取元素进行操作是必不可少的,例如tab标签,全屏切换,自动滚播等效果都需要通过获取节点元素来实现。下面我们来看一下JavaScript获取HTML元素的方式。

Js中获取HTML元素的方式有哪些?小白指南_元素使用帮助

JavaScript中获取HTML元素的方式:

getElementById()

作用:用于获取一个基于唯一的ID的元素。

用法:getelementById(),接受一个你要获取的id参数,如果找到相应的元素则返回该元素,如果找不到就返回null。

代码:

HTML中代码:

<div id =”mydiv”>Hello</div>

JavaScript中代码:

var mydiv = document.getElementById(“mydiv”);      //获取<div>元素

getElementsByTagName

作用:用于获取对应标签的所有对象

用法:getElementsByTag(),接受一个你要获取的标签的参数,返回含零或多个元素的NodeList(节点列表,与数组类似)

代码:

HTML中代码:

<p>hello</p>
<p>hi</p>
<p>i am fine</p>

JavaScript中代码:

 var array = document.getElementsByTagName(“p”);           //获取p的元素节点列表
 P[0].style.color =”red”                      //”hello”变为红色字体

getElementsByName

作用:用于获取对应name名的所有元素

用法:getElementsByName(),接受一个你要获得name名的参数,返回含零或多个元素的NodeList(节点列表,与数组类似)

代码:

HTML中代码:

 <p name=”lid”>hello</p>
 <p name=”lid”>hi</p>

JavaScript中代码:

 var name = document.getElementsByName(“lid”);  //获取name为lid所有元素节点
 Name[0];            //”hello”

getElementsByClassName

作用:用于获取对应class名的所有元素

用法:getElementsByClassName(),接受一个你要获得class名的参数,返回含零或多个元素的NodeList(节点列表,与数组类似)

HTML中代码:

<p class=”lid”>hello</p>
<p class=”lid”>hi</p>

JavaScript中代码:

var name = document.getElementsByClassName(“lid”);   //获取name为lid所有元素节点
Name[0];            //”hello”
海计划公众号
(0)
上一篇 2020/03/20 22:21
下一篇 2020/03/20 22:21

您可能感兴趣的内容

  • webpack 中 import css 文件报错: Module build failed…基础教程_webpack基础教程

    项目中引入了css文件,配置了 rules 中:{test: /\\.css$/,use: [‘css-loader’, ‘style-loader’]
    }
    在执行 webpack 命令时,发生错误,报错信息:Module build failed (from ./node_modules/css-loader/dist/cjs.js):CssSyntaxE

    2020/03/20
  • 网站架构优化性能小白帮助_架构使用帮助

    最开始的网站架构最初业务量不大,访问量小,此时的架构,应用程序、数据库、文件都部署在一台服务器上,有些甚至仅仅是租用主机空间1. 应用、数据、文件分离将应用程序、数据库、文件各自部署在独立的服务器上,并且根据服务器的用途配置不同的硬件,达到最佳的性能效果。2. 利用缓存改善网站性能 大部分网站访问都遵循28原则,即80%的访问请求,最终落在20%的数据上,所

    2020/03/23
  • 合格PHP程序员应该掌握哪些技术?使用攻略_技术入门基础知识

    Linux能够流畅的使用Shell脚本来完成很多自动化的工作;awk/sed/perl 也操作的不错,能够完成很多文本处理和数据统计等工作;基本能够安装大 部分非特殊的Linux程序(包括各种库、包、第三方依赖等等,比如MongoDB/Redis/Sphinx/Luncene/SVN之类的);了解基 本的Linux服务,知道如何查看Linux的性能指标数据,

    2020/03/29
  • 理解Javascript的变量提升小白指南_变量指南攻略

    正文Javascript中的变量提升说的是在程序中可以在变量声明之前就进行使用:console.log(a); // undefined
    var a = 1;可以看到,在变量a声明之前我们可以正常调用a,代码的实际的表现更像是这样的:var a;
    console.log(a); // undefined
    a = 1;但实际上,代码并没有被改变,上面的代码只是

    2020/03/20
  • 好的程序员与不好的程序员,如何评价程序员的水平才算客观小白入门_段子小白攻略

    有感于知乎上的一篇关于程序员的讨论。让我突然之间心有戚戚然的感觉。最近一段时间有点江郎才尽的感觉,写不了大的主题,就写点小东西吧。我们从知乎上面引用的这段小故事开始:魏文王问扁鹊家里三兄弟谁的医术最好。扁鹊回答说大哥最好,二哥次之,他自己最差。魏文王疑惑了,又问道,为什么扁鹊最有名呢?扁鹊回答说因为大哥治病的时候人没病就防止了,所以毫无名气。二哥呢,病刚起来

    2020/04/06
  • vum菜鸟知识_手机 webapp 打造的基于 Vue.js 构建的UI框架

    vum菜鸟知识 官方网址:http://getvum.com/ GitHub:https://github.com/vum-team/vum 简介描述:手机 webapp 打造的基…

    2020/03/06
  • js语言中常见错误总汇小白指南_js技巧基础入门

    1. Uncaught TypeError: Cannot Read Property这是 JavaScript 开发人员最常遇到的错误。当你读取一个属性或调用一个未定义对象的方法时,Chrome 中就会报出这样的错误。导致这个错误发生的原因有很多,常见的一种情况是在渲染 UI 组件时,不正确地初始化状态。2. TypeError: ‘undefined

    2020/04/03
  • js中的if判断语句和switch条件分支语句攻略教程_条件小白指南

    语句是js中最重要的成分。本文想介绍的是if判断语句和switch条件分支语句if条件判断语句形式:if(条件判断){表达式
    }意思就是,当满足条件判断的句子,执行花括号内的表达式直接看看有坑的地方需求:当score为60分以下,控制台打印不及格,当score为60分以上,控制台打印及格,当score为85分以以上,控制台打印优秀var score = 60

    2020/03/31
  • 七米设计菜鸟攻略_免费电商设计师交流平台

    七米设计菜鸟攻略 官方网址:http://www.7msj.com/ 简介描述:免费电商设计师交流平台 七米设计网(www.7msj.com),专注电商设计欣赏,淘宝免费素材下载,…

    2020/03/06
  • js实现图片转base64格式,并压缩上传基础知识入门_图片菜鸟教程下载

    需求: 需要用户上传身份证,并识别身份证的编号存储在后端,这里要求实现图片上传,并转为base64的格式,传给服务器识别图片的身份证号码。由于很多用户用手机拍摄的照片,出现尺寸比较大的情况,因此需要进行压缩处理,比如:图片宽或者高大于1000px,就进行等比例压缩后再进行上传。 思路: 1) 调用 FileReader的 reader.readAsDataU

    2020/03/24
  • 使用 CSS 追踪用户使用攻略_网页菜鸟攻略

    除了使用 JS 追踪用户,现在有人提出了还可以使用 CSS 进行网页追踪和分析,译者认为,这种方式更为 优雅,更为 简洁,且 不好屏蔽,值得尝试一波我们可以用它来做什么我们可以收集关于用户的一些基本信息,例如 屏幕分辨率(当浏览器最大化时)以及用户使用的什么浏览器(引擎)此外,我们可以监测用户是否点击某个链接或鼠标悬停在某个元素上,用来 追踪用户悬停的链接,

    2020/03/30
  • 逼真的HTML5 3D水波动画 可多视角浏览菜鸟攻略_3D小白指南

    这是一款基于HTML5的3D水波动画特效,它的效果非常逼真,水池中的石头在水中沉浮,泛起了一层层水波。同时我们可以拖拽鼠标从不同的视角来浏览水池,3D效果非常不错。另外,我们可以按“G”键来让水池中的石头上下浮动,按“L”键添加灯光效果,设计相当完美。同时说明一下,这款3D水波动画是基于WebGL渲染技术的,大家可以了解一下WebGL。 HTML代码<im

    2020/03/24
  • TypeScript 泛型的通俗解释菜鸟教程网_泛型新手入门

    在 TypeScript 中我们会使用泛型来对函数的相关类型进行约束。这里的函数,同时包含 class 的构造函数,因此,一个类的声明部分,也可以使用泛型。那么,究竟什么是泛型?如果通俗的理解泛型呢?什么是泛型泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。 通俗的解释,泛型是类型系统中的“

    2020/03/22
  • Weex Ui教程视频_一个基于 Weex 的富交互、轻量级、高性能的 UI 组件库

    Weex Ui教程视频 官方网址:https://alibaba.github.io/weex-ui/#/cn/ GitHub:https://github.com/alibaba…

    2020/03/06
  • 网站性能优化实战新手入门_优化基础入门

    一.网络传输性能优化读取缓存→DNS查询→TCP链接→发起请求→接收响应→处理HTML元素→加载完成。1.资源打包压缩目的:减少请求数、减小请求资源体积、提升网络传输速率工具:webpack(js压缩,html压缩,css提取压缩,依赖关系分析等)3.图片资源优化1)使用精灵图(雪碧图css sprite),就是很多张图标合并到一起,通过背景位置来控制这里给

    2020/03/23
  • 万能瀑布流菜鸟攻略_瀑布流小白知识

    常见的瀑布流实现大部分只适用于子块尺寸固定或内部有图片异步加载的情况。而对于子块有图片这种可能引起尺寸变化的情况,通常的做法是写死图片高度,或检测内部的 img 元素从而在 onload 事件中进行重排。由于我们业务中尺寸变化情况更为复杂,如子块本身异步初始化、内部数据异步获取,且这种尺寸变化时机不可确定,为满足这种需求所以调研完成了一个通用万能的瀑布流实现

    2020/03/21