<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div>

        <div>c1</div>

        <div>c2</div>

        <div>c3</div>

        <div>c4</div>

    </div>

    <div>

        <div >bnkjgjguigi

           <div id="i1">

               b1

           </div>

        </div>

    </div>

    <div>

        <div>

            <div>a1</div>

        </div>

    </div>

</body>

<script>

    //获取标签的父级标签

    var tag=document.getElementById('i1');

    //找到父级标签

    var father=tag.parentNode;

    //添加一个class

    father.className='c2';

    //添加一个class

    father.classList.add('c3');

    console.log(father);

    //移除一个class

    // father.classList.remove('c3');

    // console.log(father);

    /*

    //W3C标准

    parentNode          // 父节点

    childNodes          // 所有子节点

    firstChild          // 第一个子节点

    lastChild           // 最后一个子节点

    nextSibling         // 下一个兄弟节点

    previousSibling     // 上一个兄弟节点

    //只支持IE

    parentElement           // 父节点标签元素

    children                // 所有子标签

    firstElementChild       // 第一个子标签元素

    lastElementChild        // 最后一个子标签元素

    nextElementtSibling     // 下一个兄弟标签元素

    previousElementSibling  // 上一个兄弟标签元素

     */

</script>

</html>

　　

js之DOM间接操作的更多相关文章

  1. js的DOM对象

    1.js的Array对象           ** 创建数组(三种)                          - var arr1 = [1,2,3];                    ...

  2. python学习笔记十三 JS，Dom（进阶篇）

    JS介绍 JavaScript 是属于网络的脚本语言!JavaScript 被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用:JavaScript 是因特网上最流 ...

  3. 框架操作DOM和原生js操作DOM比较

    问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...

  4. JavaScript基础15——js的DOM对象

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. jQuery对象与JS原生dom对象之间的转换

    jQuery就是JS的一个扩展库,工具库,提供很多方便快捷的方法,所以将JS对象转换为jQuery对象后,能更方便地操作这个对象.但是jQuery对象也不是万能的,有一些JS对象有的能,jQuery对 ...

  6. JS1 js获取dom元素方法

     js获取dom元素方法  1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId")         其 ...

  7. JS的DOM操作及动画

    JS的DOM操作DOM:Document Object ModelBOM:Bowers(浏览器) Object Model找到元素:var a=document.getElementById(&quo ...

  8. js操作DOM对象

    js操作DOM对象  (Document Object Model)文档对象模型 nodeType返回值 1:元素节点 2:属性节点 3:文本节点 8:注释节点 9: 文档节点 nodeName 节点 ...

  9. DOM是什么？有什么用处？js与DOM啥关系？

    本文转载于:https://blog.csdn.net/u012155729/article/details/78135393 转载仅供自己后期学习 DOM简介大家都想知道dom是什么,翻了各种文档, ...

随机推荐

  1. luogu 3388 【模板】割点（割顶）

    点双. #include<iostream> #include<cstdio> #include<cstdlib> #include<cstring> ...

  2. ModuleNotFoundError: No module named 'PIL'

    错误:ModuleNotFoundError: No module named 'PIL' 解决办法: pip install Pillow

  3. 数据仓库 VS 数据库

    数据仓库(Data Warehouse)是一个面向主题的(Subject Oriented).集成的(Integrate).相对稳定的(Non-Volatile).反映历史变化(Time Varian ...

  4. emma中文显示乱码问题解决

    在Linux中如果使用mysql的图形客户端,个人感觉Emma还不错.但是emma默认用apt-get 安装的话,emma是不支持中文的,这个需要自己修改一下了配置文件,或者直接修改emma程序源文件 ...

  5. Java并发编程系列之CyclicBarrier详解

    简介 jdk原文 A synchronization aid that allows a set of threads to all wait for each other to reach a co ...

  6. 读懂mysql慢查询日志

    我们来看一下如何去读懂这些慢查询日志.在跟踪慢查询日志之前,首先你得保证最少发生过一次慢查询.如果你没有可以自己制造一个:root@server# mysql -e 'SELECT SLEEP(8); ...

  7. LOJ#503. 「LibreOJ β Round」ZQC 的课堂（容斥+FHQTreap）

    题面 传送门 题解 首先\(x\)和\(y\)两维互相独立,可以分开考虑,我们以\(x\)为例 我们把\(x\)做个前缀和,那么就是问有多少\(i\)满足\(s_is_{i-1}<0\),其中\ ...

  8. Python之列表生成式、生成器

    列表生成式 ——可以快速生成list,可以通过一个list推导出另一个list,而代码却十分简洁: >>> [x * x for x in range(1, 11)] [1, 4, ...

  9. 题解报告：poj 2386 Lake Counting（dfs求最大连通块的个数）

    Description Due to recent rains, water has pooled in various places in Farmer John's field, which is ...

  10. javascript学习之Date对象

    前几天学习了一下date对象,于是写了一个简单的时间显示放到博客页面里(位于右上角),类似这样的效果,时:分:秒 xxxx年xx月xx日. 下面来说一下具体实现步骤. 首先,既然date是一个对象,那 ...