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. vue 计算属性实现过滤关键词

    效果 html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...

  2. java_序列化

    import java.io.*; class People implements Serializable { /* * 序列化和反序列化的时候,会抛出就NotSerializableExcepti ...

  3. 锋利的Jquery(p的onclick()事件)

    1.一个p元素的点击事件 <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="serve ...

  4. mysql之备份表和备份数据库

    备份表 1.首先创建一个与原来一样的表 create table score2 like score; ###like就是将score表的结构拷贝过来,但是它并不执行数据:也就是说执行完上面的语句之后 ...

  5. [JZOJ4633] 【GDOI2017模拟7.15】萌萌哒

    题目 描述 题目大意 给你一个数列,接下来有许多个操作,使得区间[l1,r1][l_1,r_1][l1​,r1​]和[l2,r2][l_2,r_2][l2​,r2​]对应的位置染上同样的颜色(使得它们 ...

  6. Datagrip2019本地激活

    一.下载:  https://www.jetbrains.com/zh/datagrip/     下载2019版本的(当前2019.1.2版本) 二.使用方法 1. 先下载压缩包解压后得到jetbr ...

  7. Myeclipse 10使用hibernate生成注解(annotation)实体类

    以MySQL数据库为例,请在数据库里面建好对应的表. 1.配置数据库链接 打开Myelipse Database Explorer视图 Window-->Open Perspective--&g ...

  8. 深入理解JVM（一）类加载器部分、类变量、常量、jvm参数

    类加载概述 在java代码中,类型的加载.连接与初始化过程都是在程序运行期间完成的 类型:class.interface(object本身).类型可在运行期间生成,如动态代理.一种runting概念 ...

  9. 2016 CCPC网络选拔赛 部分题解

    HDU 5832 - A water problem 题意:有两颗星球,一年的长度分别为37天和173天.问第n天时它们是否为新年的第一天. 思路:显然  n 同时被37和173整除时,两种历法都在新 ...

  10. Python学习day34-面向对象和网络编程总结

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...