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. 分析Hive表和分区的统计信息(Statistics)

    类似于Oracle的分析表,Hive中也提供了分析表和分区的功能,通过自动和手动分析Hive表,将Hive表的一些统计信息存储到元数据中. 表和分区的统计信息主要包括:行数.文件数.原始数据大小.所占 ...

  2. 小米手机 DELETE_FAILED_INTERNAL_ERROR Error while Installing APKs

    手机:小米2s,MIUI 9 7.11.16 开发版 手机已处于开发者模式,启用了USB调试,已使用USB线连接了手机,在Android Studio 工具栏点击 "Run ‘app’(Sh ...

  3. js怎样截取以'-'分割的字符串

    在日期2019-09-01,怎样截取年只要月和日,下面是主要代码 var aa = '2019-09-01'; var bb = aa.split('-'); console.log(bb);//打印 ...

  4. Oracle Database 18c数据库安装步骤

    1.Oracle官网登录下载https://login.oracle.com/mysso/signon.jsp WINDOWS.X64_180000_db_home.zip 2.D盘根目录新建文件夹: ...

  5. STL vector容器需要警惕的一些坑

    从迭代器中取值切记需要判断是否为空 例如: vector<int> vtTest; vtTest.clear(); if (vtTest.empty()){ ; } ]; 如果没有忘了判断 ...

  6. strict

    strict为3.2.3新增连贯操作,用于设置数据写入和查询是否严格检查是否存在字段.默认情况下不合法数据字段自动删除,如果设置了严格检查则会抛出异常. 例如: $model->strict(t ...

  7. 「题解」：[AHOI2013]作业

    问题: 作业 时间限制: 10 Sec  内存限制: 512 MB 题面 题目描述 此时己是凌晨两点,刚刚做了Codeforces的小A掏出了英语试卷.英语作业其实不算多,一个小时刚好可以做完.然后是 ...

  8. window 批量修改或去除文件后缀名

    for /r %i in (*.!ut) do ren "%i" *. 转自:https://blog.csdn.net/zhang_ruisen/article/details/ ...

  9. fiddler报错：creation of the root certificate was not successful 证书安装不成功

    fiddler提示:creation of the root certificate was not successful 证书安装不成功 首先 找到Tools——>Options 在弹出的菜单 ...

  10. 19-11-13-Night-∠

    连夜补博客 ZJ: 看见T1就自闭了.(高考数学)(但是好像不是) 三个暴力就结束了. 35 Miemeng 20 00:00:41 10 00:00:41 10 00:00:41 40 00:00: ...