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) 在项目中,会遇到树节点的搜索,中文和英文搜索,以及搜索到父节点匹配的时候同步显示该 ...
随机推荐
- [2018-12-15] Hello World！
这个blog以后就用来发oi相关的算法与数据结构了 还可能想学习一点web前端的知识和一些与计算机有关的软件和技术 可能有空大概会试试搭建blog以及一些各种软件和c++以外的玩意
- Android--------TabLayout实现新闻客户端顶部导航栏
APP市场中大多数新闻App都有导航菜单,导航菜单是一组标签的集合,在新闻客户端中,每个标签标示一个新闻类别,对应下面ViewPager控件的一个分页面,今日头条, 网易新闻等. 随着版本迭代的更新, ...
- win10管理员已阻止你运行此应用”解决方法
方法/步骤 1 按WIN+R键,打开“运行”,然后输入“gpedit.msc",就是打开组策略,这个在控制面板中也可以打开. 2 在组策略里找到“计算机配置”-“Windows设置”-“安全 ...
- 编写陈旭,实现通过字符型变量创建boolean值,再将其转换为字符串输出,观察输出后的字符串与创建Boolean对象时给定的参数是否相等.
主要涉及到基本数据类型与包装类的转换. Boolean类的tostring方法的作用,返回一个表示该布尔值的 String 对象 public class Test1 { public static ...
- window.location对象详解
window.location.href(当前URL) 结果如下: http://www.myurl.com:8866/test?id=123&username=xxx window.loca ...
- DB2 substr,instr使用
看示例,查询下一年'2xxx',例如今年2014,结果为2015 select substr(char(current timestamp),1,4)+1 from SYSIBM.SYSDUMMY1; ...
- MVC的BundleConfig类
在BundleConfig.cs文件中,包含了一些应用程序中使用的脚本和样式表的文件路径.并可以使用通配符.示例如下: using System.Web; using System.Web.Optim ...
- odoo开发思路篇
1.首先从客户那了解需求,知道他现有系统所能实现的功能,现在要求要实现的功能,至于怎样实现由我们自己去定.(拿到需求------->了解需求功能--------->自己实现的方法) 2.在 ...
- Exp9 20155218 Web安全基础实践
Exp9 Web安全基础实践 1.实验环境配置: 1.在命令行里执行:java -jar webgoat-container-7.1-exec.jar运行WebGoat,文件夹里明明有了,但是没成功: ...
- CF434D Nanami's Power Plant
就是切糕那道题,首先对每个函数连一串,然后\(x_u\leq x_v+d\)这个条件就是\(u\)函数\(i\)取值连向\(v\)函数\(i-d\)取值边权为inf,然后答案就是最小割了. #incl ...