<!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. win10下 pytorch 跑模型 gpu利用率低

    查阅资料后发现 Dataloader中的num_workers参数(线程数)设置为0,该为4后,nvidia-smi查看GPU占用率变为高(不要用任务管理器查看)

  2. 2022-07-11 第一小组 张明旭 前端JS学习记录

    今天是正式学习的第三天,每天一大部分前端的新知识,吐瘦两斤,听课晕乎乎的.不过小事,靠笔记和视频苟活 知识点: JavaScript是什么? 编程语言.脚本语言.依赖于某种容器(浏览器)运行 有浏览器 ...

  3. Ubuntu22.04 KubeSphere 安装K8S集群

    Ubuntu22.04 KubeSphere 安装K8S集群_Ri0n的博客-CSDN博客 一.系统环境系统:Ubuntu 22.04集群IP分布hostname 角色 IP地址master mast ...

  4. scala概述入门和项目创建

    1.scala简介 (1).scala基于JVM,与JAVA完全兼容,具有跨平台.可移植性好.方便的垃圾回收等特性: (2).scala比JAVA更加面向对象: (3).scala是一门函数式编程语言 ...

  5. ssh免密码登录服务器

    A机为本地主机(即用于控制其他主机的机器) B机为远程主机(即被控制的机器server)B机:192.168.3.145 假如A机无密码登录B机器     A机上的命令: 1,ssh-keygen - ...

  6. UEC++学习(1)

    第三章 流程控制 第一节 C++和蓝图循环 ForLoop蓝图节点相当于C++中的for循环,ForeLoopWithBreak节点相当于for循环体中加了break语句,当触发某个条件时直接结束. ...

  7. python开头

    python识别的正则模式 coding[:=]\s*([-\w.]+)#coding:utf8   ???不要用 #coding=utf-8#coding:utf-8# -*- coding: ut ...

  8. PHP递归的简单理解

    递归简单来说就是自己调用自己 比如说 A向B问路 但是B不知道 于是乎B问C 但是C不知道 于是乎问D D知道 D把怎么走告诉C C在把怎么走告诉B B再把怎么走告诉A A虽然是最先问的 但是是最后一 ...

  9. ARM-linux的Windows交叉编译环境搭建

    交叉编译Arm Linux平台的QT5库 1.准备交叉编译环境 环境说明:Windows10 64位 此过程需要: (1)Qt库开源代码,我使用的是5.13.0版本: (2)Perl语言环境5.12版 ...

  10. JavaScript 函数的方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...