JavaScript 获取元素的原生JS方法_js 原生 根据属性查找_Regino的博客-程序员秘密
技术标签： Front-end javascript
获取元素的原生JS方法
1. 两种方法的比较
- 原生 JS 获取元素的方法：queryXXX 和 getElementByXXX。这里比较了使用他们的区别：
1.根据id获取标签元素: 唯一的元素
document.getElementById("ID")
document.querySelector("#ID")
2.根据class获取多个元素
document.getElementsByClassName("class属性值")
document.querySelectorAll(".class属性值")
3.根据标签名称获取多个元素
document.getElementsByTagName("标签")
document.querySelectorAll("标签")
4. 根据name属性获取多个元素
document.getElementsByName('name属性值')
document.querySelectorAll([name=name值])
5. 获取当前元素的父标签
element.parentElement //element表示当前标签对象
2. 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生JS获取元素的方法</title>
<style>
.clz{
background-color: red;
}
</style>
</head>
<body>
<span name="name_span" id="t1" style="font-size: 30px" class="clz">原生 JS 获取元素的方法</span>
</body>
<script>
//getElementByXXX方法
//根据id获取
let elementById = document.getElementById("t1");
console.log(elementById);
//根据类属性值
let arr = document.getElementsByClassName("clz");
console.log(arr[0]);
//根据name属性值
let byName = document.getElementsByName("name_span");
console.log(byName[0]);
//根据标签名获取
let tagName = document.getElementsByTagName("span");
console.log(tagName[0]);
//queryXXX方法，传递的参数值和css选择器语法一致
//es6新特性 根据id获取
console.log( document.querySelector("#t1") );
//根据类属性值
console.log( document.querySelectorAll(".clz")[0]);
//根据name属性值
console.log( document.querySelectorAll("[name=name_span]")[0]);
</script>
</html>
- Console：
智能推荐
Power BI中datatable函数实现SQL Server中的虚拟表_sqlserver插入虚拟表_阳泉酒家小当家的博客-程序员秘密
Power BI是微软开发的一款功能非常强大的的BI工具，可以制作非常美观的报表，但这个工具的核心是DAX，翻译为中文就是 数据分析表达式，有点类似于excel函数，但又很不一样。DAX中的很多功能可以与SQL对应，但差异也很大。 本文要讲的是用 datatable函数实现 sql server中的虚拟表。 1、sql server中的虚拟表不是一张真实存在表，是只存在于...
JAX-RS 2.0 中 REST 的四种服务类型_formyth的博客-程序员秘密
最近在学习 jersey 框架。他是 目前比较流行的 基于 JAX-RS 2.0 规范实现的 RESTful 框架。我是跟着 《Java RESTful Web Service 实战》 一书 在学习。书中有些知识点，不太常用，但是比较重要，特写下次笔记已备忘。概要如下图：情况一：当不存在 Application 子类，也不存在 Servlet 子类时 情况二：当不存在 Ap
idea 右侧maven窗口缺少_xsqsharp的博客-程序员秘密
idea开发工具maven项目缺失，调试的显示方法。
JQuery EasyUI(11)_easyui for jquery 1.11_Roger_CoderLife的博客-程序员秘密
第十一章：Accordion（分类）组件学习要点：加载方式 容器属性 事件列表 方法列表 面板属性一、加载方式：1.class加载方式2.JS调用二、容器属性：Accordion容器属性 属性名 值 说明 width number 分类容器的宽度。默认值为au...
ios 动画_理想_Birian的博客-程序员秘密
CATransition 的初级应用及type属性分类： ios 2012-03-21 13:34 4689人阅读 评论(2)收藏 举报animationtransitionframeworksapi需要在frameworks中添加QuartzCore.framework在接口程序中加上头文件 #import /*好多动画效果*/
python处理excel的第三方库（适用带格式报表）_python excel 三方库_M-1015的博客-程序员秘密
python处理excel的第三方库（适用带格式报表）pandas是将excel作为数据的容器，难以处理非结构化的数据和格式问题，因此对处理报表来说不太合适。本文整理了7个python处理excel的第三方库。从功能和性能来看，xlwings是最好的选择：同时支持xls,xlsx两种格式，文档完善，功能友好。（xlwings其实调用了pywin32，性能仅略差于pywins32。）xlrdPython读写Excel文件第三方库汇总，你想要的都在这儿！...
随便推点
mysql IF IFNULL函数_书香水墨的博客-程序员秘密
一、IF(expr, v1, v2)函数IF(expr, vl, v2)如果表达式 expr 是 TRUE(expr o 0 and expr o NULL),则 IF()的返回值为 vl ： 否则返回值为v2o IF()的返回值为数字值或字符串值，具体情况视其所在语境而定。-- 结果为：3, yes, noSELECT IF(1 > 2, 2, 3), IF(1 < 2, ...
Android View滚动、拉伸到顶/底部弹性回弹复位_android滚动拉伸_zhangphil的博客-程序员秘密
《Android View滚动、拉伸到顶/底部弹性回弹复位》我在上一篇文章介绍了如何实现一个Android ListView拉到顶/底部后，像橡皮筋一样弹性回弹复位（《Android ListView拉到顶/底部，像橡皮筋一样弹性回弹复位》，文章链接地址：http://blog.csdn.net/zhangphil/article/details/47311155 ）。事实上，
hdoj_4417Super Mario_N3verL4nd的博客-程序员秘密
Super MarioTime Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submission(s): 1292 Accepted Submission(s): 636Problem DescriptionMario is world-
30岁的程序员，你迷惘了吗?_weixin_30535167的博客-程序员秘密
摘要：本文写给30左右还奋斗于编写岗位的程序员们，因为在这个年龄段，可能技能、岗位、收入都已相对稳定，但同时，大家或多或少有些不同想法，或收入，或前途，或即将创业的想法......如果你还是刚毕业或参加工作一两年的程序员，希望不会左右你好好学习技能的心，好好在本岗位好好发展下去。文笔有限，若有不好之处，勿喷，只作大家交流一下内心深处真实想法！好久没写点东西了，借此机会让自己冷静下来，好好沉淀一...
c语言输入一个英文字母输出它的前后本身字母_从键盘输入一个英文字母,输出其前驱字母(即前一个字母)、后继字母(即后一个字母)_yeah~~的博客-程序员秘密
代码为下#include<stdio.h>int main(){printf("输入一个字母显示前后\n");char a;a=getchar();if((a>'a')&&(a<'z'))printf("前导字母为%c,字母本身为%c,后续字母为%c\n",a-1,a,a+1);if (a == 'a')printf("前导字母无,字母本身为%c,后续字母为%c\n",a, a + 1);if(a=='z')printf("前导字母...