<!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基础第六天

    一.内容 二.练习 练习1 题目:文件的增删改查 图示: 代码: import os def add(data): content = data[1] # 文件内容 file_name = data[ ...

  2. ibwebrtc-audio-processing-devel

    http://ftp.ussg.iu.edu/cygwin/x86_64/release/webrtc-audio-processing/libwebrtc-audio-processing-deve ...

  3. bzoj 1753: [Usaco2005 qua]Who's in the Middle【排序】

    --这可能是早年Pascal盛行的时候考排序的吧居然还是Glod-- #include<iostream> #include<cstdio> #include<algor ...

  4. bzoj 1707: [Usaco2007 Nov]tanning分配防晒霜【贪心||最大流(?)】

    洛谷上能过的最大流bzoj上T了--但是贪心做法明明在洛谷上比最大流要慢啊--如果是最大流的话就是裸题了吧 说一下贪心,就按照防晒霜排序,然后对每一个防晒霜选一头可以使用的且r最小的牛 就,没了. 贪 ...

  5. [App Store Connect帮助]六、测试 Beta 版本（2）输入测试信息以供外部测试

    如果您向外部测试员分发您的 App,您需要输入关于您 App 的额外 TestFlight 测试信息以供“Beta 版 App 审核”.您可以在添加 App 至您的帐户时,或在您邀请外部测试员时输入此 ...

  6. JS自定义右键菜单案例

    要求:点击页面鼠标右键,阻止默认右键菜单的弹出,并弹出自定义右键菜单. 效果示例: 参考代码: <!DOCTYPE html> <html lang="zh-CN" ...

  7. web界面bug-临时

    一.登录页面 二.首页 三.项目 四.项目池 五.专家管理 六.审批 七.日/周报 八.设置

  8. NPOI 导出Excel 2007, 2013问题

    NPOI默认有两个命名空间HSSF为Excel 2003 版本,若导出2007 及以上后缀名打开excel 则会报错,NPOI也提供了一个07及以上的版本空间XSSF,具体操作列下: NPOI.XSS ...

  9. Js onmouseover和onmouseout小特效

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  10. 微信小程序资料总结

    http://blog.csdn.net/ZCLengendary/article/details/54312030  --添加html标签与处理 https://www.cnblogs.com/HD ...