首页 > 技术文章 > js-常用DOM和节点选择器大全

piaoyi1997 2020-05-12 13:50 原文

选择器分为直接选择器和关系选择器,下面将介绍具体有哪些选择器:

  • 直接选择器
    - id选择器:document.getElementById("id名")
    - class选择器:document.getElementsByClassName("class名")
    - tag选择器:document.getElementsByTagName("tag名")
    - name选择器:document.getElementsByName("name名")
    - ES5新增选择器:
    - querySelector选择器:document.querySelector("css选择器")
    - querySelectorAll选择器:document.querySelectorAll("css选择器")
    - 总结:
    - 返回单个元素:
    - id,querySelector
    - 返回数组:
    - class,tag,name,querySelectorAll

  • 关系选择器
    - childNodes: 获取某节点下所有子一节点
    - children: 获取某一节点下所有的子一级元素节点
    - firstChild: 获取某一节点下子一级的第一个节点
    - lastChild: 获取某一节点下子一级的最后一个节点
    - firstElementChild: 获取某一节点下子一级的第一个元素节点
    - lastElementChild: 获取某一节点下子一级的最后一个元素节点
    - nextSibling: 获取某一节点的下一个兄弟节点
    - previousSibling: 获取某一节点的上一个兄弟节点
    - nextElementSibling: 获取某一节点的下一个兄弟元素节点
    - previousElementSibling: 获取某一节点的上一个兄弟元素节点
    - parentNode: 获取某一节点的父节点
    - attributes: 获取某一节点的所有属性节点

推荐阅读