如何使用JS获取当前节点的兄弟/父/子节点

 更新时间:2023年04月25日 16:00:59   作者:激进的土豆  
在日常的网页开发中,我们会遇到获取节点的问题,而js是写网页的最基础的语言,也是最常用的,这篇文章主要给大家介绍了关于如何使用JS获取当前节点的兄弟/父/子节点的相关资料,需要的朋友可以参考下

JS获取当前节点的方式:

通过事件监听器获取当前节点:

<button onclick="fun(this)"></button>
function fun(obj){
    // obj就是当前节点
//可以通过.父节点/子节点的方式来获取节点。
    obj.nextSiling;
}

1.getElementById()----通过ID获取

2.getElementsByTagName()--通过标签名获取

3.getElementsByClassName()--通过class(类名)获取

4.querySelector()----()号里可以根据css选择器的形式获取,获取第一个

5.querySelectorAll()--同上,获取所有""里的内容,返回的是一个“伪数组”

6.getElementsByName()---通过name属性来获取表单元素,一般也只用于表单元素

示例:

<ul>
        <li>li1</li>
        <li id="li2">li2</li>
        <li class="li3">li3</li>
        <li id="li4">li4</li>
        <li class="li5">li5</li>
    </ul>
    <input type="text" name="abc" value="你说呢">
    <script>
        //通过id获取
        let li2=document.getElementById("li2");
        // li2变成红色
        li2.style.color="red";
        //通过class获取,返回的是一个伪数组
        let li3=document.getElementsByClassName("li3");
        //li3变成绿色
        li3[0].style.color="green";
        //通过标签名获取,获取的也是一个伪数组
        let li = document.getElementsByTagName("li");
        //第一个li变成粉色
        li[0].style.color="pink";
        //通过querySelector获取
        let li4=document.querySelector("#li4");
        li4.style.color="blue";
        //通过querySelectorAll()获取
        let li5=document.querySelectorAll(".li5");
        //class为li5的第一个颜色变为紫色
        li5[0].style.color="purple";
        //通过name属性获取表单元素
        let abc=document.getElementsByName("abc");
        //name为abc的第一个元素字体变为红色
        abc[0].style.color="red";
    </script>

获取子节点:

1.通过一个一个.获取节点:

2.通过childNodes获取子节点:返回的也是子节点集合,是一个数组的格式。他会把换行和空格也当成是节点信息。

3.通过children获取,不过他也是数组,按照数组的形式访问就行

4.获取第一个子节点:firstChild,firstElementChild

5.获取最后一个子节点:lastChild,lastElementChild

//通过每一层.获取节点:
let b=document.getElementById("li01").querySelector("span");
alert(b.innerHTML);
//通过childNodes获取子节点:返回的也是子节点集合,是一个数组的格式。他会把换行和空格也当成是节点信息。
let c=document.getElementById("li02").childNodes;
alert(c[0].innerHTML);
//通过children获取,不过他也是数组,按照数组的形式访问就行
let d=document.getElementById("li03").children[0];
alert(d.innerHTML);
//获取第一个子节点:firstChild
let e=document.getElementById("li04").firstChild;//会匹配换行和空格
let f=document.getElementById("li04").firstElementChild;
//获取最后一个子节点:
let g=document.getElementById("li05").lastChild;//会匹配换行和空格
let h=document.getElementById("li05").lastElementChild;

获取父节点: 

1.获取单个父节点:parentNode,parentElement

let i=document.getElementById("li05").parentNode;
let j=document.getElementById("li05").parentElement;

2.获取所有父节点:offsetParent。返回的是个伪数组

let k=document.getElementById("li05").offsetParent;

获取兄弟节点

1.通过获取父节点再获取子节点来获取兄弟节点:

var brother1 = document.getElementById("li05").parentNode.children[1];

2.获取上一个节点

var brother2=document.getElementById("li05").previousElementSibling;
var brother2=document.getElementById("li05").previousSibling;

3.获取下一个节点

var brother4 = document.getElementById("test").nextElementSibling;
var brother5 = document.getElementById("test").nextSibling;

总结

到此这篇关于如何使用JS获取当前节点的兄弟/父/子节点的文章就介绍到这了,更多相关JS获取当前节点内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • layui表单验证select下拉框实现验证的方法

    layui表单验证select下拉框实现验证的方法

    今天小编就为大家分享一篇layui表单验证select下拉框实现验证的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 表单元素值获取方式js及java方式的简单实例

    表单元素值获取方式js及java方式的简单实例

    下面小编就为大家带来一篇表单元素值获取方式js及java方式的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • JavaScript数组实现扁平化四种方法详解

    JavaScript数组实现扁平化四种方法详解

    扁平化,顾名思义就是减少复杂性装饰,使其事物本身更简洁、简单,突出主题。数组扁平化,对着上面意思套也知道了,就是将一个复杂的嵌套多层的数组,一层一层的转化为层级较少或者只有一层的数组
    2022-10-10
  • Javascript模拟scroll滚动效果脚本

    Javascript模拟scroll滚动效果脚本

    项目需要写了一段模拟Scroll滚动代码,分享的同时,我有些疑问,希望大家能帮忙解决,代码如下
    2008-09-09
  • uni-app实现全局水印示例详解

    uni-app实现全局水印示例详解

    这篇文章主要为大家介绍了uni-app实现全局水印示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • Echarts 3D散点图实战案例

    Echarts 3D散点图实战案例

    这篇文章主要给大家介绍了关于Echarts 3D散点图的相关资料, Echarts散点图是一种常用的数据可视化图表类型,用于展示两个或多个维度的数据分布情况,需要的朋友可以参考下
    2023-11-11
  • 微信小程序navigator跳转及参数传递的方法

    微信小程序navigator跳转及参数传递的方法

    这篇文章主要介绍了微信小程序navigator跳转及参数传递,在navigator中添加需要跳转的路径,如果需要带参,则在路径后面添加所要传递的参数以及值,需要的朋友可以参考下
    2023-11-11
  • 微信小程序中如何计算距离某个节日还有多少天

    微信小程序中如何计算距离某个节日还有多少天

    这篇文章主要给大家介绍了关于微信小程序中如何计算距离某个节日还有多少天的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-07-07
  • 用JavaScript修改CSS属性的代码

    用JavaScript修改CSS属性的代码

    这篇文章主要介绍用原生的javascript修改CSS属性的方法,需要的朋友可以参考下
    2013-05-05
  • javascript事件委托的用法及其好处简析

    javascript事件委托的用法及其好处简析

    这篇文章主要为大家详细介绍了javascript事件委托的用法及其好处,感兴趣的朋友可以参考一下
    2016-04-04

最新评论