<!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. ZOJ 3955 Saddle Point 校赛 一道计数题

    ZOJ3955 题意是这样的 给定一个n*m的整数矩阵 n和m均小于1000 对这个矩阵删去任意行和列后剩余一个矩阵为M{x1,x2,,,,xm;y1,y2,,,,,yn}表示删除任意的M行N列 对于 ...

  2. sql复杂查询语句总结

    转自:http://blog.csdn.net/fengfeng91/article/details/15029173 create table student( sno varchar2(10) p ...

  3. Git简介（转载）

    转自:http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/00137396284551 ...

  4. May Challenge 2019 Division 2 水题讲解

    Reduce to One 这题其实蛮水的? 题意就是说: 给定一个 1~n 的序列,每次挑两个数 x y 合并,合并值为 \(x+y+xy\) ,然后求不断合并最后剩下的一个的最大值 随便搞搞发现答 ...

  5. [BZOJ5109/CodePlus2017]大吉大利，晚上吃鸡！

    Description 最近<绝地求生:大逃杀>风靡全球,皮皮和毛毛也迷上了这款游戏,他们经常组队玩这款游戏.在游戏中,皮皮和毛毛最喜欢做的事情就是堵桥,每每有一个好时机都能收到不少的快递 ...

  6. G - And Then There Was One （约瑟夫环变形）

    Description Let’s play a stone removing game. Initially, n stones are arranged on a circle and numbe ...

  7. 转 linux shell自定义函数(定义、返回值、变量作用域)介绍

    linux shell 可以用户定义函数,然后在shell脚本中可以随便调用.下面说说它的定义方法,以及调用需要注意那些事项. 一.定义shell函数(define function) 语法: [ f ...

  8. Ajax动态加载数据

    前言: 1.这个随笔实现了一个Ajax动态加载的例子. 2.使用.net 的MVC框架实现. 3.这个例子重点在前后台交互,其它略写. 开始: 1.控制器ActionResult代码(用于显示页面) ...

  9. IntelliJ IDEA jrebel 实现热部署

    前提是能够访问登陆Facebook,有Facebook的账号(我注册了一个) 点击:https://my.jrebel.com 用Facebook登陆  之后按要求填写信息 然后获取激活码 打开 id ...

  10. Table标题行冻结，数据行滚动的一种方式

    这段时间在做Table标题行冻结,数据行滚动,虽然能实现,但也遇到一些问题,记录下来. 首先说说实现,实现其实不难,估计很多人都能想象出来,那就是标题行与内容行分离.我是这么做的,用两个表格,一个只有 ...