<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <span>qwe</span>

    <div class="box"><span>1</span>

        <p>2</p>

        hello

        <!-- 这是注释 -->

        <em>3</em></div>

    <span>zxc</span>

</body>

<script>

     其他节点选择器:

         关系：

         父选子：

             var obox = document.querySelector(".box")

             console.log(obox.childNodes) //) [span, text, p, text, comment, text, em]

         上一个兄弟：

             var obox = document.querySelector(".box")

             console.log(obox.previousSibling)  //#text

         下一个兄弟：

             var obox = document.querySelector(".box")

             console.log(obox.nextSibling)  //#text

         第一个子：

             var obox = document.querySelector(".box")

             console.log(obox.firstChild) //<span>1</span>

         最后一个子：

             var obox = document.querySelector(".box")

             console.log(obox.lastChild) //<em>3</em>

</script>

</html>

空格注释都算节点

DOM选择器之元素其他节点选择器的更多相关文章

  1. DOM选择器之元素选择器

    DOM中元素选择器 在DOM中我们可以将元素选择器分为两类:1.元素节点选择器:2.其它节点选择器.通过选择器选择HTML中的元素以对其进行操作,以此实现用JS对页面的操作. 一.元素节点选择器 1. ...

  2. jQuery选择器之元素选择器

    元素选择器:根据给定(html)标记名称选择所有的元素. 描述: $('element') 搜索指定元素标签名的所有节点,这是一个合集的操作.同样的也有原生方法getElementsByTagName ...

  3. DOM中获取元素的节点兼容IE6-8封装，带jquery源码分析children

    <ul id="box"> <li>第一个节点</li> <li>第二个节点</li> <li>第三个节点& ...

  4. css3类选择器之结合元素选择器和多类选择器

    css3类选择器之结合元素选择器和多类选择器用法: <!DOCTYPE html> <html lang="en"> <head> <me ...

  5. CSS选择器之伪类选择器（伪元素）

    selection [CSS4]应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分).(IE8及以下不支持)(火狐-moz-selection) first-line 选择每个 < ...

  6. CSS选择器之伪类选择器（元素）

    :first-child 选择某个元素的第一个子元素(IE6不支持) :last-child 选择某个元素的最后一个子元素 :first-of-type [CSS3]选择一个上级元素下的第一个同类子元 ...

  7. [javascript]MooTools Selectors(MooTools 选择器) ELEMENT DOM选择

    //ELEMENT DOM选择//on are tag names. //All the divs on the page: $$('div'); //All the divs and paragra ...

  8. 深入学习jQuery选择器系列第五篇——过滤选择器之内容选择器

    × 目录 [1]contains [2]empty [3]parent[4]has[5]not[6]header[7]lang[8]root 前面的话 本文介绍过滤选择器中的内容选择器.内容选择器的过 ...

  9. 深入学习jQuery选择器系列第三篇——过滤选择器之索引选择器

    × 目录 [1]通用形式 [2]首尾索引 [3]奇偶索引[4]范围索引 前面的话 上一篇介绍了过滤选择器中的子元素选择器部分,本文开始介绍极易与之混淆的索引选择器 通用形式 $(':eq(index) ...

  10. jQuery选择器之内容过滤选择器Demo

    测试代码: 04-内容过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

随机推荐

  1. Erlang Mnesia数据库迁移方法

    本文参考https://blog.csdn.net/yangzm/article/details/51686249 需求 因为一些原因,需要把一个Mnesia节点的数据库搬迁到另一个节点,然后弃用原来 ...

  2. Element-ui树形控件el-tree鼠标移入显示隐藏效果超简单

    显示效果: 废话不多说,直接上代码 <template> <el-tree default-expand-all :data="data"> <spa ...

  3. Jmeter一、开源软件的崛起

    一.jmeter自身特点: 1.开源,轻量级,更适合自动化和持续集成. 2.学习难度大. 3.资料少.多英文. 二.性能测试工具选型的原则 1.成本: a.工具成本 b.学习成本 2.通信协议: a. ...

  4. binlog2sql 实战心得

    原创:binlog2sql在GitHub的地址:https://github.com/danfengcao/binlog2sql 作者:danfengcao 功能:从MySQL binlog解析出你要 ...

  5. 本地mysql端口3306 一直干不掉这样解决

    第一步:先whereis   mysql(查找到MySQL的一些本地文件) 主要删除这两个   再干掉端口3306  即可

  6. 20193314白晨阳《Python程序设计》实验四 Python综合实践

    课程:<Python程序设计> 班级: 1933 姓名: 白晨阳 学号:20193314 实验教师:王志强老师 实验日期:2021年6月13日 必修/选修: 公选课 实验内容: Pytho ...

  7. nRF51822蓝牙学习 进程记录 3：蓝牙协议学习--简单使用

    三天打鱼两天晒网,又学起了蓝牙,不过还好的是终于开始学习蓝牙协议部分了. 但是,一看起来增加了蓝牙协议的例程,真是没头绪啊.本身的教程资料解说太差了,看青风的蓝牙原理详解也是一头雾水. 经过不断地看各 ...

  8. 关于ADB命令工具

    android提供了不少命令行工具,方便我们调试和查看信息.下面是frameworks/base/cmds(android 6.0.1)中的命令. $ tree cmds -L 1 cmds am├─ ...

  9. 一起学JAVA：做一个简单的API项目吧（一）

    由于一些特殊原因,最近想要去学习JAVA,了解JAVA ,然后在此之前对JAVA只停留在能读懂代码,但是写不懂的状态,那么最近又很闲,所以打算重新进行一波自己的学习计划,又因为是三分钟的热情,所以特意 ...

  10. ERR Client sent AUTH,but no password is set

    问题产生原因: 就是Redis服务器没有设置密码,但客户端向其发送了AUTH(authentication,身份验证)请求携带着密码,导致报错. 既然是没有设置密码导致的报错,那我们就把Redis服务 ...