querySelector选择器可以通过document和element来调用他们

用来代替getElementById

            var body=document.querySelector("body");//取到body
body.appendChild(document.createTextNode("ffff"));
var div=document.querySelector("#div1");//取到id为div1的第一个元素
var div=document.querySelector(".div1");//取到类为div1的第一个元素
var img=document.querySelector("img.button");//取到类为button的第一个图像元素

querySelectorAll和上面的一样,返回的不仅仅是一个元素,有点像nodelist

            var em=document.getElementById("div1").querySelectorAll("em");//取得div中所有的em元素
var div=document.querySelectorAll(".div")//取得所有的div元素
var strong=document.querySelectorAll("p strong");//取得p元素里面所有的strong元素

querySelector选择器的更多相关文章

  1. DOM querySelector选择器

    原生的强大DOM选择器querySelector 在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并 ...

  2. querySelector() 选择器语法

    选择器 示例 示例说明 CSS .class .intro 选择所有class="intro"的元素 1 #id #firstname 选择所有id="firstname ...

  3. js 的常用选择器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. js api 之 fetch、querySelector、form、atob及btoa

    js api 之 fetch.querySelector.form.atob及btoa 转载请注明出处: https://www.cnblogs.com/funnyzpc/p/11095862.htm ...

  5. DOM的选择器

    这几天学习了DOM的选择器,现在来进行一下总结分类. 1.DOM里的元素节点选择器 元素节点选择器包括id,class,name,tagname,高级,关系. 1.1 id选择器 id:返回的是单个对 ...

  6. 关于DOM的一些总结(未完待续......)

    DOM 实例1:购物车实例(数量,小计和总计的变化) 这里主要是如何获取页面元素的节点: document.getElementById("...") cocument.query ...

  7. DOM查找元素

    1. 查找元素5种: 1. 按id查找1个元素对象: var elem=document.getElementById("id值"); 何时使用:1. 元素必须有id 2. 精确查 ...

  8. 11-17的学习总结(DOMfirstday)

    HTML: 超文本标记语言,专门定义网页内容的语言 XHTML: 严格的HTML标准 DHTML: 所有实现网页动态效果技术的统称 XML: 可扩展的标记语言,标签都是自定义的 XML语法和HTML语 ...

  9. DOM&BOM笔记

    day01正课:1. DOM概述2. ***DOM树3. *查找 1. DOM概述: DHTML:动态网页技术的统称 DHTML=HTML+CSS+JS 鄙视题: HTML XHTML DHTML X ...

随机推荐

  1. out.print和out.write方法

    <%@ page language="java" import="java.util.*" %> <%@ page pageEncoding= ...

  2. HID燈是什么及其工作原理

    HID為HighIntensityDischarge的縮寫,即高壓氣體放電燈,它發光的原理是將12V電壓增壓至23000V的超高電壓,激穿填充在石英管的氙氣,使它發光.然后再將電壓轉成85V左右,穩定 ...

  3. 移動電源ic的概述

    移動電源ic壹種集供電和充電功能於壹體的便攜式充電器,可以給手機等數碼設備隨時隨地充電或待機供電.壹般由鋰電芯或者幹電池作為儲電單元.區別於產品內部配置的電池,也叫外掛電池.壹般配備多種電源轉接頭, ...

  4. perl 正则前导字符

    uat-prx02:/root# cat a1.pl my $str="123"; if ($str =~/(abc)*/){print "111111111\n&quo ...

  5. Perl数据库DBI接口简介【转载】

    本文转载自:http://blog.csdn.net/like_zhz/article/details/5441946 ######################################## ...

  6. C#实现数据结构——线性表(上)

    什么是线性表 数据结构中最常用也最简单的应该就是线性表,它是一种线性结构(废话,不是线性结构怎么会叫线性表?当然不是废话,古人公孙龙就说白马非马,现代生物学家也说鲸鱼不是鱼). 那什么是线性结构? 按 ...

  7. Flume源码-LoggerSink

    package org.apache.flume.sink; import com.google.common.base.Strings; import org.apache.flume.Channe ...

  8. jQuery Ajax全解析

    jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 我们先来看一些简单的方法,这些方法都是对jQuery.ajax( ...

  9. tcp/ip状态图

    开启一个连接需要三次握手,终止一个tcp连接需要4次握手,对应的客户端和服务器连接状态也随之而改变. 1.服务器出现大量的CLOSE_WAIT? 通常,CLOSE_WAIT 状态在服务器停留时间很短, ...

  10. nexus私服安装

    一.搭建nexus私服.当前服务器版本是jdk1.8    . nexus安装包下载:http://www.sonatype.org/nexus/archived 先是下载目前最新的版本 Nexus ...