DOM父节点、子节点例子
父节点
<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父节点、子节点例子的更多相关文章
- js jquery 获取元素(父节点,子节点,兄弟节点),元素筛选
转载:https://www.cnblogs.com/ooo0/p/6278102.html js jquery 获取元素(父节点,子节点,兄弟节点) 一,js 获取元素(父节点,子节点,兄弟节点) ...
- jquery 获取元素(父节点,子节点,兄弟节点),元素筛选
一, js 获取元素(父节点,子节点,兄弟节点) var test = document.getElementById("test"); var parent = test.p ...
- js|jq获取兄弟节点,父节点,子节点
08.19自我总结 js|jq获取兄弟节点,父节点,子节点 一.js var parent = test.parentNode; // 父节点 var chils = test.childNodes; ...
- javascript 获取HTML DOM父、子、临近节点
在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式.内容等.如何获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有很 ...
- DOM访问关系（父节点 子节点）
把下面的知识点掌握了,可以做一下下面的案例,都是工作中常用的,很有用 知识点 1.带Eleent和不带区别 a)带Element的获取的是元素节点 b)不带Element的获取文本 ...
- jquery 获取元素(父节点,子节点,兄弟节点)
费话不多说,直接上代码jquery 获取元素 $("#test1").parent(); // 父节点 $("#test1").parents(); // 全部 ...
- [extjs] ExtJS4 treepanel 子节点选中父节点自动选中，选中父节点 子节点自动全部选中
ExtJS4 treepanel 主要添加viewConfig重的代码: xtype:'treepanel', store: menuStore, id:'menuTreePanel', viewCo ...
- HTML中DOM元素的子节点为空？！firstChild, lastChild, childeNodes[]为空
- EasyUI：combotree(树形下拉框)复选框选中父节点(子节点的状态也全部选中)输入框中只显示父节点的文本值
参考: https://blog.csdn.net/weixin_43236850/article/details/100320564
- (Elementui) el-tree 中英文过滤以及搜索到父子显示子节点，搜索到子节点显示父节点(filter-node-method)
案例下载:https://gitee.com/tudoumlp/just1.git (vue-ele-demo) 在项目中,会遇到树节点的搜索,中文和英文搜索,以及搜索到父节点匹配的时候同步显示该 ...
随机推荐
- Nowcoder 提高组练习赛-R2
https://www.nowcoder.com/acm/contest/173#question T1:https://www.nowcoder.com/acm/contest/173/A 题意概述 ...
- loli的搜索测试-我真不知道是第多少次了
搜索测试 又到了....并不激动人心的搜索测试时间. 今天和以前还是有一点不一样的,新高二的学长们也参加了(也就是说我们又要被吊打了) 话不多说,看题: fz:填一个5*5的质数方阵,要求每行,每列, ...
- 构造方法、 This关键字 、static、封装
1.1 构造方法 构造方法是一种特殊的方法,专门用于构造/实例化对象,形式: [修饰符] 类名(){ } 构造方法根据是否有参数分为无参构造和有参构. 1.1.1 无参构造 无参构造方法就是构造方法没 ...
- Spark项目之电商用户行为分析大数据平台之（一）项目介绍
一.项目概述 本项目主要用于互联网电商企业中,使用Spark技术开发的大数据统计分析平台,对电商网站的各种用户行为(访问行为.购物行为.广告点击行为等)进行复杂的分析.用统计分析出来的数据,辅助公司中 ...
- C语言程序设计I—第十三周教学
第十二周教学总结(26/11-01/12) 第十三周的教学总结在朋友圈发布了,没有及时在此更新,为了保持教学总结的完整性,现补齐. 今日学院有重大外事活动,所有老师停课参加并且不需要补课,但为了保证我 ...
- day70
昨日回顾:1 虚拟环境 -1 pycharm里创建 -2 用命令串讲2 视图层: 1 Request对象---GET,POST,method,body,FILES,META,path(只是路径),ge ...
- mvc 在view视图中直接输出rdlc报表文件（Excel、PDF、Word）
给一段代码做参考 public ActionResult RdlcReport(string code) { LocalReport localReport = new LocalReport(); ...
- 20155209 Exp5 MSF基础应用
Exp5 MSF基础应用 实验准备 在实验之前,上网搜集了很多有关Metasploit渗透测试的资料.对这次实验影响最大的是一篇最受欢迎的10个Metasploit模块和插件.排名第一位的是MSB-M ...
- 2017-2018-2 20155310『网络对抗技术』Exp5：MSF基础应用
2017-2018-2 20155310『网络对抗技术』Exp5:MSF基础应用 基础问题回答 用自己的话解释什么是exploit,payload,encode exploit:由攻击者或渗透测试者利 ...
- 20155330 《网络攻防》 Exp3 免杀原理与实践
20155330 <网络攻防> Exp3 免杀原理与实践 基础问题回答 杀软是如何检测出恶意代码的? 基于特征码.先对流行代码特征的提取,然后进行程序的比对,如果也检测到相应的特征码的程序 ...