精华内容
下载资源
问答
  • React DOM document.querySelector的替代
    2022-04-28 10:35:09

    React DOM document.querySelector的替代

    使用 ref 进行替代,ref 能将节点暴露出来,让你在组件中任何位置使用.但ref应该避免滥用,详情请参考 react 文档

    使用方式

    const qrimgRef = React.useRef();
    //需要使用时可通过 current 访问 src 或其他属性.
    qrimgRef.current.src = qrimg;
    //在需要获取的节点传入对应的 ref
    <QrImg ref={qrimgRef}></QrImg>
    
    更多相关内容
  • 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>
    

    在这里插入图片描述

    展开全文
  • <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="myId"></div> <div class="myClass"></div> </body> <script type="text/javascript"> var dom = document.querySelector('...
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<div id="myId"></div>
    		<div class="myClass"></div>
    	</body>
    	<script type="text/javascript">
    		var dom = document.querySelector('#myId')
    		console.log(dom)
    		var dom2 = document.querySelector('.myClass')
    		console.log(dom2)
    	</script>
    </html>
    

    在这里插入图片描述

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

    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<div id="myId"></div>
    		<div id="myId"></div>
    	</body>
    	<script type="text/javascript">
    		var dom = document.querySelector('#myId')
    		console.log(dom)
    	</script>
    </html>
    

    在这里插入图片描述

    <script type="text/javascript">
    		var dom = document.querySelectorAll('#myId')
    		console.log(dom)
    	</script>
    

    在这里插入图片描述

    展开全文
  • 1. var div = document.querySelector("#box") var div = document.getElementByID("box") var div = document.getElementByClass("box")

    1. 原生JS获取元素

    1.1 通过标签、类名、属性获取

            // 1. 获取类名是box的div的集合
            var box = document.getElementsByClassName('box');
            // 1.1 返回的是伪数组,具有length属性,可以用for循环进行遍历;但是没有pop和push方法
            for (var i = 0; i < box.length; i++) {
                console.log(1);
            }
            console.log(box);
            // 2. 获取的是id名是blue的那一个元素
            var blue = document.getElementById('blue');
            console.log(blue);
            // 3. 获取span标签的集合 伪数组
            var span = document.getElementsByTagName('span');
            console.log(span);

    1.2 H5新增的方法

            // 4. H5获取指定选择器的第一个元素的方式
    
            // 4.1 获取标签em
            var em = document.querySelector('em');
            console.log(em);
    
            // 4.2 获取类名为box的盒子
            var box2 = document.querySelector('.box');
            console.log(box2);
    
            // 4.3 获取id名为blue的盒子
            var blue = document.querySelector('#blue');
            console.log(blue);
    
            // 5. 获取该指定选择器所有属性的集合 // 伪数组
            var box1 = document.querySelectorAll('.box');
            console.log(box1);

    1.3 获取body和html元素

            var bodyEle = document.body;
            console.log(bodyEle);
    
            // 获取html元素
            var htmlEle = document.documentElement;
            console.log(htmlEle);

    1.4 获取父元素

    1.5 获取子元素

    1.5.1 children

    非W3C标准,但是使用最多被广大浏览器默认接受没有兼容性问题

        <div id="test">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
        </div>
        <script>
            var test = document.querySelector("#test");
            console.log(test.children); // 输出4个span
            console.log(test.children[0]); // 第一个span 
        </script>

    children可以进行遍历

    for (var i = 0; i < test.children.length; i++) {
                console.log(1);
    }

    1.5.2 childNodes

    同时输出换行和元素

        <div id="test">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
        </div>
        <script>
            var test = document.querySelector('#test');
            console.log(test.childNodes); // 有9个子元素
            // 节点的组成包括 nodeType nodeName nodeValue
            // nodeType是1,表示该节点是元素; 是2,表示该节点是属性;是3表示该节点是文本
            console.log(test.childNodes[0].nodeType); // 3 测试输出表示该元素是文本 #test
            console.log(test.childNodes[1].nodeType); // 1 测试输出表示该元素是元素
    
        </script>

    备注:

    • 节点的组成包括 nodeType nodeName nodeValue
    •  nodeType是1,表示该节点是元素; 是2,表示该节点是属性;是3表示该节点是文本

    1.5.3 firstChild【少用】【没有兼容性问题】

            console.log(test.firstChild);

    会输出第一个子节点,不管是文本(换行)还是元素

    1.5.4 firstElementChild &lastElementChild【少用】【有兼容性问题】【ie9及以上才支持】

    console.log(test.firstElementChild); // 输出第一个子元素
    console.log(test.lastElementChild); // 输出第二个子元素

    1.6 获取兄弟节点

    2. jQuery获取元素的方法

    2.1 通过标签、类、id获取元素

            // 1. 通过类名获取元素 
            var box = $(".box");
            console.log(box);
    
            // 2. 通过id名获取元素
            var blue = $("#blue");
            console.log(blue);
    
            // 3. 通过标签名获取元素
            var div = $("div");
            console.log(div);
    
            // 以上三种方法获取过来的都是伪数组

    2.2 获取body和html元素

    console.log($("body"));
    console.log($("html"));

    2.3 选择器的获取补充

            // 4. 通配符选择器
            $("*").css("color", "red");
            // 5. 后代选择器
            console.log($("#blue h1"));
            // 6. 交集选择器
            console.log($("div.red"));
            $("div#blue h1").css("color", "pink");
            // 7. 并集选择器
            $("div,span,header").css("fontSize", 30);

    2.4 后代和子代选择器

            // 1. 后代选择器   所有亲儿子和孙子都选择
            $("#blue em").css("color", "pink");
            // 2. 子代选择器   选的是亲儿子
            $("#blue>em").css("fontSize", 30);

    2.5 筛选 结构选择器

            // 1. 筛选第一个元素
            $("ul li:first").css("font-weight", "700");
            // 2. 筛选第二个元素
            $("ul li:last").css("font-style", "italic");
            // 3. 筛选指定顺序的元素
            $("ul li:eq(2)").css("color", "red");
            // 4. 筛选偶数小li
            $("ul li:odd").css("backgroundColor", "grey");
            // 5. 筛选奇数小li
            $("ul li:even").css("textDecoration", "underline");

    2.6 筛选父子兄弟选择器

            // 1. 筛选父亲元素
            console.log($("#good").parent());
            // 2. 筛选父亲的父亲
            console.log($("#good").parent().parent());
            // 3. 筛选儿子
            console.log($("#blue").children("em"));
            // 4. 筛选儿子--相当于后代选择器
            console.log($("#blue").find("em"));
            // 5. 筛选兄弟 // 不包括自己本身
            console.log($("ul").siblings("#blue"));

    结尾:

    学习id: 201903090124-18

    现在是大三学生,学习到了前后端交互的git阶段,如有不对的地方,欢迎指正,一起努力呀。如有转载请注明出处。

    展开全文
  • document.querySelector.bind和document.querySelectorAll.bind "box"> tagname 111 class="surfaces">这是clase 222 class="surfaces">这是class 333 class="surfaces">这是class 444 ------------------------...
  • 第二种方法是使用document.querySelector(“获取dom元素”) <div class="mask"> 回到顶部span> div> <script> export default { data() { return { ele:'', huiShow:false, //控制回到顶部按钮的显示隐藏 默认为...
  • 一、分析 二、原因 三、解决 四、代码 一、... document.querySelector('#1').innerText = "按钮1-变"; //报错:Uncaught DOMException: Document.querySelector: '#1' is not a valid selector }, 1 * 1000); script>
  • 获取元素的方式1.如何获取dom中的元素?...var er=document.querySelector(".one");// class标签 格式:.class 也可以: var div=document.querySelector(“div”);// 直接获取html元素写 可以用单引号吗 var er=doc
  • document.querySelector) { document.querySelector = function (selectors) { var elements = document.querySelectorAll(selectors); return (elements.length) ? elements[0] : null; }; } // 用于在IE6和IE7...
  • 相关代码如下,也尝试过把position调为absolute(不知道是不是这个原因),getElementById().style.left也尝试过,用alert无法读出数据,offLeft也读取不出来 代码: 无标题文档 提示 × 你好 ps:有人可以指点下...
  • 之所以会发这一篇,是因为...document.querySelector("video").playbackRate="16" 据说这个办法可以修改倍速。 报错 我用了之后报错了,原因是啥?别人打开源码,里面由video的标签,我没有。所以肯定报错。 别人的:
  • document.querySelector()用法

    千次阅读 多人点赞 2021-02-23 09:29:32
    document.querySelector
  • 获取事件源和要操作的元素:启用和禁用按钮,一堆input标签 let start = document.querySelector('.start') let stop = document.querySelector('.stop') let inputs = document.querySelectorAll('input') // 2....
  • Document li+1 li+2 li+3 li+4 li+5 设置 等标签时使用document.querySelectorAll()方法可以将所有li的对象返回 运行结果如下 使用document.querySelector()只可以返回所遇到的第一个符合条件的标签对象 Document li...
  • 而菜鸟感觉自己的天赋可能就在于,学习完之后,可以马上想一个运用到学习完了的知识点的项目φ(゜▽゜*)♪ 文章目录 概要 第一部分(左侧下拉) 代码解析 vertical-align document.querySelector js改变css样式的5种...
  • document.querySelector('TagName') // 以标签名返回一个元素 document.querySelector('#id') // 以id名返回一个元素 document.querySelector('.className') // 以classs名返回一个元素 document.querySelector('....
  • document.querySelector()

    千次阅读 2019-07-15 12:40:10
    HTML 的DOM querySelector()方法可以不需要额外的jQuery等支持,也可以方便的获取DOM元素,语法跟jQuery类似。 获取文档中id=”container”的元素 <!DOCTYPE html> <html lang="en"> <head> <...
  • cons domlist = document.querySelector(".header-left-Menu-style").children; 这里的 domList 就是 HTMLCollection 对象,是个类数组,不能使用map等方法;最后使用 for 循环完成的遍历;如下所示 二、场景 自己...
  • document.querySelector()选择器

    千次阅读 2021-02-18 10:35:52
    官方解释:文档对象模型Document引用的querySelector()方法返回文档中与指定选择器或选择器组匹配的第一个 HTMLElement对象。 如果找不到匹配项,则返回null 使用方法: 1、id body中的html代码: <el-button id=...
  • document.querySelector(),document.querySelectorAll() 除了使用DOM的对象结点之间的关系选择一个元素结点外,还可以通过CSS的选择器选择元素结点。 document对象中,有两个方法querySelector()和querySelectorAll...
  • 我不知道如何将以下条件反应链接到passid表单输入id:我不知道将document.querySelector放在何处,以便索引的contion-reactions将与之关联.这是代码:Password - formPasswordfunction passType() {var password = [...
  • 选择器 document.querySelector()

    千次阅读 2020-01-03 21:34:21
    querySelector 对应的方法为: document.getElementById(""),根据id获取元素,只能获取唯一一个,只能使用document获取。 document.getElementById(""); //根据id获取元素,只能获取唯一一个 //只能使用...
  • querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。而querySelectorAll() 则会返回匹配到的所有元素。 所以CSS 选择器支持的语法,...document.querySelector("p"); 实例:获取文档中 id="dem...
  • 用typecho搭建了一个博客,创建了一个微语页面分享一些平常看到的有用的信息... if(document.querySelector(pageId)){ var pageAnchors = document.querySelector(pageId).getElementsByTagName('a'); for (var i=0;
  • html的document.querySelector()使用

    千次阅读 2019-07-15 00:46:45
    HTML 的DOM querySelector()方法可以不需要额外的jQuery等支持,也可以方便的获取DOM元素,语法跟jQuery类似。 获取文档中id=”container”的元素 <!DOCTYPE html> <html lang="en"> <head> <...
  • document.querySelectorAll('标签名') document.getElementByTagName('标签名') 都能获取此标签名的所有元素,但是区别在于后者实时更新,插入更新长度,前者不更新
  • querySelector和querySelectorAll是W3C提供的 新的查询接口,其主要特点如下: 1、querySelector只返回匹配的第一个元素...3、返回的结果是静态的,之后对document结构的改变不会影响到之前取到的结果。 这两个方法...
  • [js] 写一个 document.querySelector 的逆方法 document.queryNode = function(node){ if(node.id){ return '#'+ node.id; } if(node.className){ return '.'+ node.id; } return node.nodeName; }; 个人...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 118,870
精华内容 47,548
关键字:

document.queryselector

友情链接: Stablizer.zip