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';
    }
  • 相关阅读:
    熟悉常用的Linux操作
    Python基础之五星红旗
    类似于铁道部12306的城市选择框的实现
    使用Django操作数据库入门
    进程和线程
    线程、进程、携程理解
    CentOS6.8部署Python3.6.8的Django项目
    爬取妹子图片
    聚类算法之DBSCAN
    机器学习算法优缺点总结
  • 原文地址:https://www.cnblogs.com/wzndkj/p/8757041.html
Copyright © 2011-2022 走看看