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. -_-#【Angular】定义服务

    AngularJS学习笔记 <!DOCTYPE html> <html ng-app="Demo"> <head> <meta chars ...

  2. List的数据结构

    从这张图片说起:TreeList的实现结构: 首先是构建函数 TreeList(Collection coll),调用增加函数: public void add(int index, Object o ...

  3. 使用libevent进行多线程socket编程demo

    最近要对一个用libevent写的C/C++项目进行修改,要改成多线程的,故做了一些学习和研究. libevent是一个用C语言写的开源的一个库.它对socket编程里的epoll/select等功能 ...

  4. [Design Pattern] Proxy Pattern 简单案例

    Proxy Pattern, 即代理模式,用一个类代表另一个类的功能,用于隐藏.解耦真正提供功能的类,属于结构类的设计模式. 下面是 代理模式的一个简单案例. Image 定义接口,RealImage ...

  5. UINavigationController 导航控制器 ,根据文档写的一些东西

    今天讲了导航控制器UINavigationController 和标签栏视图控制器UITabBarController 先来说一说导航视图控制器  UINavigationController 导航控 ...

  6. 家族企业的常青之道——leo鉴书68

    <Leo鉴书(第1辑)>已登陆百度阅读,今后还将不断更新.免费下载地址:http://t.cn/RvawZEx 企业怎样长久传承.怎样长期有效操持活力.是多元化经营还是集中精力打一点,这些 ...

  7. android ListView和GridView拖拽移位具体实现及拓展

    关于ListView拖拽移动位置,想必大家并不陌生,比较不错的软件都用到如此功能了.如:搜狐,网易,百度等,但是相比来说还是百度的用户体验较好,不偏心了,下面看几个示例:              首 ...

  8. Qt中使用cout, cin, cerr

      在Qt中,用的最多的是GUI页面,但GUI比较慢,有些小的试验不妨先用console,当然在Qt里面可以直接使用cout, cin这些. 不过可能不会兼容Qt自带的一些类型,比如QByteArra ...

  9. 如何为Myeclipse手工添加dtd支持

    一.引言 在MyEclipse中开发三大框架的项目时候经常会写一些配置的xml文件,例如:Struts2的struts.xml和Hibernate的hibernate.cfg.xml.Spring的a ...

  10. StarUML中时序图添加小人

    转载于 http://blog.csdn.net/longyuhome/article/details/9011629 在看时序图的例子的时候,发现有些的时序图上有小人的图标,可是一些UML工具却没有 ...