<!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>

    <div id="box">1</div>

    <div id="box">2</div>

    <div id="box">3</div>

    <div class="msg">

        <div class="sbox">

            <h2>三级标题</h2>

            <h2>三级标题</h2>

        </div>

        <h2>二级标题</h2>

        <h2>二级标题</h2>

    </div>

    <div class="cont">4</div>

    <div class="cont">5</div>

    <div class="cont">6</div>

    <span>5</span>

    <span><em>hello</em></span>

    <span>9</span>

    <input type="text" name="user" value="你好">

    <input type="text" name="user">

    <input type="text" name="pass">

</body>

<script>

    // 选择器：

    //     元素节点选择器：

    //          id,class,name,tagname,高级,关系

    // id:返回的是单个对象

     var box = document.getElementById("box");

     console.log(box)   //<div id="box">1</div>

    // class：返回的是数组对象，如果要使用其中的元素，通过索引解析

     var acont = document.getElementsByClassName("cont")

     console.log(acont)//[div.cont, div.cont, div.cont]

     console.log(acont[0])//<div class="cont">4</div> ，返回数组中的单个对象

     console.log(acont[0].innerHTML)//4 返回数组中的单个对象中的值

     console.log(acont.innerHTML) //undefined

    // tagname：返回的是数组对象，如果要使用其中的元素，通过索引解析

     var aspan = document.getElementsByTagName("span")

     console.log(aspan) // [span, span, span],第二个span中有元素，但是在数组只显示一个span

    // name:返回的是数组对象，如果要使用其中的元素，通过索引解析

     var auser=document.getElementsByName("user")

     console.log(auser) //[input, input]

     console.log(auser[0])//<input type="text" name="user">

    console.log(auser[0].value)//你好

    // 高级:ES5新增的

//     querySelector：返回的是单个对象

     var a = document.querySelector("#box")

    console.log(a)  //<div id="box">1</div>

    var b=document.querySelector(".msg")

    console.log(b)//<div class="msg"><div class="sbox"><h2>二级标题</h2><h2>二级标题</h2></div><h2>二级标题</h2><h2>二级标题</h2></div>

     var ele = document.querySelector("span")

    console.log(ele)//<span>5</span>

     var ele = document.querySelector(".msg h2")

    console.log(ele)//<h2>三级标题</h2>

     var ele = document.querySelector(".msg>h2")

    console.log(ele)//<h2>二级标题</h2>

    // querySelectorAll：返回的是数组对象，如果要使用其中的元素，通过索引解析

     var ele = document.querySelectorAll("#box") //[div#box, div#box, div#box]

     var ele = document.querySelectorAll(".cont")// [div.cont, div.cont, div.cont]

     var ele = document.querySelectorAll("span") //[span, span, span]

     var ele = document.querySelectorAll(".msg h2")//[h2, h2, h2, h2]

     var ele = document.querySelectorAll(".msg>h2")//[h2, h2]

     console.log(ele)

    // 关系：

    // 父选子,返回的是数组对象

         var omsg = document.querySelector(".msg");

         console.log(omsg.children);//[div.sbox, h2, h2]

    // 子选父,返回的是单个对象

         var osbox = document.querySelector(".sbox");

          console.log(osbox.parentNode);//<div class="msg"><div class="sbox"><h2>三级标题</h2><h2>三级标题</h2></div><h2>二级标题</h2><h2>二级标题</h2></div>

    // 第一个子,返回的是单个对象

         var omsg = document.querySelector(".msg");

         console.log(omsg.firstElementChild) //<div class="sbox"><h2>三级标题</h2><h2>三级标题</h2></div>

    // 最后一个子,返回的是单个对象

         var omsg = document.querySelector(".msg");

         console.log(omsg.lastElementChild)//<h2>二级标题</h2>

    // 上一个兄弟,返回的是单个对象

         var omsg = document.querySelector(".msg");

        console.log(omsg.previousElementSibling)//<div id="box">3</div>

