JavaScript-获取当前元素的相关元素或节点--方法总结
1.获取当前元素中的第一个子节点
document.getElementById("uu").firstChild
2.获取当前元素中的第一个子元素
document.getElementById("uu").firstElementChild
3.获取当前元素中的最后一个子节点
document.getElementById("uu").lastChild
4.获取当前元素中的最后一个子元素
document.getElementById("uu").lastElementChild
5.获取当前元素的父级节点
document.getElementById("uu").parentNode
6.获取当前元素的父级子元素
document.getElementById("uu").parentElement
7.获取当前元素的子节点
document.getElementById("uu").childNodes
8.获取当前元素的子元素
document.getElementById("uu").children
9.获取当前元素的前一个兄弟节点
document.getElementById("three").previousSibling
10.获取当前元素的前一个兄弟元素
document.getElementById("three").previousElementSibling
11.获取当前元素的后一个兄弟节点
document.getElementById("three").nextSibling
12.获取当前元素的后一个兄弟元素
document.getElementById("three").nextElementSibling
测试所用代码:
<body>
<div id="dv">
<p>层中的第一个p标签</p>哈哈哈
<span>层中的第二个标签==span</span>
<ul id="uu">嘎嘎
<li>火箭</li>
<li>热火</li>
<li id="three">湖人</li>
<li>小牛</li>
<li>公牛</li>嘿嘿
</ul>
</div>
<script>
function my$(id) {
return document.getElementById(id);
}
</script>
<script>
//获取当前元素中的第一个子节点
console.log(my$("uu").firstChild);
//获取当前元素中的第一个子元素
console.log(my$("uu").firstElementChild);
//获取当前元素中的最后一个子节点
console.log(my$("uu").lastChild);
//获取当前元素中的最后一个子元素
console.log(my$("uu").lastElementChild);
//获取当前元素的父级节点
console.log(my$("uu").parentNode);
//获取当前元素的父级子元素
console.log(my$("uu").parentElement);
//获取当前元素的子节点
console.log(my$("uu").childNodes);
//获取当前元素的子元素
console.log(my$("uu").children);
//获取当前元素的前一个兄弟节点
console.log(my$("three").previousSibling);
//获取当前元素的前一个兄弟元素
console.log(my$("three").previousElementSibling);
//获取当前元素的后一个兄弟节点
console.log(my$("three").nextSibling);
//获取当前元素的后一个兄弟元素
console.log(my$("three").nextElementSibling);
</script>
</body>
JavaScript-获取当前元素的相关元素或节点--方法总结的更多相关文章
- javascript 获取iframe里页面中元素值的方法 关于contentWindow和contentDocumen
javascript 获取iframe里页面中元素值的方法 IE方法:document.frames['myFrame'].document.getElementById('test').value; ...
- javaScript获取文档中所有元素节点的个数
HTML+JS 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- JavaScript获取客户端计算机硬件及系统等信息的方法
JavaScript获取客户端计算机硬件及系统等信息的方法 JavaScript 获取客户端计算机硬件及系统信息 通过WMI来实现获取客户端计算机硬件及系统信息: function getSysInf ...
- Javascript获取数组中的最大值和最小值的方法汇总
比较数组中数值的大小是比较常见的操作,下面同本文给大家分享四种放哪广发获取数组中最大值和最小值,对此感兴趣的朋友一起学习吧 比较数组中数值的大小是比较常见的操作,比较大小的方法有多种,比如可以使用 ...
- JavaScript获取和操作html的元素
#转载请留言联系 1.获取元素 JavaScript的用途就是为了实现用户交互和网页的大部分动画.所以JavaScript常常需要操作html中的元素.要先操作就要先获取过来.JS有几种途径获取元素, ...
- javascript获取随机rgb颜色和十六进制颜色的方法
<div id="console">在线交易平台的成功秘诀:从 Ebay 到 Yelp 到 Uber</div> <script type=" ...
- 整理:Javascript获取数组中的最大值和最小值的方法汇总
方法一: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 //最小值 Array.prototype.min = function ...
- JavaScript 中 Object ,Prototype 相关的属性和方法
span { font-family: 'Consolas'; font-size: 10pt; color: #ffffff; } .sc0 { } .sc2 { color: #c0c0c0; } ...
- [jQuery编程挑战]003 克隆一个页面元素及其相关事件
挑战: a) 绑定一个点击方法到这个div,点击后此元素会淡出消失 b) 同时克隆一个新的div元素到页面,元素内容是前面div文字内容反向书写(即,sgatbg olleh),同样也具有上面的点击事 ...
随机推荐
- 甘特图——Excel搞定
1. 甘特图 概念 甘特图就是条形图的一种. 甘特图是基于作业排序的目的,将活动与时间联系起来的最早尝试之中的一个. 这是什么意思呢?也就是说甘特图用来表示什么时间做什么事情,相当于一个计划安排.并且 ...
- LeetCode(11)题解: Container With Most Water
https://leetcode.com/problems/container-with-most-water/ 题目: Given n non-negative integers a1, a2, . ...
- rpm的gpg key
1 gpg 这是一种公钥.私钥机制. 2 rpm包的格式 rpm包由四部分构成,lead.signature.header和archive构成. 这里的签名(signature)是加密了的,也就是说, ...
- 李雅普诺夫函数 LyapunovFunction 李雅普诺夫意义下的稳定性
https://zh.wikipedia.org/zh-hans/李亞普諾夫函數 李雅普诺夫函数(Lyapunov function)是用来证明一动力系统或自治微分方程稳定性的函数.其名称来自俄罗斯数 ...
- axis、xfire、CXF 、JWS
1.JWS是Java语言对WebService服务的一种实现,用来开发和发布服务.而从服务本身的角度来看JWS服务是没有语言界限的.但是Java语言为Java开发者提供便捷发布和调用WebServic ...
- $.ajax 使用详解
Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作. $.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() ...
- C/S与B/S架构 区别·与优点
C/S和B/S,是再普通不过的两种软件架构方式,都可以进行同样的业务处理,甚至也可以用相同的方式实现共同的逻辑.既然如此,为何还要区分彼此呢?那我们就来看看二者的区别和联系. 一.C/S 架构 1 ...
- 关于UISearchBar
iPhone开发之UISearchBar学习是本文要学习的内容,主要介绍了UISearchBar的使用,不多说,我们先来看详细内容.关于UISearchBar的一些问题. 1.修改UISearchBa ...
- glibc CVE-2015-7547漏洞的分析和修复方法【转】
本文转载自:http://blog.csdn.net/tengxy_cloud/article/details/50764370 漏洞概述 glibc中处理DNS查询的代码中存在栈溢出漏洞,远端攻击者 ...
- DEDE内容页调用栏目的SEO标题、描述、关键字的方法
上篇写了<dedecms栏目页调用栏目关键词.描述的方法>,本章雨田SEOER讲述DEDE内容页调用栏目的SEO标题.描述.关键字的方法内容页调用SEO标题:在<title>& ...