一、操作子节点

  • childNodes

　　通过该方式可以获取父节点下的所有子节点，但是由于浏览器的差异，这写节点中可能包含文本节点。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>json</title>
  5.     <script type="text/javascript">
  6.     window.onload = function (){
  7.         var oUl = document.getElementById('ul1');
  8.         alert(oUl.childNodes.length);
  9.     }
  10.     </script>
  11. </head>
  12. <body>
  13. <ul id="ul1">
  14.     <li></li>
  15.     <li></li>
  16. </ul>
  17. </body>
  18. </html>

我们通过浏览器打开上面的代码会发现提示框是5。这是因为 ul 标签中的空白处可以被视为文本节点。如果只直接访问 li 节点则需要进行节点类型判断。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>json</title>
  5.     <script type="text/javascript">
  6.     window.onload = function (){
  7.         var j=0;
  8.         var node;
  9.         var oUl = document.getElementById('ul1');
  10.         for(i=0; i<oUl.childNodes.length; i++){
  11.             //1表示该节点是一个元素节点
  12.             if(oUl.childNodes[i].nodeType == 1)
  13.                 j++;
  14.         }
  15.         alert(j);
  16.     }
  17.     </script>
  18. </head>
  19. <body>
  20. <ul id="ul1">
  21.     <li></li>
  22.     <li></li>
  23. </ul>
  24. </body>
  25. </html>

  • children

　　通过该方法可以直接获取父节点下的元素节点

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>json</title>
  5.     <script type="text/javascript">
  6.     window.onload = function (){
  7.         var oUl = document.getElementById('ul1');
  8.         alert(oUl.children.length);
  9.         oUl.children[0].style.background = "red";
  10.     }
  11.     </script>
  12. </head>
  13. <body>
  14. <ul id="ul1">
  15.     <li></li>
  16.     <li></li>
  17. </ul>
  18. </body>
  19. </html>

firstChild和 lastChild是分别访问子标签中的第一个节点和最好一个节点，不过可能会出现问题就是访问到的可能是元素节点。

二、操作父节点

  • parentNode

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>json</title>
  5.     <script type="text/javascript">
  6.         window.onload = function(){
  7.         var oAs = document.getElementsByTagName('a');
  8.         for(var i=0; i<oAs.length; i++){
  9.             oAs[i].onclick = function (){
  10.                 this.parentNode.style.display = "none";
  11.             };
  12.         }
  13.         }
  14.     </script>
  15. </head>
  16. <body>
  17. <ul id="ul1">
  18.     <li><a href ="javascript:void(0);">隐藏</a></li>
  19.     <li><a href="javascript:void(0);">隐藏</a></li>
  20. </ul>
  21. </body>
  22. </html>

通过上面的方式可以让父节点隐藏

  • offsetParent

　　寻找脱离文档流的父节点(使用了绝对定位或相对定位的父节点)

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>json</title>
  5.     <script type="text/javascript">
  6.         window.onload = function(){
  7.             var oDiv = document.getElementById('div2');
  8.             oDiv.offsetParent.style.backgroundColor="yellow";
  9.         }
  10.     </script>
  11.     <style type="text/css">
  12.         #div1{
  13.             width: 100px;
  14.             height: 100px;
  15.             background-color: red;
  16.             position: relative;
  17.         }
  18.  
  19.         #div2{
  20.             width: 100px;
  21.             height: 100px;
  22.             position: absolute;
  23.             top: 20px;
  24.             left: 20px;
  25.             background-color: blue;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30. <div id="div1">
  31.     <div id="div2"></div>
  32. </div>
  33. </body>
  34. </html>

如果去掉#div1中的position属性，则整个body的背景会变为黄色，如果不去则只有div1的背景是黄色

  • setAttribute

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>json</title>
  5.     <script type="text/javascript">
  6.         window.onload = function(){
  7.             var oBtn = document.getElementById('1');
  8.             oBtn.onclick = function (){
  9.                 var oInput = document.getElementById('2');
  10.                 oInput.setAttribute("value", "div2");
  11.             }
  12.         }
  13.     </script>
  14. </head>
  15. <body>
  16. <input type="text" id="2">
  17.     <button id="1">按键</button>
  18. </div>
  19. </body>
  20. </html>

