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获取当前节点的兄弟/父/子节点相关推荐

S获取节点的兄弟,父级,子级元素的方法
JS获取节点的兄弟,父级,子级元素的方法作者: 字体:[增加减小] 类型:转载时间:2014-01-09 我要评论本篇文章主要是对JS获取节点的兄弟,父级,子级元素的方法进行了详细的介绍,需要 ...
js添加多个子节点_JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
本文实例讲述了JS实现DOM节点插入操作之子节点与兄弟节点插入操作.分享给大家供大家参考,具体如下: www.jb51.net JS节点插入 function showinsert(){ //添加子节 ...
js添加多个子节点_javascript如何创建子节点
学习完HTM年据业会效近轻业务进果近轻业务进果近轻业L+css后,我并没有直接去学习HTML5和css3,而是开始学习JavaScript,现在就是jQuery基础也懂一点,js也懂一点,css3也懂 ...
es6遍历树结构并判断_递归遍历树结构，从某个节点开始查找其子节点中的所有叶子节点...
背景现在项目中哟这样的一个需求,左边显示一棵树目录,点击目录的一级或二级节点,右边显示其子节点中的所有叶子节点,而且要求前端来做这个,不用调用接口请求了,那么,这里记录一下我的实现方法.点击叶子节点 ...
class 原生js获取父元素_JS获取节点的兄弟,父级,子级元素的方法
先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素原生的J ...
JS记坑 ----- 在父节点中添加删除子节点
场景:通过javascript为ul标签内动态增删li标签,我通过 liArr = ul.children; 获取了ul的存有所有子元素的类数组,但是在 appendChild().insert()和 ...
JS中event.target事件委派遇到多重子节点的元素导致子节点遮挡父节点事件的解决方法
1.问题描述事件委派在重复给多个子节点添加相同方法时或者即时添加子节点时很优秀,但如果子节点中还含有自己的子节点,就会发生遮挡. 2.问题分析 event.target会找到使绑定节点执行该事件的触 ...
mysql查询父/子节点
mysql查询父节点: SELECT t2.id, t2.parent_id FROM(SELECT @r AS _id,(SELECT @r := parent_id FROM department ...
mysql根据父节点查询所有的子节点以及根据子节点往上查询所有父节点
一.根据叶子节点的某个id查询往上查询 SELECT d3.* FROM ( SELECT @r AS id, (SELECT @r := parent_id FROM department WHER ...

JS获取当前节点的兄弟/父/子节点

JS获取当前节点的方式：

获取子节点：

获取父节点：

获取兄弟节点

JS获取当前节点的兄弟/父/子节点相关推荐

最新文章

热门文章