<!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. 大数据之hadoop集群安全模式

    集群安全模式1.概述(1)NameNode启动 NameNode启动时,首先将镜像文件(Fsimage)载入内存,并执行编辑日志(Edits)中的各项操作.-旦在内存中成功建立文件系统元数据的影像,则 ...

  2. (1)python tkinter-窗体

    1.导入自带的包名 import tkinter 2.创建一个窗体对象 form=Tkinter.Tk() 3.显示窗体(这句应该是所有的设置部署完最后执行的一句代码) form.mainloop() ...

  3. EXCEL函数常用技巧浅析

    EXCEL函数常用技巧浅析 EXCEL函数是一门趣味性非常大的游戏,此贴内容基本上为总结前人经验而来.废话不多说,我们现在走入正题. 一:判断数值奇偶性 1.1  ISODD(number) 判断一个 ...

  4. PHP面向对象之继承的基本思想

    图例 概念和说明 代码展示 <?php header('content-type:text/html;charset=utf-8'); //学生考试系统 class Student{ publi ...

  5. PAT甲级——A1131 Subway Map【30】

    In the big cities, the subway systems always look so complex to the visitors. To give you some sense ...

  6. 19.SimLogin_case07

    # 模拟登录豆瓣 from urllib.request import urlretrieve import requests from bs4 import BeautifulSoup from o ...

  7. 手把手教你 GitLab 的安装及使用（转）

    深山田 关注 2018.01.30 22:58 字数 1696 阅读 15559评论 2喜欢 15 前言 新入职公司,发现公司还在使用落后生产工具 svn,由于重度使用过 svn 和 git ,知道这 ...

  8. <数据可视化>Matplotlib（2D+3D）

    1.Matplotlib介绍(2D) Matplotlib 是 Python 2D-绘图领域使用最广泛的套件.它能让使用者很轻松地将数据图形化,并且提供多样化的输出格式. pylab 是 matplo ...

  9. Walk Through Squares HDU - 4758 AC自动机+简单状压DP

    题意:给你两个串,求用m个R,n个D能组成多少个包含这两个串 题解:先构造一个AC自动机记录每个状态包含两个串的状态, 状态很容易定义 dp[i][j][k][status]表示在AC自动机K这个节点 ...

  10. 2019 Multi-University Training Contest 6 Nonsense Time （纯暴力）

    题意:给你一个n的排列,起初这些数都不能用, 然后还有一个数组 第 i 个数表示下标为 i 的数能够使用. 问每一个 i 对应的最长上升子序列. 题解: 可以通过倒推,从后往前考虑转化一下 ,然后就是 ...