zoukankan      html  css  js  c++  java
  • DOM(三):querySelector和querySelectorAll

    querySelector()方法
    querySelector()方法接收一个css选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null。

    //取得body元素
    var body = document.querySelector('body');
    //取得id为'myDiv'的元素
    var myDiv = document.querySelector('#myDiv');
    //取得类为'selected'的第一个元素
    var selected = document.querySelector('.selected');
    //取得类为'button'的第一个图像元素
    var img = document.querySelector('img.button');

    querySelectorAll()方法
    querySelectorAll()方法接收的参数与querySelector()方法一样,都是一个css选择服,但返回的是所有匹配的元素而不仅仅是一个元素。
    这个方法返回的是一个NodeList实例

    //取得某<div>中的所有<em>元素(类似于getElementsByTagName('em'))
    var ems = document.getElementById('myDiv').querySelectorAll('em');
    
    //取得类为'selected'的所有元素
    var selecteds = document.querySelectorAll('.selected');
    
    //取得所有<p>元素的所有<strong>元素
    var strongs = document.querySelectorAll('p strong');

    要取得返回的NodeList中的每一个元素,可以使用item()方法,也可以使用方括号语法

    var i,len,strong;
    for(i=0; len=strongs.length; i<len; i++){
        strong = strongs[i]; //或者strongs.item(i)
        strong.className = 'import';
    }
  • 相关阅读:
    oracle之修改/忘记用户密码
    linux 使用错误总结
    oracle数据库之用户管理
    linux命令使用总结
    linux各种压缩包的压缩和解压方法
    logback将日志写入不同文件夹里
    nginx下配置多个web服务
    OKHttp3学习
    linux 发送 post 请求
    maven 项目下 Maven Dependencies 下列表为空
  • 原文地址:https://www.cnblogs.com/wzndkj/p/8757041.html
Copyright © 2011-2022 走看看