父节点

<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. tomcat Win10 配置环境变量详解

    在Win10系统总该如何配偶之tomcat 环境变量?今天win10之家给大家带来了关于win10系统中配置tomcat环境的操作方法.在配置之前我们需要做以下几点: 步骤:安装和配置好了Java 的 ...

  2. [JLOI2013]删除物品

    嘟嘟嘟 只要每一次将优先级最高的上面的物品移走,就一定能保证是最优解. 所以我们只要想办法简化这个模拟移物品的过程,看完了题解后,发现可以这么想,我们可以把两个栈头碰头的挨在一起,然后设一个指针代表两 ...

  3. linux ssh 应用

    linux 服务器 连接另一个linux服务器 ssh 用户名@IP地址 linux 服务器传输文件到另一个linux服务器 scp 文件名(可多个)  用户名@IP地址:传到的目录 /home

  4. MyBatis实战之解析与运行

    本次所谈的原理仅仅只涉及基本的框架和核心代码,并不会全部都说到,比如关于MyBatis是如何解析XML文件和其他配置文件从而的到内容,还有就是JDBC如何使用,关于JDBC如何使用,可以参考我的这篇博 ...

  5. Kubernetes1.91（K8s）安装部署过程（一）--证书安装

    安装前忠告:如果你用的是虚拟机,强烈不建议你使用克隆(链接克隆)的方式,至于完整克隆不知道有没有问题,每一台全新安装centos7系统最好. 一.安装前主题环境准备 1.docker安装 建议使用官网 ...

  6. OO课程学期末总结

    OO课程学期末总结 测试VS正确性论证 OCL vs JSF 对象约束语言(Object Constraint Language), 简称OCL, 是一种指示用户建模系统中的限制方式. 他是UML可选 ...

  7. overflow的使用

    <div id="topFieldDiv" style="width: 650px; height: 150px; overflow-y: hidden" ...

  8. Web.config中 mode="RemoteOnly" 跟mode="On" 区别

    转载网址:mode="RemoteOnly" 跟mode="On" 区别 <!-- 自定义错误信息 设置 customErrors mode=" ...

  9. 利用WebHook实现PHP自动部署Git代码

    平时项目代码都托管在Coding,然后每次提交了代码之后都要SSH到服务器上去git pull一次,很是繁琐,在看了OverTrue的<使用PHP脚本远程部署git项目>后就尝试在自己服务 ...

  10. 汽车为什么选择了CAN总线技术？

    汽车为什么选择了CAN总线技术? 围绕“汽车为什么选择了CAN总线技术?汽车CAN总线技术到底是怎么一回事?采用汽车CAN总线技术有哪些优点?汽车总线的发展趋势”等问题作了一个浅短的介绍: 1. 汽车 ...