首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

通过CSS选择器获取href值,而不是href锚点文本

通过CSS选择器获取href值,可以使用JavaScript中的querySelectorAll方法结合CSS选择器来实现。

首先,querySelectorAll方法可以接受一个CSS选择器作为参数,并返回与该选择器匹配的所有元素的NodeList对象。然后,我们可以遍历这个NodeList对象,获取每个元素的href属性值。

下面是一个示例代码:

代码语言:txt
复制
// 获取所有带有href属性的元素
var elements = document.querySelectorAll('[href]');

// 遍历元素,获取href属性值
for (var i = 0; i < elements.length; i++) {
  var hrefValue = elements[i].getAttribute('href');
  console.log(hrefValue);
}

在上述代码中,我们使用了CSS选择器[href]来选择所有带有href属性的元素。然后,通过getAttribute方法获取每个元素的href属性值,并打印输出。

这种方法可以用于获取页面中所有带有href属性的元素的href值,无论是链接、图片还是其他具有href属性的元素。

对于腾讯云相关产品和产品介绍链接地址,可以根据具体的应用场景和需求选择适合的产品。腾讯云提供了丰富的云计算服务,包括云服务器、云数据库、云存储、人工智能等。你可以访问腾讯云官网(https://cloud.tencent.com/)了解更多信息,并根据具体需求选择相应的产品。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

爬虫基础(二)——网页

HTML(HyperText Mark-up Language):超文本标记语言 超文本:HyperText,用超链接的方法,将不同空间的文字信息组织在一起的网状文本 链接:link,从一个文档指向其它文档或从文本...(anchor)指向某已命名位置的链接 :anchor,是网页制作中超级链接的一种,又叫命名记。...图4 window对象及其一些子对象 CSS   通过DOM模型,浏览器就知道如何去显示一个HTML网页的title,h1,body,ul······,但这并不是唯一的方式,我们同样可以通过CSS(Cascading...选择器的作用在于定位以及决定哪些元素受到影响;声明块由一个或多个属性- 对(每个属性-对构成一条声明,declaration)组成,它们指定应该做什么(参见图5 ~图6)。 ?   ...图7 一些CSS选择器的语法规则 CSS选择器的应用 在Beautiful Soup中的应用   例如如果爬取到下面这段HTML代码,就可以通过CSS选择器去提取,如下: html_doc = """

1.9K30

Web专题分享

> 点击此处,弹个框 链接内容除了可以使用文本外,也可以使用图片 锚链接 定义 需要显示的内容 使用锚链接 链接文本 /...--同一个页面跳转--> 链接文本 / 图片 <!...,是多个,以类数组形式存在,使用某个元素时通过下标来获取 标签选择器 document.gerElementsByTagName('标签名') 返回:所有指定标签的合集 name 选择器 document.getElementsByName...可以通过索引访问,索引从 0 开始。 提示: 你可以使用 NodeList 对象的 length 属性来获取匹配选择器的元素属性,然后你可以遍历所有元素,从而获取你想要的信息。...4、操作基本 DOM 获取标签中的 第一类:获取双标签中的(div、span、p) .innerHtml来获取 第二类:获取input中的 value 来获取 添加点击事件 事件:是一个具有某些功能的函数

2.5K20

一篇文章带你了解CSS Pseudo-classes(伪类 )

CSS伪类选择器根据其他条件匹配组件,不一定由文档树定义。CSS 伪类 是添加到选择器的关键字,指定要选择的元素的特殊状态。 一、什么是伪类?...CSS伪类允许设置元素的动态状态的样式,例如悬停,活动状态和焦点状态,以及文档树中现有但不能通过使用其他选择器作为目标的元素,而无需添加任何选择器它们的ID或类。 例如,针对第一个或最后一个子元素。...语法 /*选择器:伪类{ 属性: ; }*/ 二、最常用的伪类 伪类 使用 伪类链接可以以不同的方式显示。 这些伪类使可以对未访问的链接进行样式化,而对访问的链接进行样式化。...一些伪类是动态的,是由于用户与文档进行交互(例如悬停或聚焦等)而应用的。... : lang伪类 语言伪类:lang允许根据特定标记的语言设置来构造选择器。 :lang以下示例中的伪类为明确赋予语言的元素定义了引号no。 例 <!

2K10

一篇文章带你了解JavaScript htmldom 元素

四、通过CSS选择器找到HTML元素 如果想找到所有的HTML元素,匹配指定的CSS选择器 (id, 类名, 类型, 属性, 属性, 等等), 使用querySelectorAll() 方法。...HTML DOM允许JavaScript获取和更改HTML元素的属性。 六、扩展 获取元素的属性 getAttribute()方法用于获取元素上指定属性的当前。...以下示例获取元素的href和title属性的。...如果属性已经存在,则更新;否则,将添加具有指定名称和的新属性,将href属性的设置为元素: 例 var x = document.getElementsByTagName("a")[0]; x.setAttribute...七、总结 本文基于JavaScript基础,介绍了Html元素,从最基本的通过标签名找Html元素,通过类名找Html元素。通过CSS选择器找Html元。最后扩展如何设置元素属性,如何去删除元素属性。

1.8K30

CSS3选择器介绍及用法总结

§ 选择不是p元素的元素 ::selection 高亮文本选择器 ::selection 匹配元素中被用户选中或处于高亮状态的部分 :out-of-range 伪类选择器 :out-of-range 选择在指定区间之外的...“de”的属性 说到这个属性选择器,我还要多说一 我在表格中的示例是这么写的 a[src=\.pdf] 是因为“.”它不认识,我们需要加“\”转义 不过css中属性选择器也可以写成引号的形式 比如说下面代码时等价的...href="#first">1st 2nd 3rd <a href="#fourth...## ::selection是CSS3新增的选择器 它用来匹配突出显示的文本(用鼠标选择文本) 浏览器有默认的样式(背景为蓝色,字体为) this is a long long text.....,仅仅用CSS3的选择器做一个点击按钮切换图片的小图表 通过点击单选框显示不同的图片 像这样 首先我们需要编写html代码 使用三个radio和三个img元素 <input type="radio

1.4K20

CSS】776- 16个非常有用的CSS选择器

熟悉所有的 CSS 是实现这个目标的一种方法 —— 另一种是实施最佳实践和尽可能的减少代码。 1、::first-line | 选择首行文本 这个伪元素选择器选择换行之前文本的首行。...通过 ::selection 伪元素选择器,我们可以将样式应用于高亮区域。...这个伪类选择器应用于根元素,多用于存储全局 CSS 自定义属性。 5、:empty | 仅当元素为空时触发 这个伪类选择器将选中没有任何子项的元素。该元素必须为空。...11、:link | 选择一个未访问过的超链接 这个选择器应用于未被访问过的链接。常用于带有 href 属性的 a 元素。...a:link { color: orangered; }Login 这将选中未被点击过带有 href 的指定界面的 a 元素,选中的元素中的文字将会显示为橙色

75030

HTML+CSS纯干货就业前基础到精通系统学习201693

--图像与文本的对齐方式,图像与文本居中对齐,还可以取top, bottom --> 2.12:超链接标签: [免费注册]</a...: 超链接-记属性: 链接到本页面 记标签用于使用户“跳”到文档的某个部分 步骤1:创建记 主题名称 步骤2:在超链接的 href中使用该记 <a href...cols="40";文本框的列数 rows="6";文本框的行数 下拉列表(SELECT) … </...: 24px; } ID选择器的定义格式为: #ID名{ …样式规则;} 应用ID选择器:id="ID名(不含#)"; CLASS和ID选择器的区别: 1、在CSS中定义样式表时,ID选择器以"#"开头...第一步:创建样式表文件newstyle.css 第二步:把样式文件和网页关联 <LINK rel="stylesheet" type="text/<em>css</em>" href="样式表文件.css"

4.1K90

第91天:CSS3 属性选择器、伪类选择器和伪元素选择器

一、属性选择器 其特点是通过属性来选择元素,具体有以下5种形式: 1、E[attr] 表示存在attr属性即可; div[class] 2、E[attr=val] 表示属性值完全等于val; div...字符并且在“开始”位置; div[class^=mydemo] 5、E[attr$=val] 表示的属性里包含val字符并且在“结束”位置;   div[class$=demos] 二、伪类选择器...除了以前学过的:link、:active、:visited、:hover,CSS3又新增了其它的伪类选择器。...1、以某元素相对于其父元素或兄弟元素的位置来获取无素的结构伪类。 重点理解通过E来确定元素的父元素。...) 没有任何的子元素,包括空格. 3、目标伪类 E:target 结合进行使用,处于当前的元素会被选中;       CSS (层叠样式表)

1.6K30

css3 选择器

4、E[attr^="value"]:指定了属性名,并且有属性,属性是以value开头的; .demo a[href^="http://"]{background:orange;color:green...;} .demo a[href^="mailto:"]{background:green;color:orange;}  5、E[attr$="value"]:指定了属性名,并且有属性,而且属性是以...,第一种是我们在链接中常看到的伪类,如":link",":visited";另外一种被称作用户行为伪类,如“:hover”,":active"和":focus"。...先来看最常见的伪类 .demo a:link {color:gray;}/*链接没有被访问时前景色为灰色*/ .demo a:visited{color:yellow;}/*链接被访问过后前景色为×...3、CSS3的:nth选择器 这节内容才是关键,也是CSS3选择器最新部分,有人也称这种选择器CSS3结构类,下面我们通过实际的应用来具体了解他们的使用和区别,首先列出他具有的选择方法: 1):fist-child

51610

利用属性选择器对外部链接进行样式设计

我们可以简单地使用属性选择器来实现外部链接的自定义样式。 使用属性选择器 CSS 允许我们根据 HTML 元素的属性来设置样式,方法是将它们放在方括号中。...因此,我们可以只为以 http 开头的链接设置样式,通过在我们的属性选择器中插入一个 ^ 字符: a[href^='http'] { /* 外部链接的样式 */ } 或者我们可以使用其他运算符来确定不同的样式条件...: /* 准确匹配 URL */ a[href='https://css-irl.info'] { } /* URL 中任何位置有 'css' */ a[href*='css'] { } /* 以...: /* 区分大小写 */ a[href*='css-irl' s] { } /* 不区分大小写 */ a[href*='css-irl' i] { } 设置伪元素的样式 对于我们的外部链接,我们将通过设置伪元素的样式来附加一个图标...目前,图标可能会换行到文本的下一行,留下一个不受欢迎的孤立图标。 如果我们对伪元素添加 position: absolute,并对元素添加一些右侧填充,则图标将不会单独换行。

10310

CSS选择器世界》读书笔记

CSS选择器的命名 选择器大小写敏感问题: 选择器类型 示例 是否大小写敏感 标签选择器 div{} 不敏感 属性选择器-纯属性 [attr] 不敏感 属性选择器 [attr=val] 属性不敏感、敏感... 本题稍微变化了一下,这里1和2的颜色不是继承来的,而是匹配到了CSS样式,并且2个样式都可以匹配到,此时就得看优先级了,由于优先级相同,所以后来居上故都是蓝色的...val开头的元素 [href^="https"] {} 匹配href以https开头的元素 [attr$=”val”] 属性以val结尾的元素 [href$=".pdf"] {} 匹配href以.pdf...:target:当浏览器是有与当前元素相同时则匹配,这里的也就是路由上hash指向的id所对应的元素。...]不准确,:checked则不会有问题。

6810

JavaScript基础学习--01热身

="javascript:;" 和 href=""以及href="#"的区别:     "#"包含了一个位置信息,默认的是#top 也就是网页的上端,a href ="#" 不会刷新页面,会回到页面顶部...javascript:void(0) 仅仅表示一个死链接     这就是为什么有的时候页面很长浏览链接明明是#可是跳动到了页首,    javascript:void(0) 则不是如此,所以调用脚本的时候最好用...3、使用包含选择器时,会包含祖先元素在内。           ...document.querySelector('css selector');     匹配指定 CSS 选择器的第一个元素     eg. document.querySelector('#div,....class, div');           document.querySelectorAll(css selector');     匹配指定CSS选择器选择的所有元素

84290

前端学习(10)~css学习:选择器:伪类

伪类(伪类选择器) 伪类:同一个标签,根据其不同的种状态,有不同的样式。这就叫做“伪类”。伪类用冒号来表示。 静态伪类和动态伪类 伪类选择器分为两种。 (1)静态伪类:只能用于超链接的样式。...答: a{}和a:link{}的区别: a{}定义的样式针对所有的超链接(包括) a:link{}定义的样式针对所有写了href属性的超链接(不包括) 针对超链接,我们来举个例子: ?...>网站栏目 网站栏目 网站栏目...:focus 是某个标签获得焦点时的样式(比如某个输入框获得焦点) 举例1: /* 伪类选择器:动态伪类 */ /*...让文本获取焦点时: 边框:#FF6F3D这种橙色 文字:绿色 背景色:#6a6a6a这种灰色 */ input:focus{ border:3px

1.1K20

CSS的四种基本选择器和四种高级选择器

(3)选择的所有,不是一个。 2、ID选择器:规定用#来定义(名字自定义) 针对某一个特定的标签来使用,只能使用一次。css中的ID选择器以”#”来定义。...也就是说,js要通过id属性得到标签,所以css层面尽量不用id,要不然js就很别扭。另一层面,我们会认为一个有id的元素,有动态效果。...*/ a:link /*(针对所有利用href属性的)超链接(不包括)点击之前是红色*/{ color:red; } a:visited/*让超链接点击之后是绿色*/{ color:green;...答: a{}和a:link{}的区别: a{}定义的样式针对所有的超链接(包括) a:link{}定义的样式针对所有写了href属性的超链接(不包括) (2)动态伪类: 用于以下几种状态(适用于所有的标签...(长按状态):点击某个标签没有松鼠标时 举个例子: /* 伪类选择器:动态伪类*/ input:focus/*让input文本获取焦点时

5.1K10

超链接的lvha原则

比起伪类的繁荣大家族,伪元素就显得有些伶仃了,到目前(2017/11/4)为止,CSS3规范中仍然只有4个伪元素(CSS2.1就是4个): 首字母:选择元素包含的文本内容的首字母(文本内容包含来自子元素的...,需要插入一个临时标签把目标内容圈起来,再对这个临时标签设置样式 第一种情况通过伪类来处理,用伪类选择器把处于某种状态或具有某些结构特征的现有元素找出来,再应用样式。...CSS3选择器的更多信息,请查看CSS选择器分类总结 三.a标签的6种状态 lvfha伪类给超链接提供了5种状态,第6种是指不是超链接 link伪类存在的意义之一就是把超链接与区分开,link...伪类只匹配具有href的a标签(即超链接),而非 一般桌面浏览器环境下,a标签的6种状态及对应的触发行为分别是: a {/* 处于任意状态的a标签,不论是超链接还是 */} a:link {/*...脚本可以改变元素是否对用户事件做出响应,并且不同的设备和UA指向和激活元素的方式不同 CSS 2.1没有定义如果一个’:active’或者’:hover’元素的父级是不是也处于这种状态 (摘自5.11.3

3.4K30
领券