<!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. python 使用.bat文件自动执行

    @echo off title demo cmd "/c activate py36 && cd demo&& python demo_test.py&quo ...

  2. COCI2012 TOY

    有m种物品,n个箱子之中装着若干物品.问取出一些箱子后,所有m种物品都被选出的方案数. m<=20,n<=106 这道题很妙啊 深刻地利用了容斥 看到n=20,我们就想到了状压和容斥. 怎 ...

  3. libpcap 中调用ctime()时警告提示：

    warning: format ‘%s’ expects argument of type ‘char *’, but argument 2 has type ‘int’ [-Wformat=]    ...

  4. E20171212-hm

    odd   adj. 古怪的; 奇数的; 剩余的; 临时的; odd number 奇数 even adj. 偶数的 even number 偶数

  5. [App Store Connect帮助]六、测试 Beta 版本（3.2）管理测试员：邀请外部测试员

    在您上传至少一个构建版本之后,您可以邀请外部测试员(您组织之外的人员)使用“TestFlight Beta 版测试”来测试您的 App.为了使您的构建版本可用于外部测试,请创建一个群组.添加构建版本, ...

  6. VBNET AutoCAD Activex 切换图层为当前图层失效

    最近有朋友询问切换图层的代码 com切换图层 <CommandMethod("mycl")> Public Sub MySubLayerChange() Dim Thi ...

  7. Windows Server 2008 R2关闭FTP服务

    公司在ZJ的项目给了一台互联网可以访问的测试服务器,但是只给了三个访问端口,而且还做了映射. 映射信息如下:[1050->3389,1051->50000,1053->21] 其中1 ...

  8. PHP定义字符串时单引号和双引号的区别

    一般用单引号或双引号标识一个字符串.单引号串与双引号串,在PHP中的处理是不同的.双引号中的内容可以被解释并被替换,单引号串中的内容则被作为普通字符处理. 例如: $str=6; echo " ...

  9. selenium-server 启动命令

    启动hub主机: java -jar selenium-server-standalone-2.39.0.jar -role hub 启动node 本地:java -jar selenium-serv ...

  10. EasyUI系列学习(六)-Tooltip（提示框）

    一.创建组件 0.Tooltip不依赖其他组件 1.使用class加载 <a href="#" class="easyui-tooltip" title= ...