JS基础-选取元素

最新推荐文章于 2022-01-08 15:34:45 发布
最新推荐文章于 2022-01-08 15:34:45 发布
阅读量1.8k 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43935061/article/details/109203917
版权

为什么学习

业务中或者练习中你会遇到以下问题:

  • 制作效果,第一步应该写什么
  • 页面效果没有正常显示,问题出在哪里

解决以上问题的第一步就是选择正确的html元素.
只有选对了元素,才能进行接下来的效果制作或代码调试.

怎么选取元素

JavaScript
通过Document对象方法来引用对象或者对象集合(Document对象:每个载入浏览器的html文档都会成为Document对象.我们可以从中对html页面的所有元素进行访问)

详细说明

方法名 返回值 说明 代码 例图
getElementById() 元素 返回对拥有指定 ID 的第一个对象的引用 document.getElementById(id) 在这里插入图片描述
getElementsByClassName() 数组 返回文档中所有指定类名的元素集合.使用索引值来获取节点 document.getElementsByClassName(class); 在这里插入图片描述
getElementsByName() 数组 返回带有指定名称的对象的集合 document.getElementsByName(name) 在这里插入图片描述
getElementsByTagName() 数组 返回带有指定标签名的对象的集合(如果传入’*’,返回所有元素列表) document.getElementsByTagName(tagname) 在这里插入图片描述
querySelector() 元素 返回文档中匹配指定 CSS 选择器的一个元素(只返回匹配的第一个元素) document.querySelector(CSS selectors) 在这里插入图片描述
querySelectorAll() 数组 返回文档中匹配指定 CSS 选择器的所有元素集合(可以使用索引值访问) document.querySelectorAll(selectors) 在这里插入图片描述

