父节点

<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. [JSOI2009]球队收益

    题目 这题好神啊 我们发现一个球队的总比赛场数是确定的,设第\(i\)支球队一共进行了\(s_i\)场比赛 于是这个球队的收益就是\(c_i\times x^2+d_i(s_i-x)^2\) 我们拆开 ...

  2. App常见产品问题及预防方法

    01界面适配 a:手机分辨率为1920x7080的高分辨率手机,在调整手机字体大小时,会导致页面显示出现变形: b:因用户设置的特殊字体导致列表的字母条不显示: c:某些banner 图片在部分机型只 ...

  3. Velocity.js初步

    Js越来越强大了,超乎我的想象,以前JS仅仅只能通过ajax与后台交互,后来又有了Node.js,JS可以用于服务端,然后今天我又发现了JS的动态语言.明天呢?也许不少前端的小伙伴会说,慢些吧,慢些吧 ...

  4. C#游戏开发中快速的游戏循环

    C#游戏开发中快速的游戏循环的实现.参考<精通C#游戏编程>一书. using System; using System.Collections.Generic; using System ...

  5. STlinkSWD模式连线方式

    若使用SWD模式,则只需要连接4根线,7,9,20,1即SWDIO,SWDCLK,GND,VCC.VCC为3.3V

  6. [笔记] ubuntu下添加windows的字体

    方法如下: 第一步:将windows下喜欢的字体文件copy到一个文件夹中,例如将XP里WINDOWS/FONTS中的字体文件(本人比较贪心,把整个文件夹copy了过来……),在linux中命名为xp ...

  7. day76

    昨日回顾:  1 ajax 什么是ajax:异步的JavaScript 和xml  2 特点:异步,局部刷新  3 简单的与后台交互:(携带数据:可以拼到url上---->从GET中取,)   ...

  8. day62

    一.组件 组件都具有模板,template new Vue()创建的是根组件 组件与实例一一对应,创建一个实例就是创建了一个组件,同理创建一个组件就相当于创建了一个实例 根组件的挂载点一般就是根组件的 ...

  9. jqgrid 主键列的设定

    1.如果需要对jqgrid表格数据有互动操作,需要设定主键列. 2.主键列的作用为:在进行jqgrid表格数据交互(编辑.新增.删除行)时,是通过主键列的值来作为引导值来的. 3.注意:不要给一个jq ...

  10. Jquery属性练习

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...