精华内容
下载资源
问答
  • document.querySelector()方法

    万次阅读 多人点赞 2018-03-22 20:17:13
    HTML 的DOM querySelector()方法可以不需要额外的jQuery等支持,也可以方便的获取DOM元素,语法跟jQuery类似。 获取文档中id=”container”的元素 <!DOCTYPE html> <html lang="en&...

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程

    HTML 的DOM querySelector()方法可以不需要额外的jQuery等支持,也可以方便的获取DOM元素,语法跟jQuery类似。

    获取文档中id="container"的元素

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title></title>
    </head>
    <body>
    	<div id="contatiner">huang</div>
    	<script type="text/javascript">
    		var destination = document.querySelector("#contatiner");
    		console.log(destination);
    	</script>
    </body>
    </html>
    

    这里写图片描述

    注意: querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代。

    参数类型可以为如下:

    指定一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。

    对于多个选择器,使用逗号隔开,返回一个匹配的元素。

    获取第一个p元素

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title></title>
    </head>
    <body>
    	<p>张露露,我爱你</p>
    	<p>黄宝康,我也爱你</p>
    
    	<script type="text/javascript">
    	var node = document.querySelector("p");
    		console.log(node);
    	</script>
    </body>
    </html>
    

    这里写图片描述

    获取文档中的第一个class="lover"的元素

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title></title>
    </head>
    <body>
    	<span class="lover">张露露</span>
    	<span class="lover">黄宝康</span>
    
    	<script type="text/javascript">
    	var node = document.querySelector(".lover");
    		console.log(node);
    	</script>
    </body>
    </html>
    

    这里写图片描述

    获取class=“lover” 的第一个p元素

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title></title>
    </head>
    <body>
    	<span class="lover">张露露</span>
    	<p class="lover">黄宝康</p>
    
    	<script type="text/javascript">
    	var node = document.querySelector("p.lover");
    		console.log(node);
    	</script>
    </body>
    </html>
    

    这里写图片描述

    获取第一个带target属性的a元素

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title></title>
    </head>
    <body>
    	<a href="http://www.baidu.com">百度一下</a>
    	<a href="https://www.taobao.com" target="_blank">淘宝一下</a>
    
    	<script type="text/javascript">
    	var node = document.querySelector("a[target]");
    		console.log(node);
    	</script>
    </body>
    </html>
    

    这里写图片描述

    多个选择器的使用方法

    以下代码将为文档的第一个 <h2> 元素添加背景颜色:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title></title>
    </head>
    <body>
    	<h2>二级标题</h2>
    	<h3>三级标题</h3>
    	<script type="text/javascript">
    		document.querySelector("h2,h3").style.backgroundColor = "blue";
    	</script>
    </body>
    </html>
    

    这里写图片描述

    但是,如果文档中 <h3> 元素位于 <h2> 元素之前,<h3> 元素将会被设置指定的背景颜色。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title></title>
    </head>
    <body>
    	<h3>三级标题</h3>
    	<h2>二级标题</h2>
    	
    	<script type="text/javascript">
    		document.querySelector("h2,h3").style.backgroundColor = "blue";
    	</script>
    </body>
    </html>
    

    这里写图片描述

    总结,多元素选择时,哪个先匹配就是谁咯,只有一个被选中。

    展开全文
  • document.querySelector

    2020-11-08 17:43:22
    document.querySelector 这个document对象的querySelector是HTML5API新定义的方法 如果是id选择器传放一个参数“#id” id选择器返回这个节点元素对象 如果是class的选择器则传入一个".class" class选择器返回...
    1. document.querySelector 这个document对象的querySelector是HTML5API新定义的方法
    • 如果是id选择器传放一个参数“#id”
    • id选择器返回这个节点元素对象
    • 如果是class的选择器则传入一个".class"
    • class选择器返回document节点或id节点元素对象中的第一个元素
    1. 获取文档中id=”container”的元素
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="contatiner">huang</div>
        <script type="text/javascript">
            var destination = document.querySelector("#contatiner");
            console.log(destination);
        </script>
    </body>
    </html>
    

    在这里插入图片描述

    展开全文
  • <p><code>2020-05-20 16:13:47 ERROR (MainThread) [frontend.js.latest.202005190] http://hassnuc.local:8123/hacsfiles/custom-header/custom-header.js:596:28526 TypeError: document.querySelector(...)....
  • document.querySelector

    不久前,我发现了document.querySelector JS选择器,语法类似JQuery。

    通过元素id获取元素

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<div id="box"></div>
    	</body>
    	<script type="text/javascript">
    		console.log(document.querySelector("#box"));
    	</script>
    </html>
    

    通过元素class,标签名获取元素

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<div id="box" class="container"></div>
    	</body>
    	<script type="text/javascript">
    		console.log(document.querySelector(".container"));
    		console.log(document.querySelector("div"));
    	</script>
    </html>
    

    注意:

    document.querySelector用于获取单个元素,当页面中出现多个相同class标签(或者多个相同标签(比如多个div))时,只匹配第一个元素。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<div class="box">第一个div</div>
    		<div class="box">第二个div</div>
    	</body>
    	<script type="text/javascript">
    		console.log(document.querySelector(".box"))
    		console.log(document.querySelector("div"))
    	</script>
    </html>
    

     

     document.querySelectorAll

    那我们想获取多个元素就没办法了吗?有的。document.querySelectorAll就可以获取多个元素,它的结果跟document.getElementsByClassName()一样是一个集合。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<div class="box">第一个div</div>
    		<div class="box">第二个div</div>
    	</body>
    	<script type="text/javascript">
    		console.log(document.querySelectorAll(".box"))
    		console.log(document.querySelectorAll("div"))
    	</script>
    </html>
    

    写到这就结束啦,写的不好,多多指教。

    展开全文
  • MIP.sandbox.document.querySelector('body').ownerDocument.defaultView 指向 window <p><strong>描述一下你理想中的解决方案 MIP.sandbox.document.querySelector('body').ownerDocument....
  • nimquery:Nim库,用于使用CSS选择器查询HTML(例如JavaScripts document.querySelector
  • <p>selenium.common.exceptions.JavascriptException: Message: TypeError: document.querySelector(...)._reactRootContainer.current is undefined <p>thanks,</p><p>该提问来源于开源项目:mukulhase/...
  • document.querySelector('TagName') // 以标签名返回一个元素 document.querySelector('#id') // 以id名返回一个元素 document.querySelector('.className') // 以classs名返回一个元素 document.querySelector('....

    一、作用:可通过多种方法获取html元素
    语法:参数为字符串,要带上css选择器标识符

    document.querySelector('TagName')   //  以标签名返回一个元素
    document.querySelector('#id')       //  以id名返回一个元素
    document.querySelector('.className')      //  以classs名返回一个元素
    document.querySelector('.className div')  //  最后这种是以css选择器的方式获取一个元素
    

    二、特点:仅返回第一个符合条件的元素

    var li = document.querySelector('li');   //  仅返回整个文档中的第一个li元素
    

    三、返回多个符合条件的元素数组

    document.querySelectorAll()
    
    展开全文
  • docment.querySelector()的使用方法 官方解释:文档对象模型Document引用的querySelector()方法返回文档中与指定选择器或选择器组匹配的第一个 HTMLElement对象。...var checkBtn = document.querySelector(’
  • document.querySelector查询的是原始html网页中的元素 如果通过js代码添加了新的元素,通过document.querySelector是查询不到的,而document.getElementByClassName则可以查到 ...
  • 当把放在head里或者放在需要获取的元素之前的时候,document.querySelectorAll/document.querySelector选择器会返回null,必须放在dom加载之后,document.getElementBy*则不存在这个问题
  • document.querySelector()选取指定元素的用法,如下:
  • Eventually I pinpointed the issue to a line of code where I was using <code>document.querySelector</code> to find an element on the page, but using an invalid selector. It looked something like this:...
  • document.querySelector(),document.querySelectorAll() 除了使用DOM的对象结点之间的关系选择一个元素结点外,还可以通过CSS的选择器选择元素结点。 document对象中,有两个方法querySelector()和querySelectorAll...
  • document.querySelector() 返回文档中陪陪指定的选择器的第一个元素(使用深度优先先序遍历文档的节点|并且通过文档标记中的第一个元素,并按照子节点数量的顺序迭代顺序节点)。  element = document....
  • document.querySelector()与document.querySelectorAll() CreationTime--2018年7月1日10点49分 Author:Marydon 1.说明  他俩是H5提供的选择器,都可以直接获取页面元素并进行操作。 2.区别  用法与jQuery里...
  • content: document.querySelector('#id') }, { content: document.querySelector('#id1') }, { content: document.querySelector('#id2') }, { content: document.querySelector...
  • 用typecho搭建了一个博客,创建了一个微语页面分享一些平常看到的有用的信息... if(document.querySelector(pageId)){ var pageAnchors = document.querySelector(pageId).getElementsByTagName('a'); for (var i=0;
  • document.querySelector.bind("document") Making a short alias for document.querySelectorAll I'm going to be running document.querySelectorAll() a whole lot, and would like a...
  • var querySelector = function(selector) { //TODO 先简单兼容,后续继续扩展; var element = null;... if(document.querySelector) { element = document.querySelector(selector); } else { var...
  • querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。而querySelectorAll() 则会返回匹配到的所有元素。 所以CSS 选择器支持的语法,...document.querySelector("p"); 实例:获取文档中 id="dem...
  • 除开特殊符号,第一个字符必须是字母 可以改成 document.querySelector(’#aa123’) 或者 document.querySelector(’[id=123]’)
  • document.querySelector后面不可以接纯数字的id名,是在某个dom下寻找相应的选择器的元素: <div id='111'></div> <script> var div=document.getElementById('111'); var div=document....
  • HTML5向Web API新引入了 document.querySelector()和document.querySelectorAll()两个方法,都可以接收三种类型的参数:id(#),class(,),标签,就像jquery选择器,参数需要是合法的CSS选择语法。 用起来更方便的从...
  • zepto中的$(".111")出错...zepto用document.querySelector实现,jQuery用document.getElementById实现。 二者区别:http://www.zhihu.com/question/24702250 1. W3C 标准querySelectorAll 属于 W3C 中的 Select...
  • vue中document.querySelector("id")第一次取值为null 加defer="true"也不行 ``` ``` 通过id获取节点 但是第一次取不到第二次可以

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,115
精华内容 2,846
关键字:

document.queryselector