父节点

<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. FastJson遇见的问题或项目实战中优化的问题，看源码都可以解决

    1:感觉见鬼了一般存储JSONObject中的字段竟然不见了? JSONObject object=new JSONObject(); Map fields = new HashMap(); fiel ...

  2. linux 的常用命令---------第二阶段

    vim编辑器 vim 文件名(首先进入命令模式) :(进行编辑文件内容)  → 按 i 键进入插入模式,可以写内容啦. ↓ 按 Esc 键,进入命令模式 ↓ 按 shift + : 键,进入末行模式  ...

  3. 爬虫代理squid

    yum -y install squid 配置文件一般是在/etc/squid3/下的squid.conf文件 pyspider使用的时候只需要设置代理服务器为你配置好的服务器的IP就可以了 clas ...

  4. [转]深入理解MFC中程序框架

    最近抽空复习了一下MFC的内容,觉得一篇博文写的不错. 原文内容太多直接给出链接吧:深入理解MFC中程序框架 链接2:深入浅出话VC++(2)——MFC的本质 链接3:MFC单文档/视图结构穷追猛打

  5. Node基础知识点--学习笔记（一）

    一:建立http服务器: 在D盘建立一个文件夹node,放入app.js,代码如下: var http = require('http'); http.createServer(function(re ...

  6. git回滚命令reset、revert的区别

    ##使用git,总有一天会遇到下面的问题: (1)改完代码匆忙提交,上线发现有问题,怎么办? 赶紧回滚. (2)改完代码测试也没有问题,但是上线发现你的修改影响了之前运行正常的代码报错,必须回滚. 所 ...

  7. 何谓BLDC电机？BLDC电机是如何旋转的？

    何谓BLDC电机?BLDC电机是如何旋转的?

  8. 20155338 《网络攻防》Exp5 MSF基础应用

    20155338 <网络攻防>Exp5 MSF基础应用 基础问题回答 1. 用自己的话解释什么是exploit,payload,encode? exploit将真正要负责攻击的代码传送到靶 ...

  9. [CF981F]Round Marriage[二分+霍尔定理]

    题意 洛谷 分析 参考了Icefox 首先二分,然后考虑霍尔定理判断是否有完美匹配.如果是序列的话,因为这里不会出现 \(j<i,L(i)<L(j)\) 或者 \(j<i,R(i)& ...

  10. Python 学习 第三篇：数组类型（列表、字典和元组）

    列表和字段都可以在原处进行修改,可以按照需求增长或缩短,并且可以包含任何类型的对象或被嵌套.列表和字典存储的是对象的引用,而不是拷贝. 一,列表 列表是有序的序列,每一个列表项的顺序是固定的,这使得列 ...