JavaScript12行代码获取相关节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="dv">
    <span>这是div中的第一个span标签</span>

    <p>这是div中的第二个元素,第一个p标签</p>
    <ul id="uu">
        <li>乔峰</li>
        <li>鹿茸</li>
        <li id="three">段誉</li>
        <li>卡卡西</li>
        <li>雏田</li>
    </ul>
</div>
<script src="common.js"></script>
<script>
    //12行代码,都是获取节点和元素的
    //ul
    var ulObj = document.getElementById("uu");
    //父级节点
    console.log(ulObj.parentNode);
    //父级元素
    console.log(ulObj.parentElement());
    //子节点
    console.log(ulObj.childNodes);
    //子元素
    console.log(ulObj.children);

    console.log("===================");

    //第一个子节点
    console.log(ulObj.firstChild);
    //第一个子元素
    console.log(ulObj.firstElementChild);
    //最后一个子节点
    console.log(ulObj.lastChild);
    //最后一个子元素
    console.log(ulObj.lastElementChild);
    //某个元素的前一个兄弟节点
    console.log(my$("three").previousNode());
    //某个元素的前一个兄弟元素
    console.log(my$("three").previousElementSibling);
    //某个元素的后一个兄弟节点
    console.log(my$("three").nextNode());
    //某个元素的后一个兄弟元素
    console.log(my$("three").nextElementSibling);

    /*
    * 总结:凡是获取节点的代码在谷歌和火狐得到的都是======相关节点
    * 凡是获取元素的代码在谷歌和火狐得到的都是=====相关元素
    * 从"======="往后的(从子节点和兄弟节点开始)凡是获取节点的代码在IE8中得到的是元素,
    * 获取元素的相关代码,在IE8中得到的都是undefined------元素的代码,IE8中不支持
    * */
</script>
</body>
</html>

原文地址:https://www.cnblogs.com/cuilichao/p/9374799.html

时间: 2024-10-08 16:29:13

JavaScript12行代码获取相关节点的相关文章

5行代码获取小程序用户的手机号

最近有很多同学有获取小程序用户手机号的需求.其实云开发出现之前我们获取小程序用户的手机号特别繁琐.自从有了云开发,我们获取用户手机号变得非常简单.只需要5行代码即可. 老规矩,我们先来看下效果图 再来看下核心的代码,其实只有下面这一些.甚至可以说核心代码只有上图红色框里的两行.是的,你没听错,只靠这2行代码,就可以轻松的获取用户小程序绑定的手机号.下面我们就来具体讲解吧. 注意:只有企业小程序才可以获取用户手机号,个人小程序没有办法获取的. 一,首先要用到button组件的开发能力 编写wxml

学会python可以上天!20行代码获取斗鱼平台房间数据,就是这么牛逼!

Python(发音:英[?pa?θ?n],美[?pa?θɑ:n]),是一种面向对象.直译式电脑编程语言,也是一种功能强大的通用型语言,已经具有近二十年的发展历史,成熟且稳定.它包含了一组完善而且容易理解的标准库,能够轻松完成很多常见的任务.它的语法非常简捷和清晰,与其它大多数程序设计语言不一样,它使用缩进来定义语句. Python支持命令式程序设计.面向对象程序设计.函数式编程.面向切面编程.泛型编程多种编程范式.与Scheme.Ruby.Perl.Tcl等动态语言一样,Python具备垃圾回收

JavaScript获取相关节点

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="dv"> <span>这是div中的第一个span标签</span> <p>这是div中的第二个元素

Python十几行代码获取db库新增的poc

1.背景介绍 由于项目需要及个人爱好,我每个月都要下载exploit-db库上的压缩包,更新到自己的漏洞平台上.然而,,在以前都是把exploit的整个文件夹通过远程桌面传到服务器上,由于这个文件夹非常的大,导致每次都需要好长时间才能传完,所以,就想着写个脚本光收集上个月新增的poc. 2.利用工具 Python2.7的os和sys库 3.脚本 首先,db库提供了特别便利的方式,它会有一个excel文件存储漏洞信息,包括poc的文件路径,所以,只要把新增的那些信息放在一个txt文本中,再根据路径

神奇的Grails:自关联的树状Domain一行代码获取所有子节点

见证Groovy/Grails的神奇时刻到了,你相信吗?用一行代码就可以获取树状结构中某节点下的所有全部子节点!注意:这个树是无深度限制的.无深度限制这点很重要,如果有限深度的树,那我们也很容易通过层级编码用“Like 001%”方式实现(维护编码也是一个有挑战性活).我们以一个非常常见的“类别”Domain为例,大类分小类,小类再细分,典型的树形结构,看看Grails是如何以简洁的语法表达的,体验Groovy语法的神奇! class Group{ String name static hasM

wordpress可以自定义获取相关文章的代码

将下面的代码插入functions.php中 获取相关文章的策略: 手动指定 > 标签 >分类 > 随机 //相关文章 function add_related_posts($content){ return $content . wp_related_posts(); } add_filter ('the_content', 'add_related_posts'); //hook function wp_related_posts(){ global $post; $num = 5;

5行代码实现1秒内获取一次所有股票的实时分笔数据

5行代码实现1秒内获取一次所有股票的实时分笔数据 前两篇文章分别简单介绍了tushare这个财经数据接口包的使用,用起来很简单顺手,一两句代码就可以获取到你想的要的数据,但是有在群里经常看到说获取数据经常挂,延迟很严重等等,其实那是因为使用者没有好好去领悟和了解工具.片面两篇文章已经对tushare如何获取股票的历史数据和实时数据有过简单的介绍,没看过的朋友可以到微信公众号[数据之佳]点击往期文章就可以查看. 上两篇文章只是向大家介绍了tushare这个工具,相信有不少对量化投资感兴趣,却不知道

第一行代码:以太坊(3)-使用更多的工具编写和测试智能合约

<第一行代码:以太坊>开始连载了 在上文中已经使用了Remix环境运行和测试了本书编写的第一个智能合约程序,不过编写和测试智能合约的测试方式很多,例如,在testrpc环境测试:在Intellij IDEA集成开发环境中用Solidity语言编写智能合约:在纯Web环境中测试智能合约:使用AJAX方式测试智能合约等.本文将详细介绍这些用于编写和测试智能合约的方法. 1.安装本地remix环境(Windows.Mac OS X和Linux) 在本节使用Remix环境运行和测试了Calc智能合约,

用pyquery5行代码爬取百度热点新闻

导读:学习python爬虫很久了,一直习惯于requests抓取+xpath解析的两步走套路,直到我今天发现了pyquery这个爬虫利器后,才意识到python的世界没有最简,只有更简…… 2020-03-06 21:22:12 01 pyquery简介 pyquery是Python的一个第三方爬虫库,仿照 jQuery实现,语法与js十分相像.如果有js基础,那么应用pyquery简直是平步青云.pyquery自带网页解析和信息提取功能,所以应用起来会非常简洁. pyquery安装(要求css