<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .main{width: 400px;height: 400px;border: 1px solid #000;position: relative}

        .box{width: 200px;height: 200px;background: yellowgreen;position: absolute;bottom:20px;overflow: hidden;}

    </style>

</head>

<body>

<div class="main">

    <div class="box"></div>

    <div class="box2"></div>

    <div class="box3"></div>

    <div class="box4"></div>

    <div class="box5"></div>

</div>

<script>

    var main=document.getElementsByClassName("main")[0];

    var box=document.getElementsByClassName("box")[0];

    var box2=document.getElementsByClassName("box2")[0];

    var box3=document.getElementsByClassName("box3")[0];

    var box4=document.getElementsByClassName("box4")[0];

    var box5=document.getElementsByClassName("box5")[0];

    console.log(main.childNodes);      //.获取子节点包括文本节点

    console.log(main.firstChild );     //.获取第一个子节点包括文本节点

    console.log(main.lastChild );      //.获取最后一个子节点包括文本节点

    console.log(main.parentNode);      //.获取父节点

    console.log(box.nextSibling );     //.获取下一个相邻兄弟节点包括文本节点

    console.log(box2.previousSibling); //.获取上一个相邻兄弟节点包括文本节点

    console.log(main.firstElementChild); //获取第一个子元素节点

    console.log(main.lastElementChild); //获取最后一个子元素节点

    console.log(box.nextElementSibling); //获取下一个相邻兄弟元素节点

    console.log(box2.previousElementSibling); //获取上一个相邻兄弟元素节点

    console.log(box.children); //获取所有的子元素节点,不包括孙子元素

    console.log(main.nodeValue); //nodeValue 输出节点 如果是文本节点或者注释节点,则会打印输出内容;如果是元素节点,则打印输出null;

    console.log(main.nodeName); // 输出节点名称

    console.log(main.nodeType); // 输出节点类型

    main.setAttribute("id","id");//设置属性  setattribute("属性名","属性值");

    main.removeAttribute("id");//删除属性  removeAttribute("value");

    var span=document.createElement("span");//创建节点

    document.body.appendChild(span);//插入节点；

    main.insertBefore(span,box);//将元素节点a插入到元素节点b之前insertBefore(a,b)将元素节点a插入到元素节点b之前

    main.replaceChild(box4,box3);//b节点被a节点替换,a节点消失

    main.removeChild(box5);//删除节点

</script>

</body>

</html>

js节点的更多相关文章

  1. js 节点 document html css 表单节点操作

    js 节点 document html css 表单节点操作 节点操作:访问.属性.创建 (1)节点的访问:firstChild.lastChild.childNodes.parentChild(父子 ...

  2. js节点解析

    在JS中,每一个节点都有一个nodeType 属性,用于表明节点的类型.节点类型由在Node 类型中定义的下列12个数值常量来表示,任何节点类型必居其一: Node.ELEMENT_NODE(1); ...

  3. 原生JS节点操作

    获取子节点 1. children 不是标准的dom属性,但是几乎被所有浏览器支持.获取子元素的元素节点(只包括元素节点) 注意:在IE中,children包含注释节点. 2. childNodes ...

  4. js节点操作实例

    写了一个简单的小例子来引用js实例 1. 初步节点操作: 2.兼容性节点操作: 3.节点的类型,名字: 4.使用setAttribute设置属性 5.节点复制操作: 6.删除和替换节点 如有错误,还望 ...

  5. JS系列：js节点

    节点(node) 在html文档中出现的所有东西都是节点 元素节点(HTML标签) 文本节点(文字内容) 注释节点(注释内容) 文档节点(document) … 每一种类型的节点都会有一些属性区分自己 ...

  6. js节点操作

    在看<javascript高级程序设计>,看到节点操作这一块,觉得我只知道用appendChild(),太肤浅了,记录下学到的东西. 每个节点都有一个 parentNode 属性,该属性指 ...

  7. js 节点属性

    节点属性 在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType ...

  8. js节点属性

    在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类 ...

  9. Js节点属性与方法

    属性: Attributes     存储节点的属性列表(只读) childNodes 存储节点的子节点列表(只读) dataType     返回此节点的数据类型 Definition     以D ...

  10. js ·节点的知识点

    1. DOM document object model (1) 节点树状图 Document>documentElement>body>tagname 2. 我们常用的节点类型 元 ...

随机推荐

  1. linux下怎么安装Go开发环境？linux部署golang

    linux下怎么安装Go开发环境?linux部署golang  0.请自行安装SSH远程工具 1.  SSH远程登录你的linux服务器 2.   yum install mercurial安装 me ...

  2. iOS开发UITableView随笔

    1.设置cell的间隔 - (void)setFrame:(CGRect)frame{ frame.size.height -=; [super setFrame:frame]; } 2.刷新row或 ...

  3. DEVO 7E遥控器配对

    先把遥控器上电,并把模型里面的固定ID关闭,放在一旁. 接收器断电,按住CLEAN按钮后上电,会发现接收器慢闪两下后松开. 这时遥控器应该就连上接收器了,这时接收器常亮. 再自行配置固定ID即可.

  4. day 70 Django基础五之django模型层(二)多表操作

    Django基础五之django模型层(二)多表操作   本节目录 一 创建模型 二 添加表记录 三 基于对象的跨表查询 四 基于双下划线的跨表查询 五 聚合查询.分组查询.F查询和Q查询 六 ORM ...

  5. 一文教会你用Python实现最有效的剪切板实时监控

    前言 上网浏览网页的时候,看见好的内容免不了要使用复制粘贴,但是我们看到的内容.心里想要的内容和实际粘贴后的内容往往不一致.数据的获取始于复制,终于粘贴,那么问题来了,在这中间系统做了哪些操作,我们怎 ...

  6. 2019-6-23-天河2-程序-version-GLIBCXX_3.4.21-not-found-解决方法

    title author date CreateTime categories 天河2 程序 version GLIBCXX_3.4.21 not found 解决方法 lindexi 2019-06 ...

  7. BP 算法之一种直观的解释

    0. 前言 之前上模式识别课程的时候,老师也讲过 MLP 的 BP 算法, 但是 ppt 过得太快,只有一个大概印象.后来课下自己也尝试看了一下 stanford deep learning 的 wi ...

  8. 算法系列：Shell 排序

    Copyright © 1900-2016, NORYES, All Rights Reserved. http://www.cnblogs.com/noryes/ 欢迎转载,请保留此版权声明. -- ...

  9. window 下mongodb 配置

    1.下载mongodb-win32-x86_64-2008plus-ssl-v3.6-latest 解压到 D:\mongodb 2.cmd => path是否有环境变量 如果没有请配置 3.创 ...

  10. vs Code打开新的文件会覆盖窗口中的文件？

    这是因为你单击文件名的缘故,这个是“预览模式”,所以再单击其他文件时,会覆盖当前打开的文件. 如果你要每次都打开新tab,那就双击文件名好了.这个逻辑和sublime是一样的. 补充: 预览模式是现在 ...