Javacript中父节点、子节点、兄节点的简单用法[0306]

一、开解：

本文主要讲父子兄节点的简单用法，至于怎么取得节点，可以参考文[0301]和[0302]，视情况而定，有时候我们分别会用到父节点、子节点、或是兄节点，这里我简单列举一下。

var mchs = mdh.childNodes;//返回全部子节点

var mph = mdh.parentNode;//返回父节点

var mns = mdh.nextSibling;//返回下一个兄弟节点

var mps = mdh.previousSibling;//返回上一个兄弟节点

var mfc = mdh.firstChild;//返回第一个子节点

var mlc = mdh.lastChild;//返回最后一个子节点

注解:childNodes要当成数组来单个用，因为它是一个集合。

二、实例：

<body>

<div class="dhx1">我是小盒子1</div>

<div class="dhx2">我是小盒子2</div>

</div>

</div>

</body>

var mdh = document.querySelector('.dh3');

var mchs = mdh.childNodes;//返回全部子节点(dhx1,dhx2)

var mph = mdh.parentNode;//返回父节点(dh)

var mns = mdh.nextSibling;//返回下一个兄弟节点(dh4)

var mps = mdh.previousSibling;//返回上一个兄弟节点(dh2)

var mfc = mdh.firstChild;//返回第一个子节点(dhx1)

var mlc = mdh.lastChild;//返回最后一个子节点(dhx2)

</script>

注解：这是一个简单的盒子结构，在后面的小括号里就是返回节点的class名。

三、总结：

在已知某节点元素的情况下，我们可以取得它的子节点，父节点，兄节点元素，当然对于节点元素，还有很多操作方法，我们后面会学习到的。

四、关注：

更多内容请关注我们的公众号：

Javacript中父节点、子节点、兄节点的简单用法[0306]相关推荐

angularjs中父，子，兄之间controller值得传递
使用angularjs,发现controller间的值传递,比较麻烦的,以后几篇文章会陆续说几种方法. 一,angularjs $broadcast $emit $on的处理思想在一个control ...
Jquery 寻找父、子、兄弟节点
JQUERY的父,子,兄弟节点查找方法 jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$(" ...
jquery兄弟标签_jQuery的父，子，兄弟节点查找方法
jQuery的父,子,兄弟节点查找方法 jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("s ...
总结vue中父向子，子向父以及兄弟之间通信的几种方式
子向父方式1:通过props,如例子中子组件test1.vue向父组件App.vue传值 App.vue代码 <template><div id="app"> ...
CSS定位中“父相子绝”
一.定位的介绍定位有三种:相对定位(position:relative).绝对定位(position:absolute).固定定位(position:fixed) 二.三种定位的用法,特点和实例 2 ...
vue中父传子，父传孙说明
先来说一下,vue中父传往子组件用v-bind绑定属性,在子页面用props接收,子传往父的用$emit this.$emit('change',data),data就是你要传的数据,change为父 ...
JQUERY的父，子，兄弟节点查找方法
jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(& ...
jquery兄弟标签_JQuery的父、子、兄弟节点查找方法
jQuery.parent(expr) //找父元素 jQuery.parents(expr) //找到所有祖先元素,不限于父元素 jQuery.children ...
父、子、兄弟节点查找方法
jQuery.parent(expr) //找父元素 jQuery.parents(expr) //找到所有祖先元素,不限于父元素 jQuery.children(expr) //查找所有子元素,只会 ...

Javacript中父节点、子节点、兄节点的简单用法[0306]

Javacript中父节点、子节点、兄节点的简单用法[0306]

Javacript中父节点、子节点、兄节点的简单用法[0306]相关推荐

最新文章

热门文章