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) 在项目中,会遇到树节点的搜索,中文和英文搜索,以及搜索到父节点匹配的时候同步显示该 ...
随机推荐
- [Luogu 3707] SDOI2017 相关分析
[Luogu 3707] SDOI2017 相关分析 前言 Capella 和 Frank 一样爱好天文学. 她常在冬季的夜晚,若有所思地望着东北方上空的五边形中,最为耀眼的一个顶点. 那一抹金黄曾带 ...
- python-json模块扩展
sort_keys=True, indent=4, separators=(',', ': ') 格式 json.dumps(response,sort_keys=True, indent=4, se ...
- Cannot find module '../lib/utils/unsupported.js'
运行npm run clean出错: throw err; ^ Error: Cannot find module '../lib/utils/unsupported.js' at Function. ...
- 如何快速找到某个研究领域的所有SCI期刊
https://www.toutiao.com/a6624332265285485060/?tt_from=dingtalk&utm_campaign=client_share&tim ...
- Codeforces round 1111
CF Div 2 537 比赛链接 感觉题目难度OK,五个题都能做,后俩题考察人的翻译水平... 另外,$Claris$太强了... A 直接按照题意模拟,不知道为啥有人会被× 代码: #includ ...
- 大数据入门第十二天——azkaban入门
一.概述 1.azkaban是什么 通过官方文档:https://azkaban.github.io/ Azkaban is a batch workflow job scheduler create ...
- 20155210 Exp8 WEB基础实践
Exp8 WEB基础实践 Apache环境配置 apache是kali下的web服务器,通过访问ip地址+端口号+文件名称可以打开对应的网页. 输入命令vi /etc/apache2/ports.co ...
- 20155223 Exp6 信息收集与漏洞扫描
20155223 Exp6 信息收集与漏洞扫描 本次实验以熟悉信息收集手段与漏洞扫描手段为主. 实践步骤 whois域名查找 在虚拟机Kali的终端输入命令:whois baidu.com,查询百度的 ...
- 20155304《网络对抗》Exp8 Web基础
20155304<网络对抗>Exp8 Web基础 实践要求 (1).Web前端HTML 能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的H ...
- Luogu P1113 杂务
终于没有打模板题了. 一道简单的拓扑题目(但记得以前第一次做的时候爆0了). 发现这个做事的过程是按一定顺序的,然后如果一个工作的前面没有任何事情的话,它一定先被完成(如果不的话就不能使时间最小化,其 ...