父节点

<body>

<ul id="oUl">

	<li><a href="#">隐藏1</a></li>

    <li><a href="#">隐藏2</a></li>

    <li><a href="#">隐藏3</a></li>

    <li><a href="#">隐藏4</a></li>

</ul>

<script>

var a=document.getElementsByTagName('a');

for(var i=0;i<a.length;i++)

{

	a[i].onclick=function()

	{

		this.parentNode.style.display='none';

	}

}

console.log(a[0].parentNode.parentNode.parentNode.parentNode.parentNode);

console.log(a[0].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode);

</script>

</body>

子节点

<body>

<ul id="oUl">

	<li>111</li>

    <li>222</li>

    <li>333</li>

    <li>444</li>

</ul>

<script>

var oUl=document.getElementById('oUl');

var lis=oUl.children;//childNodes的一个兼容版

lis[0].nextElementSibling.style.background='pink';//找到某个元素的下个兄弟节点

lis[3].previousElementSibling.style.background='green';//找到某个元素的上个兄弟节点

console.log(oUl.firstElementChild);//第一个子节点

console.log(oUl.lastElementChild);//最后一个子节点

</script>

</body>

firstChild/firstElementChild获取第一个子节点，参考资料：http://www.cnblogs.com/jelly7723/p/4871849.html

DOM父节点、子节点例子的更多相关文章

  1. js jquery 获取元素(父节点,子节点,兄弟节点),元素筛选

    转载:https://www.cnblogs.com/ooo0/p/6278102.html js jquery 获取元素(父节点,子节点,兄弟节点) 一,js 获取元素(父节点,子节点,兄弟节点) ...

  2. jquery 获取元素(父节点,子节点,兄弟节点),元素筛选

    一, js 获取元素(父节点,子节点,兄弟节点)   var test = document.getElementById("test"); var parent = test.p ...

  3. js|jq获取兄弟节点,父节点,子节点

    08.19自我总结 js|jq获取兄弟节点,父节点,子节点 一.js var parent = test.parentNode; // 父节点 var chils = test.childNodes; ...

  4. javascript 获取HTML DOM父、子、临近节点

    在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式.内容等.如何获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有很 ...

  5. DOM访问关系（父节点 子节点）

    把下面的知识点掌握了,可以做一下下面的案例,都是工作中常用的,很有用 知识点   1.带Eleent和不带区别     a)带Element的获取的是元素节点     b)不带Element的获取文本 ...

  6. jquery 获取元素(父节点,子节点,兄弟节点)

    费话不多说,直接上代码jquery 获取元素 $("#test1").parent(); // 父节点 $("#test1").parents(); // 全部 ...

  7. [extjs] ExtJS4 treepanel 子节点选中父节点自动选中，选中父节点 子节点自动全部选中

    ExtJS4 treepanel 主要添加viewConfig重的代码: xtype:'treepanel', store: menuStore, id:'menuTreePanel', viewCo ...

  8. HTML中DOM元素的子节点为空？！firstChild, lastChild, childeNodes[]为空

  9. EasyUI：combotree(树形下拉框)复选框选中父节点(子节点的状态也全部选中)输入框中只显示父节点的文本值

    参考: https://blog.csdn.net/weixin_43236850/article/details/100320564

  10. (Elementui) el-tree 中英文过滤以及搜索到父子显示子节点，搜索到子节点显示父节点(filter-node-method)

    案例下载:https://gitee.com/tudoumlp/just1.git   (vue-ele-demo) 在项目中,会遇到树节点的搜索,中文和英文搜索,以及搜索到父节点匹配的时候同步显示该 ...

随机推荐

  1. 利用RMAN恢复整个数据库

    利用RMAN恢复整个数据库案例一 适合场合:恢复的目录一致,同时备份的过程中有归档日志 恢复的数据库目录和down机的数据库一致,还有一个就是RMAN备份的时候已经备份了归档日志. 备份脚本: run ...

  2. python面试题库——3数据库和缓存

    第三部分 数据库和缓存(46题) 列举常见的关系型数据库和非关系型都有那些? 关系型数据库: Oracle.DB2.Microsoft SQL Server.Microsoft Access.MySQ ...

  3. android 自定义listview无法响应点击事件OnItemClickListener

    如果你的自定义ListViewItem中有Button或者Checkable的子类控件的话,那么默认focus是交给了子控件,而ListView的Item能被选中的基础是它能获取Focus,也就是说我 ...

  4. numpy库数组拼接np.concatenate的用法

    concatenate功能:数组拼接 函数定义:numpy.concatenate((a1, a2, ...), axis=0, out=None)

  5. OpenCV——直方图计算、寻早最值位置和对比匹配（判断两幅图的相似程度）

  6. 自己设计一个日期类,可以输入年月日作为构造时的参数,如果不使用参数,则设定为1900年1月1日;编写一个方法equals判断两个日期是否相等;另一个方法compareTo可以进行日期之间的比较,返回两个日期之间相差的天数.

    import java.util.*; import java.lang.Math; class Date1{ private int year; private int month; private ...

  7. GitHub上最火的40个Android开源项目（二）

    21.drag-sort-listview DragSortListView(DSLV)是Android ListView的一个扩展,支持拖拽排序和左右滑动删除功能.重写了TouchIntercept ...

  8. 关于PLC高速计数器使用

    今天去面试问我高速计数器,因为没用过,所以直接说--不会.但是自己感觉自己自学电气,说不会太丢人了,所以今天学了PLC的高速计数器.虽然没有书,但是有度娘,还有现成的PLC设备实际检验程序,更有鹏哥和 ...

  9. 运放参数的详细解释和分析-part3，输入失调电压Vos及温漂

    运放参数的详细解释和分析-part3,输入失调电压Vos及温漂 在运放的应用中,不可避免的会碰到运放的输入失调电压Vos问题,尤其对直流信号进行放大时,由于输入失调电压Vos的存在,放大电路的输出端总 ...

  10. Jupyter Notebook中让python2和python3内核共存

    自己计算机里面共存了Python2和Python3,ipython作为试探性的REPL解释器使用的频率还是挺高的,分别在2和3下安装完ipython notebook后怎么分别使用这两种内核呢 按照默 ...