一、Dom间接选择器

　　间接查找的属性　　

parentNode          // 父节点

childNodes          // 所有子节点

firstChild          // 第一个子节点

lastChild           // 最后一个子节点

nextSibling         // 下一个兄弟节点

previousSibling     // 上一个兄弟节点

parentElement           // 父节点标签元素

children                // 所有子标签

firstElementChild       // 第一个子标签元素

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

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

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

　　html代码　　

<body>

    <div>

        <div>c1</div>

    </div>

    <div>

        <div id="i1">c2</div>
　　　　　<div></div>

    </div>

    <div>

        <div>c3</div>

    </div>

</body>

　　1.parentElement

　　父节点标签元素

　　

　　2. children

　　所以子标签

　　

　　3. previousElementSibling

　　前一个兄弟标签元素

　　

二、操作标签

　　1.calss操作　

className                // 获取所有类名

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

classList.add(cls)       // 添加类

　　2.className

　　修改标签class属性

　　

　　3.classList的添加和删除

　　

三、事件

　　当鼠标点击某个标签时，就会触发执行某个js代码　　

<body>

    <div onclick="f1(args);">点击</div>

    <script>

        function f1(args) {

            //js代码

        }

    </script>

</body>

　　

JavaScript--Dom间接选择器的更多相关文章

  1. Dom直接选择器

    Dom直接选择器 <!DOCTYPE html> <!--Dom间接选择器--> <html lang="en"> <head> & ...

  2. JavaScript实现DOM对象选择器

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

  3. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  4. javaScript DOM JQuery AJAX

    http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...

  5. JavaScript Dom 查找

    JavaScript Dom 查找 一.直接查找 获取单个元素 document.getElementById('i1') 获取多个元素(列表数组) document.getElementsByTag ...

  6. JavaScript DOM 对象

    JavaScript DOM 对象   什么叫DOM,DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C ...

  7. 前端基础：JavaScript DOM对象

    JavaScript DOM对象 通过HTML DOM,可以访问JavaScript HTML文档的所有元素. 一.HTML DOM(文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(D ...

  8. Dom-直接 /间接选择器

    Dom:Document Object Model的缩写, 把html转换成了文本对象. 1. 直接选择器 1.直接查找 document.getElementById 根据ID获取一个标签 docu ...

  9. JavaScript DOM 基础操作

    JavaScript DOM 基础操作 一.获取元素的六方式 document.getElementById('id名称') //根据id名称获取 document.getElementsByclas ...

随机推荐

  1. libgdx学习记录21——Box2d物理引擎之碰撞Contact、冲量Impulse、关节Joint

    Box2d中,物体可以接受力(Force).冲量(Impulse)和扭矩(Torque).这些物理元素都能改变物体的运动形式,并且默认都会唤醒物体,当然只是针对动态物体. 力是一个持久的效果,通过Bo ...

  2. 使用 vi/vim 时，粘贴进新创建文件或空文件的首行内容丢失的解决方法

    只需要进入插入模式后,回车空一行或几行,再粘贴,再把上面的几个空行back回去,就不会丢失首行的内容了.

  3. 算法练习-002-返回一个set数组

    题目描述: 写一个函数,它的作用是接受一个整数(假设为num),返回一个数组,数组的长度为num, 数组中的内容为随机的0至(num-1)的值,并且不能重复.比如num为5的话,数组可能是[1,0,3 ...

  4. 程序员大佬推荐的java学习路线

    作为我的第一篇博客,我第一个想到的就是在校时就看到的这篇文章.并且在之后的时间里自己都反复观看过,有时候这不单单是一篇学习路线,也是审视自己技术能力的里程碑,和激励自己的鞭挞绳. 先来个书籍清单: & ...

  5. 浅谈android Service和BroadCastReceiver

    1.题记 Android中的服务和windows中的服务是类似的东西,服务一般没有用户操作界面,它运行于系统中不容易被用户发觉,可以使用它开发如监控之类的程序. 广播接收者(BroadcastRece ...

  6. Unity接SDK通用方法总结

    第一篇博客,回顾接UnitySDK的坑 接SDK主要有两种方式,第三方SDK和手动接(我用的android studio) 首先接触到的SDK就是Facebook-Unity的SDK,主要就是face ...

  7. RYU 灭龙战 fourth day (2)

    RYU 灭龙战 fourth day (2) 前言 之前试过在ODL调用他们的rest api,一直想自己写一个基于ODL的rest api,结果还是无果而终.这个小目标却在RYU身上实现了.今日说法 ...

  8. AD分辨率和精度区别

    最近做了一块板子,当然考虑到元器件的选型了,由于指标中要求精度比较高,所以对于AD的选型很慎重.很多人对于精度和分辨率的概念不清楚,这里我做一下总结,希望大家不要混淆.我们搞电子开发的,经常跟“精度” ...

  9. final阶段140字评论

    按课堂顺序 1约跑APP ,无论从页面还是从功能来看完整度都很高了.演示也用了能展示的方式.多些趣味性就更赞了. 2礼物挑选小工具,做了能在规定时间内的功能.也算是对礼物固话的一个成本最低的回应. 3 ...

  10. JetBrains系列WebStorm等中文输入法无法跟随光标的问题的解决办法

    参考:https://blog.csdn.net/wang414300980/article/details/79537875 电脑配置: 解决这个问题的思路就是修改启动软件的JDK,有以下几个方法: ...