一、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. Qt 的线程与事件循环

    Qt 的线程与事件循环

  2. CS190.1x-ML_lab4_ctr_student

    这次lab主要主要是研究click-through rate (CTR).数据集来自于Kaggle的Criteo Labs dataset.相关ipynb文件见我github. 作业分成5个部分:on ...

  3. JS 获取每月有几周（每周五到周四算作一周）

    原文地址:https://caochangkui.github.io/data-week/ 将每周五至周四算作一周,计算每月有几周,并获取到每周的起始时间. 日期格式化 Date.prototype. ...

  4. docker之容器数据持久化

    1.挂载本地目录为容器的数据存放目录 [root@node03 ~]# docker run -itd --name web01 -v /container_data/web:/data ubuntu ...

  5. 阿里云ESC入网和出网指的什么

    什么是入网带宽和出网带宽 云服务器 ECS 的入网带宽和出网带宽皆以服务器角度出发.下表给出了入网带宽和出网带宽的具体内容: 带宽类别 (Mbit/s) 描述 入网带宽 流入云服务器 ECS 的带宽从 ...

  6. Accer 4752G添加固态硬盘 双系统

    (此文一直在草稿箱里躺了一年,略作修改后发布~) 背景:电脑是2011年年末买的,用到现在也已经5年多了,好在没坏过什么硬件,有过2年疯狂打LOL的经历,之后电脑就打不动了,FPS始终上不去,启动游戏 ...

  7. Java设置PPT的扇形图，与内嵌Excel联动

    /** * 设置饼图的主方法 * @param slide 图表 * @param index 图标位置 * @param data 需要设置的数据 * @param titles 关联Excel的标 ...

  8. shell实现压缩多个文件

    Linux环境下写一个脚本 从键盘让用户输入几个文件,脚本能够将此几个文件归档压缩成一个文件: 1.首先介绍一下case语句格式 case SWITCH in value1) statement .. ...

  9. 对软件工程Alpha迭代的反思与总结

    对软件工程Alpha迭代的反思与总结 本次软件工程的A轮迭代,我们组出了不小的问题.作为一个团队来说,我们的队伍出现了很严重的状况,严重到让老师觉得我们一度失控.于是我撰写此文,借以反思.总结和提高. ...

  10. [2017BUAA软工助教]个人得分总表（beta阶段）

    一.表 学号 b团队 b团队得分 b贡献分 阅读作业 提问回顾 总分 14011100 hotcode5 228 60 6 7.5 301.5 14061213 PM="PokeMon&qu ...