1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. .main{width: 400px;height: 400px;border: 1px solid #000;position: relative}
  8. .box{width: 200px;height: 200px;background: yellowgreen;position: absolute;bottom:20px;overflow: hidden;}
  9. </style>
  10. </head>
  11. <body>
  12. <div class="main">
  13. <div class="box"></div>
  14. <div class="box2"></div>
  15. <div class="box3"></div>
  16. <div class="box4"></div>
  17. <div class="box5"></div>
  18. </div>
  19. <script>
  20. var main=document.getElementsByClassName("main")[0];
  21. var box=document.getElementsByClassName("box")[0];
  22. var box2=document.getElementsByClassName("box2")[0];
  23. var box3=document.getElementsByClassName("box3")[0];
  24. var box4=document.getElementsByClassName("box4")[0];
  25. var box5=document.getElementsByClassName("box5")[0];
  26.  
  27. console.log(main.childNodes); //.获取子节点包括文本节点
  28. console.log(main.firstChild ); //.获取第一个子节点包括文本节点
  29. console.log(main.lastChild ); //.获取最后一个子节点包括文本节点
  30. console.log(main.parentNode); //.获取父节点
  31. console.log(box.nextSibling ); //.获取下一个相邻兄弟节点包括文本节点
  32. console.log(box2.previousSibling); //.获取上一个相邻兄弟节点包括文本节点
  33. console.log(main.firstElementChild); //获取第一个子元素节点
  34. console.log(main.lastElementChild); //获取最后一个子元素节点
  35. console.log(box.nextElementSibling); //获取下一个相邻兄弟元素节点
  36. console.log(box2.previousElementSibling); //获取上一个相邻兄弟元素节点
  37. console.log(box.children); //获取所有的子元素节点,不包括孙子元素
  38. console.log(main.nodeValue); //nodeValue 输出节点 如果是文本节点或者注释节点,则会打印输出内容;如果是元素节点,则打印输出null;
  39. console.log(main.nodeName); // 输出节点名称
  40. console.log(main.nodeType); // 输出节点类型
  41.  
  42. main.setAttribute("id","id");//设置属性 setattribute("属性名","属性值");
  43. main.removeAttribute("id");//删除属性 removeAttribute("value");
  44.  
  45. var span=document.createElement("span");//创建节点
  46. document.body.appendChild(span);//插入节点;
  47. main.insertBefore(span,box);//将元素节点a插入到元素节点b之前insertBefore(a,b)将元素节点a插入到元素节点b之前
  48. main.replaceChild(box4,box3);//b节点被a节点替换,a节点消失
  49. main.removeChild(box5);//删除节点
  50.  
  51. </script>
  52. </body>
  53. </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. 重磅发布: 阿里云WAF日志实时分析上线 (含视频)

    摘要: 阿里云WAF与日志服务打通,对外开发Web访问与攻击日志.提供近实时的网站具体的日志自动采集存储.并提供基于日志服务的查询分析.报表报警.下游计算对接与投递的能力. 背景 Web攻击形势 互联 ...

  2. 概率dp——hdu4089推公式+循环迭代

    迭代是化简公式的常用技巧 dp[i][j]表示队伍中有i人,tomato排在第j位出现情况2的概率,那么先推出公式再进行简化 dp[i][1]=p21*dp[i][i] + p41 j<=k : ...

  3. elasticsearch的索引清理

    curl -XDELETE 'http://127.0.0.1:9200/winlogbeat-6.0.0-2017.07.*' 脚本加api删除(推荐) cat es-index-clear.sh ...

  4. css 图片波浪效果

    参考:https://blog.csdn.net/zhichaosong/article/details/80944924#_99 效果: wave2.png html: <!DOCTYPE h ...

  5. Hibernate的Hello World!

    一.创建Java工程,新建Lib文件夹,加入Hibernate和数据库(如MySql.Oracle.SqlServer等)的Jar包 二.创建 hibernate.cfg.xml 文件,并配置,配置项 ...

  6. hadoop 环境下不知道yarn端口可以通过此命令查找

    yarn jar hadoop-examples-2.6.0-mr1-cdh5.10.0.jar pi 1 30 hadoop-examples-2.6.0-mr1-cdh5.10.0.jar 此JA ...

  7. Ubuntu环境下Error: Invalid or corrupt jarfile xxx.jar

    一.问题描述 Ubuntu环境下将Maven项目打包成jar包后,运行一下指令: $ java -jar my.jar 发生错误: Error: Invalid or corrupt jarfile ...

  8. springboot在工具类中添加service的方法,显示为空的解决方案

    @Component// 1.将工具类声明为spring组件,这个必须不能忘 public class TestUtils { //2.自动注入 @Autowired private ItemServ ...

  9. php链表笔记:合并两个有序链表

    <?php /** * Created by PhpStorm. * User: huizhou * Date: 2018/12/2 * Time: 15:29 */ /** * 合并两个有序链 ...

  10. 不同浏览器Cookie有效期问题

    昨天项目迁移了测试服务器,之后奇怪的问题出现了. IE.谷歌无法登陆,火狐可以登陆. 这个项目先后部署过两个测试服务器.一台正式服务器,登陆都是正常的,这次却突然出现这种奇怪的问题,很是纠结. 通过查 ...