day15-JavaScript Dom间接选择器
一、导语
之前我们学习过直接选择器，今天我们研究一下间接选择器，通过间接的方法来获取某个标签
二、间接选择器
2.1、间接查找
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
parentNode // 父节点childNodes // 所有子节点firstChild // 第一个子节点lastChild // 最后一个子节点nextSibling // 下一个兄弟节点previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素children // 所有子标签firstElementChild // 第一个子标签元素lastElementChild // 最后一个子标签元素nextElementtSibling // 下一个兄弟标签元素previousElementSibling // 上一个兄弟标签元素 |
操作的html内容如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<body> <div> <div> c1 </div> </div> <div> <div id="i1"> c2 </div> </div> <div> c3 </div></body> |
1、 parentElement
说明：父节点标签元素
|
1
2
3
4
5
6
7
8
|
>>tag = document.getElementById("i1")<div id="i1"> c2 </div>>>tag.parentElement //父节点标签元素<div>…</div><div id="i1"> c2 </div></div> |
2、 children
说明：所有子标签
|
1
2
3
4
5
6
7
8
9
10
|
>>tag = document.getElementById("i1")<div id="i1"> c2 </div>>>tag.parentElement<div>…</div><div id="i1"> c2 </div></div>>>tag.parentElement.children // 所有子标签HTMLCollection [div#i1, i1: div#i1] |
3、 previousElementSibling
说明：上一个兄弟标签元素
|
1
2
3
4
5
6
7
8
9
10
11
12
|
>>tag = document.getElementById("i1")<div id="i1"> c2 </div>>>tag.parentElement<div>…</div><div id="i1"> c2 </div></div>>>tag.parentElement.previousElementSibling //上一个兄弟标签元素<div>…</div><div> c1 </div></div> |
三、 操作标签
3.1、class操作
|
1
2
3
|
className // 获取所有类名classList.remove(cls) // 删除指定类classList.add(cls) // 添加类 |
1、classname
说明：直接对标签整体样式的操作
|
1
2
3
4
5
6
7
8
9
10
|
>>tag = document.getElementById("i1")<div id="i1"> c2 </div>>>tag.className = "c1" //修改标签的样式"c1">>tag //修改后的样式<div id="i1" class="c1"> c2 </div> |
2、 classList
说明：返回数据类型的样式，添加和删除某个样式
|
1
2
3
4
5
6
7
8
|
>>tag.classList //以数组的方式列举出所有的样式DOMTokenList ["c2", value: "c2"]0: "c2"length: 1value: "c2"__proto__: DOMTokenList>>tag.classList.add("c1") //添加某个样式undefined>>tag //添加后的样式<div id="i1" class="c2 c1"> c2 </div> |
四、事件
说明：当鼠标一点击某个标签的时候，就会触发执行某个js代码
|
1
2
3
4
5
6
7
|
<div onclick="函数(参数);"></div> //点击这个div，就会触发下面js的代码，称为事件<script> function 函数(参数){ //js代码 }</script> |
更多关于DOM操作：猛击这里
浙公网安备 33010602011771号