原生js
var a = document.getElementById("dom");
del_space(a); //清理空格
var b = a.childNodes; //获取a的全部子节点;
var c = a.parentNode; //获取a的父节点;
var d = a.nextSibling; //获取a的下一个兄弟节点
var e = a.previousSibling; //获取a的上一个兄弟节点
var f = a.firstChild; //获取a的第一个子节点
var g = a.lastChild; //获取a的最后一个子节点 使用jQuery
jQuery.parent(expr) //找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class")

jQuery.parents(expr) //类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素

jQuery.children(expr) //返回所有子节点,这个方法只会返回直接的孩子节点,不会返回所有的子孙节点

jQuery.contents() //返回下面的所有内容,包括节点和文本。这个方法和children()的区别就在于,包括空白文本,也会被作为一个jQuery对象返回,children()则只会返回节点

jQuery.prev() //返回上一个兄弟节点,不是所有的兄弟节点

jQuery.prevAll() //返回所有之前的兄弟节点

jQuery.next() //返回下一个兄弟节点,不是所有的兄弟节点

jQuery.nextAll() //返回所有之后的兄弟节点

jQuery.siblings() //返回兄弟姐妹节点,不分前后

jQuery.find(expr)  //跟jQuery.filter(expr)完全不一样。jQuery.filter()是从初始的jQuery对象集合中筛选出一部分,而jQuery.find()的返回结果,不会有初始集合中的内容,比如$("p"),find("span"),是从p元素开始找,等同于$("p span").

转自https://lvwenhan.com/many/373.html

js获取dom元素的子元素,父元素,兄弟元素小记的更多相关文章

  1. JS1 js获取dom元素方法

     js获取dom元素方法  1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId")         其 ...

  2. 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题

    1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...

  3. JS获取DOM元素的八种方法

    JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...

  4. 原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离

    关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position() ...

  5. line-height系列(二)——对行内元素(文字、图片、兄弟元素)、块级元素设置line-height后的表现

    >原创文章,转载请注明来源! 二.对行内元素(文字.图片.兄弟元素).块级元素设置line-height后的表现 对块级元素无效,对行内元素有效.可继承给行内元素. 文字的line-height ...

  6. Vue-组件传值:子传父和兄弟组件间常见的传值方式

    前言 上篇介绍了我对vue组件化的理解和父组件对子组件传值的方式,这篇介绍下常见的子传父和兄弟组件间的传值方式 目录 子组件向父组件传值 任意组件间的传值方式 正文 子组件向父组件传值 关键知识点:$ ...

  7. JS获取DOM元素

    1.childNodes:获取节点,不同浏览器表现不同: IE:只获取元素节点: 非IE:获取元素节点与文本节点: 解决方案:if(childNode.nodeName=="#text&qu ...

  8. js 获取DOM的style属性

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. js获取dom对象style样式的值

    js获取到的dom对象的style通常是没有值得,因为我们都写在外部文件中,从慕课网上见到讲师封装的一个方法,挺不错.特此记录下来. function getStyle(obj,attr){ if(o ...

随机推荐

  1. git中常见操作指令

    从git上拉下一个项目: 1.git clone 项目链接                  2. git checkout development (切换到development分支)       ...

  2. vuex(数据商店实现思想)day06

    安装创建Vue项目

  3. maven(17)-自动发布到远程linux服务器

     发布方式 手工方式:需要做一系列的工作,包括打WAR包,上传到服务器,重启服务器,删除旧文件等 自动方式:一条命令完成以上所有过程 服务器环境 centos7.3和tomcat8,关于cento ...

  4. Python问题1:IndentationError:expected an indented block

    Python语言是一款对缩进非常敏感的语言,给很多初学者带来了困惑,即便是很有经验的python程序员,也可能陷入陷阱当中.最常见的情况是tab和空格的混用会导致错误,或者缩进不对,而这是用肉眼无法分 ...

  5. Python 爬虫练手项目—酒店信息爬取

    from bs4 import BeautifulSoup import requests import time import re url = 'http://search.qyer.com/ho ...

  6. Redis集群部署-windows

    Redis集群部署-windows 前言 为了能体验一下部署Redis集群是一种怎么样的体验,所一边做一边写了这篇记录. 1.准备 从这里下载windows服务端 https://github.com ...

  7. July 30th 2017 Week 31st Sunday

    Eternity is not a distance, but a decision. 永恒不是一段距离,而是一种决定. What can be called as eternity? Wealth ...

  8. 利用describe( )中的count来检查数据是否缺省

    #-*- coding: utf-8 -*- #在python的pandas库中,只需要读入数据,然后使用describe()函数就可以查看数据的基本情况 import pandas as pd in ...

  9. python取当前时间前后一定间隔的时间点

    当前时间 datetime.datetime.now() 时间间隔 datetime.timedelta(参数=数值) #参数:weeks,days,hours,minutes,seconds,mic ...

  10. 前端——实用UI组件库

    Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https://valor-software.com/ngx-bootstrap/#/ github: h ...