day15-Dom间接选择器

最新推荐文章于 2018-06-28 16:57:00 发布

weixin_34320159

最新推荐文章于 2018-06-28 16:57:00 发布

阅读量78

点赞数

原文链接：http://www.cnblogs.com/zhangqigao/articles/8127545.html

版权

一、导语

　　之前我们学习过直接选择器，今天我们研究一下间接选择器，通过间接的方法来获取某个标签

二、间接选择器

2.1、间接查找

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>
        c3
    </div>
</body>

1、 parentElement

说明：父节点标签元素

>>tag = document.getElementById("i1")
<div id="i1">
            c2
        </div>
>>tag.parentElement   //父节点标签元素
<div>…</div><div id="i1">
            c2
        </div></div>

2、 children

说明：所有子标签

>>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

说明：上一个兄弟标签元素

>>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操作

className                // 获取所有类名
classList.remove(cls)    // 删除指定类
classList.add(cls)       // 添加类

1、classname

说明：直接对标签整体样式的操作

>>tag = document.getElementById("i1")
<div id="i1">
            c2
        </div>
>>tag.className = "c1"   //修改标签的样式
"c1"
>>tag   //修改后的样式
<div id="i1" class="c1">
            c2
        </div>

2、 classList

说明：返回数据类型的样式，添加和删除某个样式

>>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代码

<div οnclick="函数(参数);"></div>  //点击这个div，就会触发下面js的代码，称为事件

<script>
    function 函数(参数){
　　　　//js代码
　　}
</script>

更多关于DOM操作：猛击这里

转载于:https://www.cnblogs.com/zhangqigao/articles/8127545.html