querySelector获得兄弟DOM元素 父级DOM元素 子级DOM元素

2020-05-07 13:28:23

参考地址 js定位大全获取节点的兄弟,父级,子级元素含robot实例

 一、js定位兄弟,父级,子级元素

<div id="test">

   <div></div>

   <div></div>

 </div>

 所有DOM方法

var el = document.getElementById('xxx');
var el = document.getElementByName('xxx');
var els = document.getElementsBy('highlight'); 

var els = document.getElementsBy('td');
tips:


=======================附注=========================
解释:getElementsByClassName()是HTML5的DOM API。
:document.getElementsByClassName("wrapper"); //取得DOM中所有class = "wrapper"的元素

解释:querySelector()和querySelectorAll()
是新标准的Selectors API(选择符API)。IE8+、FF3.5+、Safari 3.1+、Chrome、Opera 10+支持

  querySelector()接受一个作为参数,然后返回DOM中匹配的第一个元素
  querySelectorAll()接受一个作为参数,然后返回DOM中匹配的元素的集合数组

 原生的JS获取ID为test的元素下的子元素。可以用:

var a = docuemnt.getElementById("test").getElementsByTagName("div");  这样是没有问题的

 此时a.length=2;

 

复制代码

<script>   function dom() {

              var s= document.getElementById("test"); 

              del_ff(s);    //清理空格 

              var chils= s.childNodes;  //得到s的全部子节点 

              var par=s.parentNode;   //得到s的父节点 

              var ns=s.nextSibling;   //获得s的下一个兄弟节点 

              var ps=s.previousSibling;  //得到s的上一个兄弟节点 

              var fc=s.firstChild;   //获得s的第一个子节点 

              var lc=s.lastChild;   //获得s的最后一个子节点 
            } 

</script>

复制代码

 

 

下面介绍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>元素开始找<span>,等同于$("p span")

 robotframework实例:

Execute Javascript  var ele=document.getElementsByName()(3).nextSibling;ele.onclick();

 实例1:

实例2:

Execute Javascript    var ele=document.getElementById("viewtable").getElementsByTagName("tbody")(0).getElementsByTagName("td"); for(var i=0;i<ele.length;i++)  
    { if(ele[i].innerHTML=="${searchTitle}") { ele[i].onclick()} }


  • 2020-12-16 23:06:05

    Rocket.Chat推送信息

    Rocket.Chat推送消息 Rocket.Chat是一个开源实时通讯平台, 支持Windows, Mac OS, Linux. 支持聊天, 文件上传, 视频通话, 语音通话功能. 向Rocket.Chat推送消息 以下示例可以转为别的语言的版本, 本示例使用Linux平台的curl测试, curl非常强大. 登陆 首先需要登陆Rocket.Chat服务器

  • 2020-12-17 09:01:23

    对BitTorrent Tracker源码分析

    tracker服务器是BT下载中必须的角色。一个BT client 在下载开始以及下载进行的过程中,要不停的与 tracker 服务器进行通信,以报告自己的信息,并获取其它下载client的信息。这种通信是通过 HTTP 协议进行的,又被称为 tracker HTTP 协议,它的过程是这样的: client 向 tracker 发一个HTTP 的GET请求,并把它自己的信息放在GET的参数中;这个请求的大致意思是:我是xxx(一个唯一的id),我想下载yyy文件,我的ip是aaa,我用的端口是bbb。。。

  • 2020-12-17 10:55:48

    html5 video p2p research

    节约带宽,减少缓冲时间,提升服务质量,处理峰值流量, 视频观看的人越多,播放越流畅。

  • 2020-12-17 10:57:34

    使用 MediaSource 搭建流式播放器

    Media Source Extensions(媒体源扩展)大大地扩展了浏览器的媒体播放功能,提供允许JavaScript 生成媒体流。这可以用于自适应流(adaptive streaming,也是我毕设的研究方向)及随时间变化的视频直播流(live streaming)等应用场景。

  • 2020-12-17 11:00:37

    H5流式播放(FMP4转封装与mediaSource)

    W3C上有明确关于mediaSource 扩展接口的文档。mediaSource 扩展文档中是这么定义的, 它允许JS脚本动态构建媒体流用于和,允许JS传送媒体块到H5媒体元素。这种接口的应用可以让h5播放器实现持续添加数据进行播放。做as的朋友都知道as中的appendBytes方法,一种添加二进制数据进行播放的方式。这两种接口在概念上是类似的。只是里面的定义和对媒体文件的要求有所不同。对于mediaSource扩展接口我只介绍我们主要应用的几个。

  • 2020-12-18 17:15:29

    coTurn stun服务器搭建,禁用turn

    https://github.com/coturn/coturn 在这里git clone 下来然后编译安装,一切默认即可。编译后,也可以不用安装。在编译目录下bin文件夹下有turnserver turnutils_stunclient turnutils_uclient 这三个等一下会用到的软件。