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. Amazon S3和EBS的区别

  2. （转）NodeJS收发GET和POST请求

    NodeJS收发GET和POST请求 目录: 一 express框架接收 二 接收Get 三 发送Get 四 接收Post 五 发送Post 一 express框架接收 1 2 3 4 5 app.g ...

  3. Python基础知识之4——三大控制结构

    控制结构就是控制程序执行顺序的结构. Python 有三大控制结构,分别是顺序结构.分支结构(选择结构)以及循环结构.任何一个项目或者算法都可以使用这三种结构来设计完成.这三种控制结构也是结构化程序 ...

  4. BZOJ1096 [ZJOI2007]仓库建设——斜率优化

    方程: $\Large f(i)=min(f(j)+\sum\limits_{k=j+1}^{i}(x_i-x_k)*p_k)+c_i$ 显然这样的方程复杂度为$O(n^3)$极限爆炸,所以我们要换一 ...

  5. 【默默努力】PixelFire

    先放下我玩游戏的效果图: 关于游戏最后的结束部分其实我还没有截图,看着挺好看的,后面的效果 再放作者大大的项目地址:https://github.com/panruiplay/PixelFire 接下 ...

  6. 【JZOJ3379】查询

    description 对于一个整数序列,查询区间第k大数可以在O(logN)的时间内轻松完成.现在我们对这个问题进行推广. 考虑带重复数的集合(multiset).定义在该类集合上的并操作" ...

  7. thinkphp 模板赋值

    如果要在模板中输出变量,必须在在控制器中把变量传递给模板,系统提供了assign方法对模板变量赋值,无论何种变量类型都统一使用assign赋值. 大理石平台检定规程 $this->assign( ...

  8. 工作中遇到的bug

    1. Error: No PostCSS Config found in.. 在项目根目录新建postcss.config.js文件,并对postcss进行配置: module.exports = { ...

  9. LUOGU P1313 计算系数 (组合数学)

    解题思路 比较简单的题,用二项式定理即可. #include<iostream> #include<cstdio> #include<cstring> #inclu ...

  10. UITableViewCell delete button 上有其它覆盖层

    第一种解决办法: // Fix for iOS7, when backgroundView comes above "delete" button - (void)willTran ...