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. js input框限制输入为数字并限制长度

    <input type="number" name="price" id="priceVal" placeholder="请 ...

  2. SQL中的左连接与右连接,内连接有什么不同

    SQL中的左连接与右连接,内连接有什么不同 我们来举个例子.天庭上面有一个管理系统:管理系统有个主表:主表记录着各个神仙的基本信息(我们把它当成表A).还有个表记录着他们这个神仙的详细信息(我们把它当 ...

  3. JS规则 我与你同在(逻辑与操作符）数学中的“b大于a，b小于c”是“a<b<c”，那么在JavaScript中可以用&&表示

    我与你同在(逻辑与操作符) 数学里面的"a>b",在JavaScript中还表示为a>b:数学中的"b大于a,b小于c"是"a<b& ...

  4. JavaScript数组的2种定义方式

    JavaScript中没有数组类型,JavaScript中数组是以内置对象的形式存在的. 数组是存储多个值的集合(仓库). JS中定义数组的2种方式: 1.使用new Array()构造函数定义数组 ...

  5. 分享一个现代的，免费的，简单而有效的编辑器Vis

    Vis是一个免费的开源,类似Vi的代码编辑器,它扩展了vi的模态编辑,内置支持使用相同编辑器的基于结构正则表达式的命令语言实现的多个游标/选择.并将其与基于sam结构正则表达式的命令语言相结合. Vi ...

  6. csps模拟69chess,array,70木板,打扫卫生题解

    题面:https://www.cnblogs.com/Juve/articles/11663898.html 69: 本以为T2傻逼题结果爆零了...T3原题虽然打的不是正解复杂度但是都不记得做过这道 ...

  7. TCP/IP四层模型和OSI七层模型（模型分层的作用是什么）

    TCP/IP四层模型和OSI七层模型的概念(模型分层的作用是什么) 一.总结 一句话总结: 减轻问题的复杂程度,一旦网络发生故障,可迅速定位故障所处层次,便于查找和纠错: 在各层分别定义标准接口,使具 ...

  8. Android基础控件ListView和自定义BaseAdapter适配器

    1.简介 ListView用于列表显示,相当于OC中的TableView,和适配器一块使用,相关属性: footerDividersEnabled:是否在footerView(表尾)前绘制一个分隔条, ...

  9. robocopy——Windows下的高效文件拷贝

    1. 基本用法 C:\Users\>RoboCopy /? ------------------------------------------------------------------- ...

  10. css3之文本text-overflow 与 word-wrap, word-break

    CSS3 Text Overflow属性 CSS3文本溢出属性指定应向用户如何显示溢出内容 语法: text-overflow:clip | ellipsis 但是text-overflow只是用来说 ...