setAttribute方法有很多限制，如果允许的话最好选择JQuery中的attr方法。removeAttribute移除某个属性，获取属性值getAttribute。

  • className

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>json</title>
  5.     <script type="text/javascript">
  6.     function getByClass(oParent, className){
  7.         var result = [];
  8.         var oTags = oParent.getElementsByTagName("*");
  9.         for(var i=0; i<oTags.length; i++){
  10.             if(oTags[i].className == className)
  11.                 result.push(oTags[i]);
  12.         }
  13.         return result;
  14.     }
  15.         window.onload = function(){
  16.             var oUl = document.getElementById('ul');
  17.             var cboxes = getByClass(oUl, "box");
  18.             for(var i=0; i<cboxes.length; i++)
  19.                 cboxes[i].style.backgroundColor = "red";
  20.         }
  21.     </script>
  22. </head>
  23. <body>
  24.     <ul id="ul">
  25.         <li class="box">1</li>
  26.         <li>2</li>
  27.         <li class="box">32</li>
  28.         <li class="box">4</li>
  29.     </ul>
  30. </div>
  31. </body>
  32. </html>

className用于判断标签使用的类选择器

js中的DOM操作(1)的更多相关文章

  1. js中的DOM操作汇总

    一.DOM创建 DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性.DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: Element,元素 Attrib ...

  2. JS中的DOM操作和事件

    [DOM树节点] DOM节点分为三大类: 元素节点. 属性节点. 文本节点: 文本节点.属性节点属于元素节点的子节点.操作时,均需要先取到元素节点,再操作子节点:可以使用getElement系列方法, ...

  3. React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操作

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson21 转载请注明出处,保留原文链接和作者信息. 在 React.js 当中你基本不需要和 DO ...

  4. ref 和 React.js 中的 DOM 操作

    在 React.js 当中你基本不需要和 DOM 直接打交道.React.js 提供了一系列的 on*方法帮助我们进行事件监听,所以 React.js 当中不需要直接调用 addEventListen ...

  5. JS中的DOM操作怎样添加、移除、移动、复制、创建和查找节点

    DOM操作怎样添加.移除.移动.复制.创建和查找节点? (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元 ...

  6. js中的DOM操作(2)

    1.表格的更加与删除 <!DOCTYPE html> <html> <head> <title>表格操作</title> <style ...

  7. 【Java EE 学习 32 下】【JQuery】【JQuey中的DOM操作】

    一.JQuery中的DOM操作. 什么是DOM:DOM是一中和浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DOM简称文档对象模型,是Document Oject Mode ...

  8. dom core,html dom,css dom,jquery 中的dom操作

    前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...

  9. jQuery中的DOM操作总结

    jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...

随机推荐

  1. Go

    一.简介 https://zh.wikipedia.org/wiki/Go 二.安装 1)低版本 http://blog.sina.com.cn/s/blog_59cc90640102xm8r.htm ...

  2. 迅为iTOP-4418开发板兼容八核6818开发板介绍

    核心板介绍 三星四核S5P4418与八核6818完美兼容 1GB内存/2GB内存可选 电源管理:AXP228,支持动态调频,超低功耗 核心板引出脚最全:四组连接器共320个PIN脚 核心板连接器高度仅 ...

  3. hadoop yarn configure

    <property>  <description>The minimum allocation for every container request at the RM,  ...

  4. NOIP2008提高组火柴棒等式（模拟）——yhx

    题目描述 给你n根火柴棍,你可以拼出多少个形如“A+B=C”的等式?等式中的A.B.C是用火柴棍拼出的整数(若该数非零,则最高位不能是0).用火柴棍拼数字0-9的拼法如图所示: 注意: 加号与等号各自 ...

  5. Spring MVC Spring MyBatis 整合 - 快速上手

    我个人比较喜欢写注释,在工作中对注释的重要性看的也比较高,所以大部分文字都在注释中,代码外的文字会写的偏少,关键能懂就行 先看一下整合后的工程目录(单工程,多工程以后会采用maven) 5个packa ...

  6. CodeCover初体验

    国庆刚过完,闲来无事,就随便看看,顺便来了解下一些工具的使用,在工作中要用到的时候可以直接上手. CodeCover是一个免费的白盒测试工具,主要测试代码.分支.循环.MC/DC 覆盖.支持为每个测试 ...

  7. C和指针 3.9作用域、存储类型示例

    ; extern int b; static int c; int d( int e ) { ; register int b; ; extern int a; ... { int e; int a; ...

  8. 安装依赖包时--save-dev以及-save的区别及意义

    首先这样做会生成一个package.json的配置文件,并在里面增加相应的版本信息,以后运行程序时,安装依赖包可以直接 npm  install或者你有安装淘宝镜像,那就cnpm install 就一 ...

  9. 33Mybatis------Mapper的编写

    Mapper编写的三种方法 传统的做法: 接口实现类继承SqlSessionDaoSupport 使用此种方法需要编写mapper接口,mapper接口实现类.mapper.xml文件 1.  在sq ...

  10. 【转】【WPF】 WPF 调用API修改窗体风格实现真正的无边框窗体

    WPF中设置无边框窗体似乎是要将WindowStyle设置为None,AllowTransparency=true,这样才能达到WinForm中无边框窗体的样式.但是AllowTransparency ...