<!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. LUOGU P4159 [SCOI2009]迷路(矩阵乘法)

    传送门 解题思路 以前bpw讲过的一道题,顺便复习一下矩阵乘法.做法就是拆点,把每个点拆成\(9\)个点,然后挨个连边.之后若\(i\)与\(j\)之间的边长度为\(x\),就让\(i\)的第\(x\ ...

  2. csp-s模拟测试85

    csp-s模拟测试85 $T1$全场秒切没有什么区分度,$T2$全场成功转化题意但是我并不会打,$T3$暴力都没打很遗憾. 100 00:21:49 02:56:35 02:56:49 135 02: ...

  3. OpenLayers的view与layer：控制显示内容

    view与layer都可以进行显示内容的控制.这两者负责的功能是由区别的. view即显示的地图容器,有以下几个属性: center:[经度,纬度] ,对应的设置函数为view.setCenter() ...

  4. JS 拷贝传值和引用传值

    1.拷贝传值:基本数据类型都是“拷贝传值”. 拷贝传值,就是将一个变量的值“拷贝”一份,传给了另一个变量. 拷贝传值中,两个变量之间没有任何联系,修改其中一个变量的值,另一个不会改变. 这两个变量之间 ...

  5. 主页面与iframe页面之间的javascript函数的调用

    1:在主页面里调用iframe页里面的javascript函数 <script type="text/javascript"> var childWindow = $( ...

  6. Hadoop2.7.1配置NameNode+ResourceManager高可用原理分析

    关于NameNode高可靠需要配置的文件有core-site.xml和hdfs-site.xml 关于ResourceManager高可靠需要配置的文件有yarn-site.xml 逻辑结构: Nam ...

  7. .Global.asax.cs中的方法的含义

    Application_Init:在每一个HttpApplication实例初始化的时候执行 Application_Disposed:在每一个HttpApplication实例被销毁之前执行 App ...

  8. https://webpack.js.org/plugins/

    有问题还是看源码 ,看官方文档吧,整一晚上终于整明白了

  9. 使用了@Slf4j log没有info的方法 .info()方法爆红或者log爆红

    在springboot项目中,使用注解@Slf4j时,log变量不能用. 导包用的是 import lombok.extern.slf4j.Slf4j; <dependency> < ...

  10. 以代码的方式管理quartz定时任务的暂停、重启、删除、添加等

    [前言]在项目的管理功能中,对定时任务的管理有时会很常见.因为我们不能指望只在配置文件中配置好定时任务就行了,因为如果要控制定时任务的 “暂停” 呢?暂停之后又要在某个时间点 “重启” 该定时任务呢? ...