<!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. bzoj 1704: [Usaco2007 Mar]Face The Right Way 自动转身机【贪心+差分】

    首先O(n^3)的贪心很好想,就是枚举k然后从前往后扫,扫到反就翻转区间 然后考虑优化掉翻转区间维,就是搞成差分的形式,在翻转区间的尾部打上标记,再用一个变量维护当前的翻转次数,加到当前状态上来判断是 ...

  2. VUE中全局变量的定义和使用

    目录 VUE中全局变量的定义和使用 1.工作中遇到的两类问题 1.1 状态值(标志) 1.2 传递字段 2.解决方法 2.1 VUEX 2.2 使用全局变量法管理状态与字段值 3.具体实现 3.1创建 ...

  3. Linux 搭建Discuz论坛

    title: Linux 搭建Discuz论坛 Welcome to Fofade's Blog! 这里是Linux 搭建论坛的一些命令记录 命令摘记: 下载文件:Discuz 安装环境:PHP Ap ...

  4. 服务器出现 nginx 502 Bad Gateway

    发生原因1.PHP FastCGI进程数不够用 当网站并发访问巨大时,php fastcgi的进程数不有一定的保障,因为cgi是单线程多进程工作的,也就是说cgi需要处理完一个页面后再继续下一个页面. ...

  5. [C陷阱和缺陷] 第1章 词法“陷阱”

    有感自己的C语言在有些地方存在误区,所以重新仔细把"C陷阱和缺陷"翻出来看看,并写下这篇博客,用于读书总结以及日后方便自身复习. 第1章 词法"陷阱" 1.1 ...

  6. [Usaco2018 Open]Disruption

    Description Farmer John自豪于他所经营的交通发达的的农场.这个农场是由N块牧场(2≤N≤50,000)组成的,N-1条双向道路将它们连接起来,每一条道路的都为一单位长度.Farm ...

  7. 64位linux安装wine等软件

    我的系统是centos7 64位的,安装wine的时候以为和32位的一样,结果执行./configure的时候,出现错误(无法建立一个32位程序,您需要安装32位的开发库) configure: er ...

  8. RabbitMQ三：Rabbit的安装

    本章文章,摘自 园友 章为忠 的文章,查找了很多资料,他总结的最细,最全面,我就直接拿过来了 他的原文 http://www.cnblogs.com/zhangweizhong/p/5689209.h ...

  9. centos源码编译安装nginx过程记录

    前言:Centos系统编译安装LNMP环境是每来一台新服务器或换电脑都需要做的事情.这里仅做一个记录.给初学者一个参考! 一.安装前的环境 这里用的是centos 7系统. 我们默认把下载的软件放在 ...

  10. P2668 斗地主 dp+深搜版

    题目描述 牛牛最近迷上了一种叫斗地主的扑克游戏.斗地主是一种使用黑桃.红心.梅花.方片的A到K加上大小王的共54张牌来进行的扑克牌游戏.在斗地主中,牌的大小关系根据牌的数码表示如下:3<4< ...