简单实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
最低0.47元/天 解锁文章
菜鸟风
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS 简单的实现移动选中元素
烂笔头NI
08-13 1493
JS 简单的实现移动选中元素实现效果如图： 实现代码如下：<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> function one_right(){ var l_table=document.getEle
js选择元素
Gamedev
06-27 516
第二章 选择元素 基本选择器 通用选择器     $(‘*’) ID选择器     $(‘#ID’) Class选择器     $(‘.class’) 元素选择器     $(‘div.class’) 1 2 1 2 根据层级查找元素 通过属性选择元素 过滤器位置过滤器 子过滤器 表单过滤器 内容过滤器 其他过滤器 自定义过滤
JS元素选择方法
Revin的博客
01-08 1540
JS元素选择方法
d3.js中的选择元素
春华秋实
04-14 1677
在 D3 中，用于选择元素的函数有两个：d3.select()：是选择所有指定元素的第一个d3.selectAll()：是选择指定元素的全部这两个函数返回的结果称为选择集。怎么使用这2个函数呢？看代码：var body = d3.select("body"); //选择文档中的body元素 var p1 = body.select("p"); //选择body中的第一个p元素 var p...
适合有一定javascript基础的初学者，Jquery教程
03-16
jQuery是一个JavaScript函数库。 jQuery是一个轻量级的"写的少，做的多"的JavaScript库。...HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities
d3.js 数据可视化 JavaScript库
最新发布
04-16
“D3.js是一个JavaScript库，它... 在这里，读者将会学习到数据可视化的基本概念，JavaScript 的函数式编程，以及 D3的基础概念，例如元素选取、数据绑定、动画以及SVG生成。除此之外，读者还会领略到D3的一些高级特性.
jQuery基础.pptx
05-20
HTML元素选取 HTML元素操作 CSS操作 HTML时间函数 JavaScript特效和动画 HTML DOM遍历和修改 AJAX(异步 JavaScript 和 XML。) 2、jQuery优势 目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架...
JavaScript权威指南(第六版) 清晰-完整
04-25
15.2 选取文档元素 15.3 文档结构和遍历 15.4 属性 15.5 元素的内容 15.6 创建、插入和删除节点 15.7 例子：生成目录表 15.8 文档和元素的几何形状和滚动 15.9 HTML表单 15.10 其他文档特性 第16章 脚本化CSS 16.1 ...
slider-jquery:改进滑块-jQuery教程
04-30
在本部分的教程（稍后在Post Mejorando.la中给出）中，我们使用相同的选取框概念，但重点是使用Java脚本进行面向对象的编程，创建了负责此功能的Slider对象，并在此基础上jQuery代码层，用于执行接口的不同元素之间...
js键盘箭头控制上下选中标签元素
03-07
实现键盘的箭头控制选中标签元素，利用js实现的小demo。学习的路上很长远，慢慢的积累吧少年
详解JavaScript中选取元素的所有方法
热门推荐
王龙楷
04-05 1万+
DOM中选取文档元素的方法总共有5种：1.通过id值。2.通过name属性值。3.通过指定的标签名。4.通过class类。5.通过css选择器。下面我就这五种方法详细解释一下吧。1.通过ID选取元素:  document.getElementById()    任何元素都可以有一个id属性，在文档中该值必须唯一，所以该方法返回一个DOM对象。通过id获取元素是最简单最常用的选取元素的方法。getE...
js实现选中当前元素并改变颜色
juju的博客
03-15 1324
jq伪类选择器（:not）的使用 :not() 选择器选取除了指定元素以外的所有元素 /* 选择所有不是段落（p）的元素 */ :not(p) { color: blue; }
js 中选择器调用元素
qq_36484521的博客
01-01 641
**********获取父类 子类中某个元素 111 111 jquery: $("tr:gt(0) td:not(:nth-child(1))").click(function(){ var obj=$(this); var tt=obj.parent().children().eq(2); }) 一、jsp 中使用class="co
选择元素的基本方法
qq_48589662的博客
06-13 978
选择元素的基本方法根据 tag name 选择元素，返回的是 一个列表里面 都是 tag 名为 div 的元素对应的 WebElement对象取出列表中的每个 WebElement对象，打印出其text属性的值text属性就是该 WebElement对象对应的元素在网页中的文本内容限制 选择元素的范围是 id 为 container 元素的内部。id 为 1 的元素 就是第一个搜索结果打印出 第一个搜索结果的文本字符串等待 2 秒2 秒 过后，再去搜索打印出 第一个搜索结果的文本字符串设置最大等待时长为 1
选择元素基本方法
qq_46609486的博客
03-28 393
from selenium import webdriver #webdriver包含了常用的浏览器操作控制方法 #1、打开chrome/safari等浏览器，例如打开谷歌 wd=webdriver.Chrome(r'd:\python38\webdriver\chromedriver.exe') #表示启动浏览器驱动，也启动浏览器 #r表示后面的字符串为原始字符串的意义，\不是转义符。等...
使用HTML5的JS选择器操作页面中的元素
weixin_30515513的博客
01-19 156
文件命名为：querySelector.html，可在Chrome浏览器中预览效果。 1<!DOCTYPEhtml> 2<htmllang="en"> 3<head> 4<metacharset="UTF-8"> 5<title>使用HTML5的JS选择器操作页面中的元素</...
原生JS常用的一些方法
kongjunchao159的博客
10-31 6783
JS选取DOM元素的方法 注意：原生JS选取DOM元素比使用jQuery类库选取要快很多 1、通过ID选取元素 document.getElementById('myid'); 2、通过CLASS选取元素 document.getElementsByClassName('myclass')[0]; 3、通过标签选取元素 document.getElementsByTagName('m
JS中获取焦点和选中的元素
weixin_30236595的博客
08-26 296
JS获取焦点元素： document.activeElement document.activeElement为一个节点可以获取ID nodeName，innerHTML等 JS获取选中元素，一般用去P，span，TD中的文字 if (window.getSelection) { alert(window.getSelectio...
jq 通过 属性获取元素
05-09
jQuery 是一种非常常见的 JavaScript 库，它可以方便地操作 HTML 元素。JQ 通过属性获取元素这个功能，是其一个非常重要的特性。 jQuery 中，在选择器的基础上，可以通过属性来准确地选择需要的元素。其中，通过属性选择元素的方法有以下几种： 1. $("[attribute]") 选择具有特定属性的元素，比如 $("[target]") 选取所有含有 target 属性的元素。 2. $("[attribute=value]") 选择属性值为固定值的元素，具体语法和效果可参考 $("[href='#']")，表示选取所有链接地址为 # 的 a 标签。 3. $("[attribute!=value]") 选择属性值不为固定值的元素，即排除了与指定值相同的元素。 4. $("[attribute^=value]") 选择属性值以指定字符串开头的元素，类似于字符串中的 startsWith() 方法，例如 $("[href^='https://']")。 5. $("[attribute$=value]") 选择属性值以指定字符串结尾的元素，类似于字符串中的 endsWith() 方法，例如 $("[href$='.html']")。 6. $("[attribute*=value]") 选择属性值包含指定字符串的元素，类似于字符串中的 includes() 方法，例如 $("[class*='btn']")。 总之，JQ 通过属性获取元素的能力大大提高了页面开发的效率，能够更加方便地完成 HTML 页面元素的选择和操作，同时也方便了前端开发人员和网站设计师进行页面的布局和样式设计。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值