<!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. 重磅教程！帮你全面彻底搞定Material design的学习笔记

    http://www.uisdc.com/comprehensive-material-design-note

  2. L196 Hospital educations

    Surprisingly,no one knows how many children receive education in English hospitals,still less the co ...

  3. L192 Virgin Galactic Completes Test of Spaceship to Carry Tourists

    Virgin Galactic says its spacecraft designed to launch tourists into space completed an important te ...

  4. haskell 常用 函数

    在学习haskell 记录以下常用的函数 随时更新! span  span :: (a -> Bool) -> [a] -> ([a], [a]) span, applied to ...

  5. 分析器错误信息: 服务器标记不能包含 <% ... %> 构造

    我的程序如下:<form runat="server"><TABLE><TR><TD>用户名:</TD><TD&g ...

  6. SOA实践指南-读书笔记

    SOA是英文Service-Oriented Architecture,即面向服务架构的缩写. SOA是一种范式,目的是增强灵活性.SOA很适宜处理复杂的分布式系统. SOA方法接受异质(不同的平台, ...

  7. python 编程中的一个关于图片的库 imageio (读取照片RGB内容，转换照片格式)

    最近在看机器学习方面的东西,经常遇到需要把某个类型的照片中 RGB 内容读取出来, 在python中照片显示用matplotlib就可以做到,但是导入不同格式的照片,保持出不同格式的照片numpy, ...

  8. Java进行数据库导出导入 亲测可用

    /** * @param hostIP ip地址,可以是本机也可以是远程 * @param userName 数据库的用户名 * @param password 数据库的密码 * @param sav ...

  9. [BZOJ5330][SDOI2018]反回文串

    luogu bzoj sol 枚举一个长度为\(n\)为回文串,它的所有循环位移都可以产生贡献. 但是这样算重了.重复的地方在于可能多个回文串循环同构,或者可能有的回文串经过小于\(n\)次循环位移后 ...

  10. java中读取配置文件

    若是Javaweb项目,项目运行于tomcat或其他容器时,可以使用下面方式来获取文件的输入流 1.当属性文件放在src下面时 InputStream is = Thread.currentThrea ...