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-获取当前元素的相关元素或节点--方法总结的更多相关文章

  1. javascript 获取iframe里页面中元素值的方法 关于contentWindow和contentDocumen

    javascript 获取iframe里页面中元素值的方法 IE方法:document.frames['myFrame'].document.getElementById('test').value; ...

  2. javaScript获取文档中所有元素节点的个数

    HTML+JS 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  3. JavaScript获取客户端计算机硬件及系统等信息的方法

    JavaScript获取客户端计算机硬件及系统等信息的方法 JavaScript 获取客户端计算机硬件及系统信息 通过WMI来实现获取客户端计算机硬件及系统信息: function getSysInf ...

  4. Javascript获取数组中的最大值和最小值的方法汇总

    比较数组中数值的大小是比较常见的操作,下面同本文给大家分享四种放哪广发获取数组中最大值和最小值,对此感兴趣的朋友一起学习吧   比较数组中数值的大小是比较常见的操作,比较大小的方法有多种,比如可以使用 ...

  5. JavaScript获取和操作html的元素

    #转载请留言联系 1.获取元素 JavaScript的用途就是为了实现用户交互和网页的大部分动画.所以JavaScript常常需要操作html中的元素.要先操作就要先获取过来.JS有几种途径获取元素, ...

  6. javascript获取随机rgb颜色和十六进制颜色的方法

    <div id="console">在线交易平台的成功秘诀:从 Ebay 到 Yelp 到 Uber</div> <script type=" ...

  7. 整理：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 ...

  8. JavaScript 中 Object ，Prototype 相关的属性和方法

    span { font-family: 'Consolas'; font-size: 10pt; color: #ffffff; } .sc0 { } .sc2 { color: #c0c0c0; } ...

  9. [jQuery编程挑战]003 克隆一个页面元素及其相关事件

    挑战: a) 绑定一个点击方法到这个div,点击后此元素会淡出消失 b) 同时克隆一个新的div元素到页面,元素内容是前面div文字内容反向书写(即,sgatbg olleh),同样也具有上面的点击事 ...

随机推荐

  1. Java核心技术之基本数据类型

    这篇文章.我们讨论一些java的最主要的东西.这些东西我们一般刚刚学java的时候就学过,可是不一定真正明确. 正好,我在做一个读取内存的值,涉及到bit位的值的读取和写.那就能够讨论一个java的基 ...

  2. 机器学习经典算法具体解释及Python实现--K近邻(KNN)算法

    (一)KNN依旧是一种监督学习算法 KNN(K Nearest Neighbors,K近邻 )算法是机器学习全部算法中理论最简单.最好理解的.KNN是一种基于实例的学习,通过计算新数据与训练数据特征值 ...

  3. 将异常(getStackTrace)转化成String

    方法一: private static String getStackMsg(Exception e) { StringBuffer sb = new StringBuffer(); StackTra ...

  4. python模拟登陆discuz论坛

    #! /usr/bin/env python # -*- coding: utf-8 -*- import urllib2, urllib, cookielib, re, time class Rob ...

  5. HDU3667 Transportation —— 最小费用流（费用与流量平方成正比）

    题目链接:https://vjudge.net/problem/HDU-3667 Transportation Time Limit: 2000/1000 MS (Java/Others)    Me ...

  6. Oracle备份与恢复：冷备份恢复

    模拟数据库数据文件丢失的情况下,通过丢失之前的数据文件物理备份做恢复: 说明:数据文件丢失前一刻的所有归档日志都存在. 环境:oracle10g +rhel5 1.关闭数据库,copy system0 ...

  7. WAS域名解析问题

    1.如果dmgr和his在一台机器上,但web服务器用的是app服务器 如下图: 插件都处理完成. 这时候,通过外网域名访问时,出现如下情况 或者 说明:ihs服务器上webserver1的文件Plu ...

  8. nyoj--86--找球号(一）(hash&&set&&二分)

    找球号(一) 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描述 在某一国度里流行着一种游戏.游戏规则为:在一堆球中,每个球上都有一个整数编号i(0<=i<=10 ...

  9. LA-4726 (斜率优化+单调队列)

    题意: 给定一个01序列,选一个长度至少为L 的连续子序列使其平均值最大;输出这个子序列的起点和终点;如果有多个答案,输出长度最小的,还有多个就输出第一个编号最小的; 思路: 用sum[i]表示[1, ...

  10. LA-3905 (扫描线)

    题意: 给一些流星的初始位置和运动向量,给了相机的拍摄范围;问你最多能拍到多少颗流星; 思路: 将流星用出现在相机拍摄范围内的时间段表示;sort后在扫面端点更新最大值; Ac代码: #include ...