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';
    }
  • 相关阅读:
    h5 input调起摄像头、摄像机、录音机
    基数排序
    快速排序 && 希尔排序 && 插入排序
    堆排序
    归并排序(Merge sort)
    动态规划:背包问题
    Chap5: question: 29
    排列 && 组合
    Chap4: question: 19
    Chap3: question: 11
  • 原文地址:https://www.cnblogs.com/wzndkj/p/8757041.html
Copyright © 2011-2022 走看看