js笔记

2 篇文章 0 订阅
2 篇文章 0 订阅

Document.querySelector()函数:
语法:

element = document.querySelector(selectors); 

返回第一个匹配selectors的element,这种选择是基于class的,怎么理解呢?并不是自己定义的名称,而是html默认存在的名称,比如html,body, h1, h2, h3 ,button等

var el = document.querySelector(".myclass");

注意
如果没有找到匹配元素,则返回 null,否则找到多个匹配元素,则返回第一个匹配到的元素。

如果选择器是一个 ID,并且这个 ID 在文档中错误地使用了多次,那么返回第一个匹配该 ID 的元素。

如果指定的选择器不合法,则抛出 SYNTAX_ERR 异常。

querySelector()在 Selectors API 中引入。

传递给 querySelector 的字符串参数必须符合 CSS 语法。
如果要匹配的ID或选择器不符合 CSS 语法(比如不恰当地使用了冒号或者空格),你必须用反斜杠将这些字符转义。由于 JavaScript 中,反斜杠是转义字符,所以当你输入一个文本串时,你必须将它转义两次(一次是为 JavaScript 字符串转义,另一次是为 querySelector 转义):

<div id="foo\bar"></div>
<div id="foo:bar"></div>

<script>
  console.log('#foo\bar')               // "#fooar"
  document.querySelector('#foo\bar')    // 不匹配任何元素

  console.log('#foo\\bar')              // "#foo\bar"
  console.log('#foo\\\\bar')            // "#foo\\bar"
  document.querySelector('#foo\\\\bar') // 匹配第一个div

  document.querySelector('#foo:bar')    // 不匹配任何元素
  document.querySelector('#foo\\:bar')  // 匹配第二个div
</script>

也可以使用ID来获取Dom元素:

 document.getElementByID("some id");
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值