<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">

        function getDom01(){
            //var divs = document.querySelectorAll("#box > div");
            //var div = document.querySelector("#box1");
            //得到子节点  和父节点
            //得到父节点  level by level
            var div = document.getElementById("box1");
            var p = div.parentNode;
            console.log(div);
            console.log(p);

            //得到子节点
            var c = div.childNodes;
            /* for(var i=0; i<c.length;i++){
             console.log(c[i].nodeName);
             }*/

            var pre = div.previousSibling;
            console.log(pre);
            var next = div.nextSibling;
            console.log(next);
        }
    </script>
</head>
<body>
<input type="button" onclick="getDom01()" value="getDom01">
<hr>
<div id="box">
    <div id="box1">
        <span>this is a span in div 01</span>
        <span>this is a span in div 02</span>
    </div><div id="box2">
    <span>this is a span in div 01</span>
    <span>this is a span in div 02</span>
</div>
    <div id="box3">
        <span>this is a span in div 01</span>
        <span>this is a span in div 02</span>
    </div>
    <div id="box4">
        <span>this is a span in div 01</span>
        <span>this is a span in div 02</span>
    </div>
</div>
</body>
</html>

js中元素结点的引用的更多相关文章

  1. js中元素（图片）切换和隐藏显示问题

    这个知识点其实也简单,(当然是在理清思路的情况下),在没预习的情况下听的还真是艰难,上课以来唯一的一次懵逼了一天,感觉乱乱的,全是新属性,所以今晚的我破天荒的熬夜敲代码,一定要弄懂! 现在就来梳理下头 ...

  2. JS中原始值和引用值分析

    JS中变量中两种类型的值:原始值,引用值 原始值是存储在栈(stack)中的简单数据段,也就是说,它们的值直接存储在变量访问的位置. var x = 1; //1就是一个原始值,变量x中存放的就是原始 ...

  3. js中元素更新value页面体现不出来的原因

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. CSS与JS中的相对路径引用

    javascript和css文件中采用相对路径,其基准路径是完全不同的. 1.javascript引用资源(比如图片)相对路径是以宿主路径(被引用的网页比如你在首页index.php引用了某js文件, ...

  5. 一文看懂js中元素的客户区大小（clientWidth,clientHeight）

    元素的客户区 元素的客户区大小,指的是元素内容及其内边距所占据的空间大小. 相关属性如下: 1. clientWidth:元素内容区宽度+元素左右内边距 2. clientHeight:元素内容区高度 ...

  6. 一文看懂js中元素偏移量（offsetLeft,offsetTop,offsetWidth,offsetHeight）

    偏移量(offset dimension) 偏移量:包括元素在屏幕上占用的所有可见空间,元素的可见大小有其高度,宽度决定,包括所有内边距,滚动条和边框大小(注意,不包括外边距). 以下4个属性可以获取 ...

  7. js中元素操作的有关内容与对比

    以下 A:代表原生js B:代表jQuery 1 创建元素/节点 A: 元素节点- createElement( ) 文本节点 - createTextNode() 例如: var a = docum ...

  8. JS中原始值和引用值的储存方式

    在ECMAscript中,变量可以存放两种类型的值,即原始值和引用值 原始值指的是代表原始数据类型的值,也叫基本数据类型,包括:Number.Stirng.Boolean.Null.Underfine ...

  9. js中基本数据类型和引用数据类型的区别

    1.基本数据类型和引用数据类型 ECMAScript包括两个不同类型的值:基本数据类型和引用数据类型. 基本数据类型指的是简单的数据段,引用数据类型指的是有多个值构成的对象. 当我们把变量赋值给一个变 ...

随机推荐

  1. hdu 6127 Hard challenge(极角/角度排序+枚举+结构体排序新写法)

    Hard challenge Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 524288/524288 K (Java/Others) ...

  2. python 列表构造时的引用问题

    以前老是不注意python对象引用,平时也没遇到这样的问题,昨天在这个小问题纠结了半天时间.真是TMD啊 先说明一下我的目的,我有一个包含16个元素的列表,每个元素也是一个小列表.我想每四个子列表为一 ...

  3. 201621123010 《Java程序设计》第1周学习总结

    1. 本周学习总结 本周主要学习了五个知识点 Java是面向对象的语言 JDK,JRE,JVM的联系 javac及java指令 Java跨平台运行的原理 新概念:类,类是面向对象中的概念 2. 书面作 ...

  4. openResty缓存前移（到达nginx端）

    一.openResty的理解 OpenResty是一个基于 Nginx 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库.第三方模块以及大多数的依赖项.用于方便地搭建能够处理超高 ...

  5. Centos 7中的网卡一致性命名规则

    一致性网络设备命名,即Consistent Network Device Naming 一.为什么需要这个 服务器通常有多块网卡,有板载集成的,同时也有插在PCIe插槽的. Linux系统的命名原来是 ...

  6. 一起来点React Native——你必须要会点FlexBox布局

    一.FlexBox布局 1.1 FlexBox是什么意思呢? flexible(形容词):能够伸缩或者很容易变化,以适应外界条件的变化 box(名词):通用的矩形容器 1.2  什么是FlexBox布 ...

  7. 最大流之dinic

    先用bfs预处理出层次图,然后在层次图上用dfs找增广路径,理论复杂度O(n*n*m) const int INF=0xfffffff ; struct node { int s,t,cap,nxt ...

  8. .NET 中让 Task 支持带超时的异步等待

    Task 自带有很多等待任务完成的方法,有的是实例方法,有的是静态方法.有的阻塞,有的不阻塞.不过带超时的方法只有一个,但它是阻塞的. 本文将介绍一个非阻塞的带超时的等待方法.   Task 已有的等 ...

  9. 简单实现MemCachedUtil

    package com.chauvet.utils.memcached; import com.chauvet.utils.ConfigUtil; import com.danga.MemCached ...

  10. python静态方法类方法属性方法

    Python的静态方法和类成员方法都可以被类或实例访问,两者概念不容易理清,但还是有区别的: 1)静态方法无需传入self参数,类成员方法需传入代表本类的cls参数: 2)从第1条,静态方法是无法访问 ...