JavaScript--Dom间接选择器
一、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间接选择器的更多相关文章
- Dom直接选择器
Dom直接选择器 <!DOCTYPE html> <!--Dom间接选择器--> <html lang="en"> <head> & ...
- JavaScript实现DOM对象选择器
目的: 根据传入的选择器类型选出第一个符合的DOM对象. ①可以通过id获取DOM对象,例如 $("#adom"); ②可以通过tagName获取DOM对象,例如 $(" ...
- 读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- javaScript DOM JQuery AJAX
http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...
- JavaScript Dom 查找
JavaScript Dom 查找 一.直接查找 获取单个元素 document.getElementById('i1') 获取多个元素(列表数组) document.getElementsByTag ...
- JavaScript DOM 对象
JavaScript DOM 对象 什么叫DOM,DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C ...
- 前端基础：JavaScript DOM对象
JavaScript DOM对象 通过HTML DOM,可以访问JavaScript HTML文档的所有元素. 一.HTML DOM(文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(D ...
- Dom-直接 /间接选择器
Dom:Document Object Model的缩写, 把html转换成了文本对象. 1. 直接选择器 1.直接查找 document.getElementById 根据ID获取一个标签 docu ...
- JavaScript DOM 基础操作
JavaScript DOM 基础操作 一.获取元素的六方式 document.getElementById('id名称') //根据id名称获取 document.getElementsByclas ...
随机推荐
- MiZ702学习笔记11——如何使用vivado isim仿真
说到vivado的仿真确实是很有意思,不管是ISE还是Quartus都可以自己自动生成测试平台的完整构架,但是vivado不行,所有的测试代码自己写!(我反正是查了好久,都没发现vivado如何自动生 ...
- libgdx学习记录13——矩形CD进度条绘制
利用ShapeRenderer可进行矩形进度条的绘制,多变形的填充等操作. 这是根据角度获取矩形坐标的函数. public Vector2 GetPoint( float x, float y, fl ...
- 使用 restTemplate 实现get/post 请求
get 请求(这里是在 idea 的 test包中,所以需要直接 new RestTemplate() ) 即:RestTemplate restTemplate = new RestTemplate ...
- SpringBoot配置Aop笔记【例子】
众所周知,spring最核心的两个功能是aop和ioc,即面向切面,控制反转.这里我们探讨一下如何使用spring aop. 1.何为aop aop全称Aspect Oriented Programm ...
- Asp.Net_<asp:RadioButtonList
<asp:RadioButtonList runat="server" ID="RadioButtonList1" RepeatDirection ...
- Js_网站右下角悬浮视窗可关闭广告
站右下角悬浮视窗可关闭广告代码,可收缩.展开,关闭,内容区可自定义html,兼容IE8+.FireFox.Chrome.Safari等主流浏览器.广告图片尺寸300x250. 使用方法:在head区域 ...
- 吉他软件Guitar Pro播放无声音的解决方法
系统环境:适用于Windows操作系统和macOS的Guitar Pro . 问题表现:已成功安装Guitar Pro ,但用Guitar Pro 播放时没有任何声音或播放失真. 解决方案:首先确保安 ...
- openstack horizon 开发第二天
依照上次的简单的仪表盘添加动作额外添加或修改的文件mydashboard/├── mypanel│ ├── forms.py│ ├── tables.py│ ├── templates│ ...
- 基于tensorflow2.0 使用tf.keras实现Fashion MNIST
本次使用的是2.0测试版,正式版估计会很快就上线了 tf2好像更新了蛮多东西 虽然教程不多 还是找了个试试 的确简单不少,但是还是比较喜欢现在这种写法 老样子先导入库 import tensorflo ...
- 了不起的Node.js--之五 TCP连接
TCP连接 传输控制协议(TCP)是一个面向连接的协议,它保证了两台计算机之间数据传输的可靠性和顺序. TCP是一种传输层协议,它可以让你将数据从一台计算机完整有序地传输到另一台计算机. Node.j ...