Dom直接选择器
 <!DOCTYPE html>

 <!--Dom间接选择器-->

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .d1 {

             display: inline-block;

             width:   455px; /*一行4个*/

             margin: auto;

                      }

         .d2{

             width:254px;

             height:160px;

             padding:0px;

             margin:0px;

             border:1px solid;

             background-color:#aaa;

             word-wrap:break-word;

             }

         .d3 {

             display: inline-block;

             width:   310px; /*一行4个*/

             margin: auto;

                      }

     </style>

 </head>

 <body>

     <div class="d1">文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。

     它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。

     我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，

     而不是JavaScript语言规范里的规定的核心内容。</div>

     <div>查找元素</div>

     <div class="d1">

     1、----------------------直接查找-----------------------

         document.getElementById             根据ID获取一个标签

         document.getElementsByName          根据name属性获取标签集合

         document.getElementsByClassName     根据class属性获取标签集合

         document.getElementsByTagName       根据标签名获取标签集合

     </div>

     <div class="d2">

     2、-----------间接查找----------

         parentNode          // 父节点

         childNodes          // 所有子节点

         firstChild          // 第一个子节点

         lastChild           // 最后一个子节点

         nextSibling         // 下一个兄弟节点

         previousSibling     // 上一个兄弟节点

     </div>

     <div class="d3">

         parentElement           // 父节点标签元素

         children                // 所有子标签元素

         firstElementChild       // 第一个子标签元素

         lastElementChild        // 最后一个子标签元素

         nextElementtSibling     // 下一个兄弟标签元素

         previousElementSibling  // 上一个兄弟标签元素

     </div>

     <div class="d2">

         -----------class操作----------

         className                // 获取所有类名

         classList.remove(cls)    // 删除指定类

         classList.add(cls)       // 添加类

     </div>

     <br/>

     <br/>

     <br/>

     <div>  间接查找使用演示实例  </div>

     <br/>

     <br/>

     <br/>

     <div>

         <div></div>

         <div>

             c1

         </div>

     </div>

     <div>

         <div></div>

         <div id="i1">

             c2

         </div>

     </div>

     <div>

         <div></div>

         <div>

             c3

         </div>

     </div>

     <br/>

     <br/>

     <br/>

     <div>  间接查找使用演示结果    .innerHTML  是显示在网页，在审查元素中console不要加  </div>

     <br/>

     <div> 使用审查元素中console</div>

     <div> 根据ID获取一个标签 父节点标签元素  所有子标签元素   上一个兄弟标签元素 </div>

     <script>

         tag =document.getElementById("i1")

         tag.parentElement

         tag.parentElement.children

         tag.parentElement.previousElementSibling

     </script>

 </body>

 </html>

Dom间接选择器

Dom直接选择器的更多相关文章

  1. JavaScript实现DOM对象选择器

    目的: 根据传入的选择器类型选出第一个符合的DOM对象. ①可以通过id获取DOM对象,例如 $("#adom"); ②可以通过tagName获取DOM对象,例如 $(" ...

  2. DOM的选择器

    这几天学习了DOM的选择器,现在来进行一下总结分类. 1.DOM里的元素节点选择器 元素节点选择器包括id,class,name,tagname,高级,关系. 1.1 id选择器 id:返回的是单个对 ...

  3. DOM 的选择器 API

    在刚开始的时候,我们只能用 getElementById,getElementsByClassName,getElementsByTagName 这几个 DOM 方法查找 DOM 树中的元素.后来,在 ...

  4. DOM querySelector选择器

    原生的强大DOM选择器querySelector 在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并 ...

  5. js dom操作选择器，dom操作复习

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Jquery(DOM和选择器)

    O(∩_∩)O~~~,今天简单整理了一下最近所学的Jquery知识.下面就总结一下. 首先,对于Jquery我们需要简单了解下: 1.Jquery是开放源代码的JS库, 2.Jquery操作是函数式编 ...

  7. 前端 Dom 直接选择器

    文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...

  8. JavaScript框架设计(三) push兼容性和选择器上下文

    JavaScript框架设计(三) push兼容性和选择器上下文 博主很久没有更博了. 在上一篇 JavaScript框架设计(二) 中实现了最基本的选择器,getId,getTag和getClass ...

  9. jQuery链式操作如何返回上一级DOM

    有时候我们在链式操作的时候,选择到了其他的DOM进行操作,如何再返回先前的dom呢,有一下几个方法,end(); addBack(); add(); 使用形式 $("#divFather&q ...

随机推荐

  1. Activit单元i测试（与spring集成测试）

    1.测试 eclipse下安装activiti插件以及maven 右键新建activiti project(这时会自动创建pom依赖以及activiti.cfg.xml,但还不是maven项目) 选中 ...

  2. Java开发系列-电子邮箱

    概述 电子邮箱就是在邮箱服务器上开启的一块空间.邮箱服务器就是一个安装在计算机的服务软件,提供有邮件服务. 邮箱的发送流程 现在tom要发送一份邮件给jerry,首先tom将邮件通过客户端连接自己设置 ...

  3. android 使用现成做get请求

    //接受子线程发来的消息 Handler hanler = new Handler() { @Override public void handleMessage(Message msg) { // ...

  4. 使用fileupload实现文件上传

    一. fileupload组件工作原理 先来张图片, 帮助大家理解 fileupload核心API 1. DiskFileItemFactory构造器1) DiskFileItemFactory() ...

  5. SaaS加速器，到底加速了谁？ 剖析阿里云的SaaS战略：企业和ISV不可错过的好文

    过去二十年,中国诞生了大批To C的高市值互联网巨头,2C的领域高速发展,而2B领域一直不温不火.近两年来,在C端流量饱和,B端数字化转型来临的背景下,中国越来越多的科技公司已经慢慢将触角延伸到了B端 ...

  6. php计算网段内所有IP，分配子网段

    由于最近业务需要,写了个获取网段内所有IP的函数,以及分配可用子网段的函数 /** * 根据网段获取计算所有IP * @param string $segment 网段 '139.217.0.1/24 ...

  7. 杂项-SpringBoot-Jasypt：Jasypt（安全框架）

    ylbtech-杂项-SpringBoot-Jasypt:Jasypt(安全框架) 1. 使用jasypt加密Spring Boot应用中的敏感配置返回顶部 1. 本文讲述了在Spring Boot/ ...

  8. 杂项-DTO：DTO（数据传输对象）

    ylbtech-杂项-DTO:DTO(数据传输对象) 数据传输对象(DTO)(Data Transfer Object),是一种设计模式之间传输数据的软件应用系统.数据传输目标往往是数据访问对象从数据 ...

  9. HTML 项目符号

    无序符号 <ul> <li> </li> <li> </li> <li> </li> </ul> 属性 ...

  10. PAT甲级——A1105 Spiral Matrix【25】

    This time your job is to fill a sequence of N positive integers into a spiral matrix in non-increasi ...