一、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. python 回溯法 子集树模板 系列 —— 18、马踏棋盘

    问题 将马放到国际象棋的8*8棋盘board上的某个方格中,马按走棋规则进行移动,走遍棋盘上的64个方格,要求每个方格进入且只进入一次,找出一种可行的方案. 分析 说明:这个图是5*5的棋盘. 图片来 ...

  2. xgboost学习与总结

    最近在研究xgboost,把一些xgboost的知识总结一下.这里只是把相关资源作总结,原创的东西不多. 原理 xgboost的原理首先看xgboost的作者陈天奇的ppt 英文不太好的同学可以看看这 ...

  3. tree的使用,显示行号，find命令应用

    第1章 linux启动过程 1.开机自检bios 2.mbr引导 3.GRUB 菜单:选择不同的内核 4.加载内核 5.运行init进程 6.读取/etc/inittab运行级别配置文件 7.执行 / ...

  4. [PLC]ST语言四：INV_MEP_MEF_PLS_PLF_MC_MCR

    一:INV_MEP_MEF_PLS_PLF_MC_MCR 说明:简单的顺控指令不做其他说明. 控制要求:无 编程梯形图: 结构化编程ST语言: (*运算结果的反转INV(EN);*) M415:=in ...

  5. Nuxeo 认证绕过和RCE漏洞分析（CVE-2018-16341)

    简介 Nuxeo Platform是一款跨平台开源的企业级内容管理系统(CMS).nuxeo-jsf-ui组件处理facelet模板不当,当访问的facelet模板不存在时,相关的文件名会输出到错误页 ...

  6. PAT甲题题解-1033. To Fill or Not to Fill (25)-模拟

    模拟先说一下例子,最后为方便起见,在目的地安增加一个费用为0的加油站0 1 2 3 4 5 6 7 87.1 7.0 7.2 6.85 7.5 7.0 7.3 6.0 00 150 200 300 4 ...

  7. Final互评------《飞词》---- 拉格朗日2018

    一.基于NABCD评论作品,及改进建议 1.根据(不限于)NABCD评论作品的选题; N(Need,需求):拉格朗日2018团队对需求分析的做法是通过问卷调查的形式,通过问卷调查分析出目前的大学生群体 ...

  8. 《Linux内核分析》第三周学习笔记

    <Linux内核分析>第三周学习笔记 构造一个简单的Linux系统MenuOS 郭垚 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.stud ...

  9. 《linux内核分析》第六周：分析fork函数对应的系统调用处理过程

    一. 阅读理解task_struct数据结构http://codelab.shiyanlou.com/xref/linux-3.18.6/include/linux/sched.h#1235: 进程是 ...

  10. Linux命令常用

    数据库:查看日志 vim /var/log/mysqld.log