精华内容
下载资源
问答
  • 我们经常通过document.getElementById 方法来获取到一个元素,这个时候我们经常需要有一个需求,那就是如何判断这个元素在...从零开始我们可以这样的代码获取到一个元素属于父元素的第几个子元素。var child = this...

    我们经常通过document.getElementById 方法来获取到一个元素,这个时候我们经常需要有一个需求,那就是如何判断这个元素在父元素中的位置。

    包含文本和注释节点

    原生JS有一个常见的小技巧那就是通过元素的previousSibling属性,额外需要注意的是该属性会遍历text节点,即回车键。

    从零开始我们可以这样的代码获取到一个元素属于父元素的第几个子元素。

    var child = this;

    while( (child = child.previousSibling) != null )

    i++;

    案例代码如下:

    Html:

    • 123
    • a
    • b
    • c

    JS:

    var child = document.getElementById("a");

    var i = 0;

    while((child = child.previousSibling) != null) i++;

    console.log(i) //console 1

    通过循环遍历previousSibling属性是否为null这个小技巧,就可以获取到当前元素在父元素中的位置了。

    不包含文本节点和注释节点

    实现代码如下:

    var child = document.getElementById("a");

    var parent = child.parentNode;

    var index = Array.prototype.indexOf.call(parent,child);

    console.log(index)//1

    原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/907.html

    展开全文
  • 以ul,li为例,获取ul下所有li标签一号二号三号四号leta=document.getElementById('nav').children//获取ul下的所有子级console.log(a)获取到的是HTMLCollection格式的,这种格式不方便我们操作(如:不能执行数组的...

    以ul,li为例,获取ul下所有li标签

    • 一号
    • 二号
    • 三号
    • 四号

    let a=document.getElementById('nav').children   //获取ul下的所有子级

    console.log(a)

    获取到的是HTMLCollection格式的,这种格式不方便我们操作(如:不能执行数组的push、concat等方法),所以我们需要将其转换成数组

    186c68af32b6e9ae0d7789f38fb59e15.png

    HTMLCollection --> Array 三种常用方法es5方法(低版本浏览器使用,ie):var arr = Array.prototype.slice.call(htmlCollection);

    es6方法1:let arr = [...htmlCollection]

    es6方法2:let arr = Array.from(htmlCollection)

    当然,如果十分不幸的,你需要兼容IE8等旧浏览器或更早版本,我们需要使用一个更基本的兼容性函数,如function toArr(arr){

    for(var i = 0, a = []; i 

    a.push(arr[i]);

    return a;

    }

    065a91296f21e1e09c26a9b6b43db60c.png

    转换成数组之后,即可使用push.concat等方法

    展开全文
  • JS获取DOM元素的方法(8种)通过ID获取(getElementById)通过name属性(getElementsByName)通过标签名(getElementsByTagName)通过类名(getElementsByClassName)通过选择器获取一个元素(querySelector)通过选择器获取一组...

    JS获取DOM元素的方法(8种)

    通过ID获取(getElementById)

    通过name属性(getElementsByName)

    通过标签名(getElementsByTagName)

    通过类名(getElementsByClassName)

    通过选择器获取一个元素(querySelector)

    通过选择器获取一组元素(querySelectorAll)

    获取html的方法(document.documentElement)

    document.documentElement是专门获取html这个标签的

    获取body的方法(document.body)

    document.body是专门获取body这个标签的。

    1.通过ID获取(getElementById)

    document.getElementById('id')

    上下文必须是document。

    必须传参数,参数是string类型,是获取元素的id。

    返回值只获取到一个元素,没有找到返回null。

    2.通过name属性(getElementsByName)

    document.getElementsByName('name')

    上下文必须是document。内容

    必须传参数,参数是是获取元素的name属性。

    返回值是一个类数组,没有找到返回空数组。

    3.通过标签名(getElementsByTagName)

    var obj = document.getElementsByTagName('div');

    for(let i = 0; i

    obj[i].onclick = function(e){

    console.log(i)

    }

    }

    上下文可以是document,也可以是一个元素,注意这个元素一定要存在。

    参数是是获取元素的标签名属性,不区分大小写。

    返回值是一个类数组,没有找到返回空数组

    4.通过类名(getElementsByClassName

    var obj1 = document.getElementsByClassName('animated')

    // console.log

    0:div.app.animated

    1:div#login.login.animated.rubberBand

    2:div#reg.reg.animated.shake

    3:div#kefu.kefu.animated.swing

    4:div#LoginState.state.animated.bounce

    5:div.loginState.animated

    6:div.regState.animated

    7:div.pop.animated

    上下文可以是document,也可以是一个元素。

    参数是元素的类名。

    返回值是一个类数组,没有找到返回空数组。

    5.通过选择器获取一个元素(querySelector)

    document.querySelector('.animated')

    上下文可以是document,也可以是一个元素。

    参数是选择器,如:”div .className”。

    返回值只获取到第一个元素。

    6.通过选择器获取一组元素(querySelectorAll)

    document.querySelector('.animated')

    上下文可以是document,也可以是一个元素。

    参数是选择器,如:”div .className”。

    返回值是一个类数组。

    JS获取HTML DOM元素的8种方法

    什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...

    原生js获取 一个dom元素距离页面可视区域的位置值 -- getBoundingClientRect

    getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bottom.分别表示元素各边与页面上边和左边的距离. var box=docum ...

    JS获取HTML DOM元素的方法

    JS获取HTML DOM元素有八种方法: 1.根据id获取标签元素: document.getElementById("id名"); 2.根据标签名获取标签列表: document ...

    原生JS—实现图片循环切换的两种方法

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...

    js中常用追加元素的几种方法

    ...

    JS获取URL中参数值的4种方法

    方法一:正则法 function getQueryString(name) { var reg = new RegExp('(^|&)' + name + '=([^&]*)(&amp ...

    【JS新手教程】JS获取当前星期几的几种方法

    该文通过获取星期几的几种方法,介绍JS里的数组,判断,和字符串截取,可以当作新手教程看,小白也看的懂.获取星期几,可通过Date()对象的getDay()获取,获取的是一个数字,对应的是0,1,2,3 ...

    js获取屏幕以及元素宽高的方法

    一.window相关 网页正文部分上:window.screenTop 网页正文部分左:window.screenLeft 屏幕分辨率的高:window.screen.height 屏幕分辨率的宽:w ...

    js中删除数组元素的几种方法

    1:js中的splice方法 splice(index,len,[item])    注释:该方法会改变原始数组. splice有3个参数,它也可以用来替换/删除/添加数组内某一个或者几个值 inde ...

    随机推荐

    公用表表达式(CTE)引发的改变执行顺序同WHERE条件顺序引发的bug

    以下模拟一下CTE出错 /*测试环境 Microsoft SQL Server 2008 R2 (RTM) - 10.50.1600.1 (X64) Apr 2 2010 15:48:46 Copyr ...

    zoj 2334 Monkey King/左偏树+并查集

    原题链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1389 大致题意:N只相互不认识的猴子(每只猴子有一个战斗力值) 两只 ...

    WPF 渐隐渐现切换背景图片

    最近学习WPF,尝试着自己做一些小玩意,也遇到了一些问题,于是整理记录以便日后查阅. 我们都知道WPF可以实现一些很炫的效果,然而有时候为达到这个目的却并不是一件很容易的事情.比如:在软件中我希望能够 ...

    重启VirtualBox里面的系统提示VT-x features locked or unavailable in MSR错误

    有次不小心设置了一下virtualbox里面的一些配置,然后启动系统时出现了如下提示 在网上找了一些资料尝试了一些方法偶然有一次成功 原来是自己把那个cpu个数设置成了2,改成1就好了,不知道为什么做 ...

    Libev学习笔记2

    这一节根据官方文档给出的简单示例,深入代码内部,了解其实现机制.示例代码如下: int main (void) { struct ev_loop *loop = EV_DEFAULT; ev_io_i ...

    每周分享一 之 webSocket

    一:什么是webSocket ? webSocket是HTML5出的新协议,WebSocket协议支持,在受控环境中运行不受信任代码的客户端与选择了该代码通信的远程主机之间进行双向通信. 简单翻译一下 ...

    [模拟赛] T2 不等数列

    Description 将1到n任意排列,然后在排列的每两个数之间根据他们的大小关系插入">"和"

    【DFS】n皇后问题

    回溯: 递归调用代表开启一个分支,如果希望这个分支返回后某些数据恢复到分支开启前的状态以便重新开始,就要使用到回溯技巧,全排列的交换法,数独,部分和,用到了回溯.下一个状态在开始之前需要利用到之前的状 ...

    【原创】研发应该懂的binlog知识(下)

    引言 这篇是的下半部分.在本文,我会阐述一下binlog的结构,以及如何使用java来解析binlog. 不过,话说回来,其实严格意义上来说,研发应该 ...

    【leetcode】2-AddTwoNums

    problem: Add Two Numbers 需要学习的是单向链表的基础使用:

    展开全文
  • js 获取子元素个数

    2021-07-08 16:07:47
    // operaColumn 为元素类名 document.querySelector('.operaColumn').childElementCount
    // operaColumn 为元素类名
    document.querySelector('.operaColumn').childElementCount
    展开全文
  • 这里我介绍几个原生js获取元素子节点的方法:一、通过标签的属性值获取后代节点以getElementBy开头的方法,可以根据具体的属性获取元素的后代节点。这些方法不只会获取子节点,他也会获取到所...
  • 关于原生JS获取节点,一直是个头疼的问题,而且调用方法的名字又贼长了,所以我选择用JQ,好像跑题了--话不多说看代码获取父节点 及 父节点下所有子节点(兄弟节点)文本一文本二文本三文本四function jsCopy(ev){var ...
  • 第一个块元素</div> <ul> <li>列表</li> </ul> <span>文字说明</span> </div> ul li { list-style: none; } var box = document.getElementById('box'); ...
  • 直接获取 document.querySelectorAll("div.aa") 类似属性选择器的写法 document.querySelectorAll("div[class='aa']") not 选择器 document.querySelectorAll(".aa:not(ul)") document.querySelectorAll需要高版本...
  • 获取dom元素 <body> <!-- <div id="box">我是一个DIV</div> <p class="item">这是一个p标签1</p> <p class="item">这是一个p标签2</p> <span name="x1">我...
  • 有些时候,在一个网页的ul li中,存在左右两个部分的内容,但是右边元素内容又是不固定,左边元素相对应的不能用固定宽度,所有需要我们动态的获取右边元素宽度,来赋值给左边元素的marginRight值。HTML结构:头像...
  • JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素原生JS获取ID为test的元素下的子元素。可以用:var a = docuemnt.getElementById("test").getElementsByTagName("div"); ...
  • js获取子元素的方法

    千次阅读 2020-12-19 12:50:13
    笔记核心:firstElementChild只会获取元素节点对象,从名称就可以看出来,firstChild则可以获取文本节点对象(当然也可以获取元素...咱今天在使用原生js的时候,就遇见一个坑------》firstChild,具体是使用firstChi...
  • 元素 <button class="btn" name="nn" id="btnn">上传图片</button> 原生获取button按钮的方式, ->...// 根据类名获取dom元素 let btn1 = document.querySelector('.btn') // ...// 根据类名 获取所有相同
  • <div id="box"> <span>spanspan> 文本段落p> div> var box = document.getElementById('box'... // span 文本段落 } } // 直接获取子元素的属性 children console.log(box.children); // HTMLCollection(2) [span, p]
  • parentNode方法详解 <div class="header-item" onclick='checked(this)'&... //获取所点击节点的父节点的所有子节点 const childrens = parent.children; //对节点进行一些操作 //给所点击节点添加样式 //event.
  • 文章目录原生js的dom中获取元素相对于视口的位置-getBoundingClientRect()获取页面滚动条滚动像素值-scrollTop和scrollLeft元素在文档中的绝对位置 经常忘记一些webapi,记录一下偶尔复习,以后使用到。 原生js的...
  • js获得页面元素

    2020-12-29 20:33:35
    添加iframe页面,假设须要获得页面的元素则能够使用javascript的contentWindow来获得,注意iframe和frameset必须加入id。详细样例例如以下:mainindex.jsp中加入页面main.html中加入framesetnavigation.jsp...
  • 利用JavaScript怎么获取元素下的第一级子元素发布时间:2021-01-22 17:03:51来源:亿速云阅读:112作者:Leah这期内容当中小编将会给大家带来有关利用JavaScript怎么获取元素下的第一级子元素,文章内容丰富且以专业...
  • 原生js在父页面获取iframe页面的元素,以及在页面获取父页面元素,这是平时经常会用到的方法,这里写一个例子来总结下: 1、父页面(demo.html),在父页面修改页面div的背景色为灰色,原来为红色: 1...
  • 不用jquery的情况下,因为用的是vue框架,获取元素到页面顶端的距离demo的代码如下:问题1 offsetTop只能获取到有定位元素父级的距离,怎么获取到页面顶端距离呢问题2 子级有了transform 24px但offsetTop却获取不到 ...
  • <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="box"> <...3&.
  • span节点b孙节点
  • 令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结:通过顶层document节点获取:document.getElementById(elementId)该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法。...
  • 想必大家都知道jquery中有个children()是一个遍历的方法,作用是获取某个指定元素下所有子元素,那么今天我们来用原生JS实现一个这个children(),其实很简单,只不过需要处理一下IE678兼容的问题,大家都知道IE678是...
  • 原生js系列 删除元素

    2020-12-21 11:59:04
    // 删除idvar idObject = document.getElementById('sidebar');if (idObject != null)idObject.parentNode....//通过class获取元素paras = document.getElementsByClassName('paginator');for(i=0;i//删除元...
  • 随意打开一个网站,f12输入以下代码,获取所有文本信息 var array = []; var allText = "" function onload() { var tags = document.body.getElementsByTagName('*'); for (var i = 0; i < tags.length; i++) ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,982
精华内容 11,592
关键字:

原生js获取所有子元素