1    // 下一个兄弟,返回的是单个对象

         var omsg = document.querySelector(".msg");

         console.log(omsg.nextElementSibling)//<div class="cont">4</div>

    //     其他节点选择器：

</script>

</html>

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

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

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

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

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

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

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

  4. CSS选择器之伪类选择器（交互）

    :link 选取未访问链接 :active 选取活动链接(单击某链接,未松开鼠标时). :visited 选取已被访问的链接. :target 链接指定的目标 :hover 当鼠标浮在元素上方时. : ...

  5. jQuery选择器之基本筛选选择器

    <h2>基本筛选器</h2> <h3>:first/:last/:even/:odd</h3> <div class="left&quo ...

  6. DOM基础+domReady+元素节点类型判断

    DOM节点类型  nodeType element  1    Node.ELEMENT_NODE   元素节点 attr  2   Node.ATTRIBUTE_NODE  属性节点 text  3 ...

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

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

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

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

  9. jQuery选择器之基本过滤选择器Demo

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

  10. jquery选择器之内容过滤选择器

    先写出DOM元素的HTML结构: <style type="text/css"> /*高亮显示*/ .highlight{ background-color: gray ...

随机推荐

  1. Zabbix 监控服务介绍

    Zabbix 监控服务介绍 目录 Zabbix 监控服务介绍 一.Zabbix 监控服务介绍 1.1.1 Zabbix 监控服务介绍 1.1.2 如何去做监控 1.13 硬件监控 1.1.4 系统监控 ...

  2. lightgbm与贷款违约预测项目

    lightgbm histogram算法 将连续的浮点值离散成k个离散值,构造宽度为k的histogram leaf-wise生长策略 每次在所有叶子中找到分裂增益最大的一个叶子,一般也是数据量最大的 ...

  3. jmeter dubbo测试

    一.环境准备 1.安装jmeter 2.安装dubbo插件,下载地址jmeter-plugins-dubbo, 将jar包放入${JMETER_HOME}\lib\ext路径下,重启即可 二.添加一个 ...

  4. Vue3引用全局js

    在vue3中引入全局js: 1,创建一个js文件: 2,在main.js中引入该js文件: import comm from './utils/comm' app.config.globalPrope ...

  5. Python调用钉钉群机器人发送群消息

    1.首先需要一个钉钉群,群才有机器人 2.群设置->智能群助手->添加机器人->自定义机器人 3.添加自定义机器人,配置如下:给机器人命名,选择加签.保存机器人的秘钥.Webhook ...

  6. MySQL错误合集

    Error Code: 1052. Column 'Sno' in field list is ambiguous ambiguous意味含糊不清,常见于多个表中有相同名字的属性,在查询时需要分别说明 ...

  7. 数据库ip被锁了怎么办

    由于多次访问失败,导致ip被限制,登录时会报错 Internal error/check (Not system error) 如何解决: 找一台同事的机子,(或者修改自己的ip),然后打开sql 的 ...

  8. 源代码管理工具-Github

    一.实验目的 个人编程:每个开发人员电脑上有自己的代码.硬盘坏了,所有的数据和资料不能找回或是很难复原.安全意识强一些的公司会要求开发人员将代码隔一段时间放到一个集中的计算机上,以日期为文件夹进行备份 ...

  9. 【BFS】算法模板与思路

    1.BFS算法的基础理论是什么? BFS算法名叫宽度优先搜索,虽然我能理解深度优先搜索,但我却不是很能理解宽度优先搜索. 一个很关键的点在于:宽度优先搜索是一个迭代的算法,不是递归的算法. 与DFS之 ...

  10. 【随笔】Tomcat部署图片服务器Server.xml配置记录

    在tomcat应用conf/server.xml文件的标签中添加下面内容: <Service name="imageService"> <!--分配8089端口 ...