父节点

<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. Python中让MySQL查询结果返回字典类型的方法

    import pymysql host='localhost' user='root' passwd='root' port=3306 db='test' db=pymysql.connect( ho ...

  2. QGis C++ 开发之图层分类显示

    开发环境:Win10 + VS2010 + Qt 4.8.6 + QGis 2.14.4 简单介绍下如何用C++方式实现QGis中图层分类显示的方法. 要实现图层的分类显示主要会用到QgsCatego ...

  3. RedHat Enterprise Linux 6.4使用Centos 6的yum源问题

    RedHat Enterprise Linux 6.4使用Centos 6的yum源问题 作为一名新手,学习Linux已经一个月了,其间遇到了不少问题,而今天笔者遇到的问题是 #yum install ...

  4. OpenCV——反向投影（定位模板图像在输入图像中的位置）

    反向投影: #include <opencv2/opencv.hpp> #include <iostream> using namespace cv; using namesp ...

  5. vSphere虚拟化管理平台的功能

    VMware vSphere® 提供全球领先的虚拟化平台,用于构建云计算基础架构. vSphere 有哪些功能 强大的计算能力 虚拟化 x86 服务器资源并将其聚合成逻辑池,用于分配多个工作负载. 网 ...

  6. laytpl js模板引擎

    laytpl js模板引擎.laytpl是一款非常轻量的JavaScript模板引擎.地址:http://www.layui.com/laytpl/ 用法与handlebar.js类似,但是比较轻量级 ...

  7. 如何在Drupal7中用代码批量创建节点、评论和分类

    最近,我忙于一个网站迁移工作.网站是使用某个老式CMS建立的,有一定数量的文章.不同的分类数据和用户评论.我的团队被雇来把这些数据从这个浪费人力物力的老式CMS上完整的迁移到功能更现代的开源Drupa ...

  8. CentOS 建立本地yum源服务器

    安装CentOS系统,配置系统的网络环境 配置静态IP vi /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0 TYPE=Ethernet O ...

  9. Android开发——断点续传原理以及实现

    0.  前言 在Android开发中,断点续传听起来挺容易,在下载一个文件时点击暂停任务暂停,点击开始会继续下载文件.但是真正实现起来知识点还是蛮多的,因此今天有时间实现了一下,并进行记录.本文原创, ...

  10. POJ3278&&1426&&3126&&3087&&3414

    接上次的,标签是BFS专题 其实无论是Deepth还是Breadth都是Search 3278 又是撸过的题目 1426 找一个十进制数(我刚开始看样例以为是二进制数),使得它每一位上都是1或0,且是 ...