DOM基础
什么是DOM 标签元素节点
浏览器支持情况  火狐支持最好 谷歌其次 ie最差 尤其是ie6-8
DOM节点
节点分为：元素节点和文本节点 测试节点的类型用nodeType
nodeType 为3时是文本节点
nodeType 为1时是元素节点
childNodes 节点 不兼容要做判断 一般用children

children子节点只算第一层

parentNode父节点

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <script>
  7. window.onload=function ()
  8. {
  9.     var aA=document.getElementsByTagName('a');
  10.  
  11.     for(var i=0;i<aA.length;i++)
  12.     {
  13.         aA[i].onclick=function ()
  14.         {
  15.             this.parentNode.style.display='none';
  16.         };
  17.     }
  18. };
  19. </script>
  20. </head>
  21.  
  22. <body>
  23. <ul id="ul1">
  24.     <li>dfasdf <a href="javascript:;">隐藏</a></li>
  25.     <li>45346 <a href="javascript:;">隐藏</a></li>
  26.     <li>fghfgcvn <a href="javascript:;">隐藏</a></li>
  27.     <li>vcbxcvbc <a href="javascript:;">隐藏</a></li>
  28.     <li>757465867 <a href="javascript:;">隐藏</a></li>
  29. </ul>
  30. </body>
  31. </html>

offsetParent
获取对应定位的父元素

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <style>
  7. #div1 {width:200px; height:200px; background:#CCC; margin:100px; }
  8. #div2 {width:100px; height:100px; background:red; position:absolute; left:50px; top:50px;}
  9. </style>
  10. <script>
  11. window.onload=function ()
  12. {
  13.     var oDiv2=document.getElementById('div2');
  14.  
  15.     alert(oDiv2.offsetParent);//弹出的是object HTMLBodyElement 因为div1没有设置相对定位，所以div2是相对body定位的
  16. };
  17. </script>
  18. </head>
  19.  
  20. <body>
  21. <div id="div1">
  22.     <div id="div2"></div>
  23. </div>
  24. </body>
  25. </html>

首尾子节点  有兼容性问题
firstChild、firstElementChild
lastChild 、lastElementChild
兄弟节点    有兼容性问题
nextSibling、nextElementSibling
previousSibling、previousElementSibling

  1. <script>
  2. window.onload=function ()
  3. {
  4.     var oUl=document.getElementById('ul1');
  5.  
  6.     //IE6-8
  7.     //oUl.firstChild.style.background='red';
  8.  
  9.     //高级浏览器
  10.     //oUl.firstElementChild.style.background='red';
  11.  
  12.     if(oUl.firstElementChild)
  13.     {
  14.         oUl.firstElementChild.style.background='red';
  15.     }
  16.     else
  17.     {
  18.         oUl.firstChild.style.background='red';
  19.     }
  20. };
  21. </script>
  22. <ul id="ul1">
  23.     <li>1</li>
  24.     <li>2</li>
  25.     <li>3</li>
  26. </ul>

元素属性操作
第一种：oDiv.style.display=“block”;
第二种：oDiv.style[“display”]=“block”;
第三种：Dom方式

DOM方式操作元素属性
获取：getAttribute(名称)
设置：setAttribute(名称, 值)
删除：removeAttribute(名称)

  1. <script>
  2. window.onload=function ()
  3. {
  4.     var oTxt=document.getElementById('txt1');
  5.     var oBtn=document.getElementById('btn1');
  6.     oBtn.onclick=function ()
  7.     {
  8.         //oTxt.value='123';
  9.         //oTxt['value']='123';
  10.         oTxt.setAttribute('value', '123');
  11.     };
  12. };
  13. </script>
  14. <input id="txt1" type="text" />
  15. <input id="btn1" type="button" value="按钮" />

用className选择元素
如何用className选择元素
选出所有元素
通过className条件筛选
封装成函数

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <script>
  7. function getByClass(oParent, sClass)
  8. {
  9.     var aResult=[];
  10.     var aEle=oParent.getElementsByTagName('*');
  11.  
  12.     for(var i=0;i<aEle.length;i++)
  13.     {
  14.         if(aEle[i].className==sClass)//找到所有要找的class
  15.         {
  16.             aResult.push(aEle[i]);//放进数组里
  17.         }
  18.     }
  19.  
  20.     return aResult;
  21. }
  22.  
  23. window.onload=function ()
  24. {
  25.     var oUl=document.getElementById('ul1');
  26.     var aBox=getByClass(oUl, 'box');
  27.  
  28.     for(var i=0;i<aBox.length;i++)
  29.     {
  30.         aBox[i].style.background='red';
  31.     }
  32. };
  33. </script>
  34. </head>
  35.  
  36. <body>
  37. <ul id="ul1">
  38.     <li class="box"></li>
  39.     <li class="box"></li>
  40.     <li></li>
  41.     <li></li>
  42.     <li></li>
  43.     <li class="box"></li>
  44.     <li></li>
  45. </ul>
  46. </body>
  47. </html>

创建、插入和删除元素

createElement(标签名) 创建一个节点
appendChild(节点) 追加一个节点

插入元素 insertBefore(节点, 原有节点) 在已有元素前插入
例子：倒序插入li
删除DOM元素
removeChild(节点) 删除一个节点 例子：删除li

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <script>
  7. window.onload=function ()
  8. {
  9.     var aA=document.getElementsByTagName('a');
  10.     var oUl=document.getElementById('ul1');
  11.  
  12.     for(var i=0;i<aA.length;i++)
  13.     {
  14.         aA[i].onclick=function ()
  15.         {
  16.             oUl.removeChild(this.parentNode);
  17.         };
  18.     }
  19. };
  20. </script>
  21. </head>
  22.  
  23. <body>
  24. <ul id="ul1">
  25.     <li>asfasd <a href="javascript:;">删除</a></li>
  26.     <li>5645 <a href="javascript:;">删除</a></li>
  27.     <li>ghdfjgj <a href="javascript:;">删除</a></li>
  28.     <li>mvbnmvnb <a href="javascript:;">删除</a></li>
  29. </ul>
  30. </body>
  31. </html>

串联例子

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <script>
  7. window.onload=function ()
  8. {
  9.     var oBtn=document.getElementById('btn1');
  10.     var oUl=document.getElementById('ul1');
  11.     var oTxt=document.getElementById('txt1');
  12.  
  13.     oBtn.onclick=function ()
  14.     {
  15.         var oLi=document.createElement('li');//创建li
  16.         var aLi=oUl.getElementsByTagName('li');
  17.  
  18.         oLi.innerHTML=oTxt.value;
  19.  
  20.         //父级.appendChild(子节点);
  21.         //oUl.appendChild(oLi);
  22.         if(aLi.length>0)//判断存不存在第一个节点
  23.         {
  24.             oUl.insertBefore(oLi, aLi[0]);//存在插入之前元素的 前面
  25.         }
  26.         else
  27.         {
  28.             oUl.appendChild(oLi);//不存在直接插入父元素
  29.         }
  30.     };
  31. };
  32. </script>
  33. </head>
  34.  
  35. <body>
  36. <input id="txt1" type="text"/>
  37. <input id="btn1" type="button" value="创建li"/>
  38. <ul id="ul1">
  39. </ul>
  40. </body>
  41. </html>

文档碎片 文档碎片可以提高DOM操作性能(理论上) 文档碎片原理 document.createDocumentFragment()

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <script>
  7. window.onload=function ()
  8. {
  9.     var oUl=document.getElementById('ul1');
  10.     var oFrag=document.createDocumentFragment();
  11.  
  12.     for(var i=0;i<10000;i++)
  13.     {
  14.         var oLi=document.createElement('li');
  15.  
  16.         oFrag.appendChild(oLi);
  17.     }
  18.  
  19.     oUl.appendChild(oFrag);
  20. };
  21. </script>
  22. </head>
  23.  
  24. <body>
  25. <ul id="ul1">
  26. </ul>
  27. </body>
  28. </html>


05.DOM的更多相关文章

  1. 2016.01.05 DOM笔记（一） 查找元素

    DOM节点的种类 元素和标签是一个意思,例如<body>标签或者称为<body>元素 节点DOM的节点分为三类  元素节点,文本节点,属性节点 例如 <div id=‘b ...

  2. 自定义属性，innerHTML,outerHTML,dom节点的获取，className,tagName,更改或者是获取css属性

    01.自定义属性 1.自定义属性: 作用:保存数据 通用的自定义属性的前缀 data-属性="属性值" 注:自定义的属性不能通过 元素.属性 取属性值 ,需使用getAttribu ...

  3. 20 个使用原生 JavaScript 实现的 Web 项目

    20 个使用原生 JavaScript 实现的 Web 项目 20 vanilla JavaScript Web Projects https://github.com/learning-js-by- ...

  4. 05浏览器-02-操作DOM

    1.DOM操作梗概 本篇内容实际上在另一篇笔记<从JS和jQuery浅谈DOM操作>已经提到了重点的地方,可以戳链接另外进行阅读. 以前提到过,实际上HTML在被浏览器加载以后,会变成 & ...

  5. 05 JS基础DOM

    JS的window对象定时器: window下一些方法: <script> 弹出 window.alert('hello') 返回布尔值 var ret = window.confirm( ...

  6. 05 javascript知识点---BOM和DOM

    1.DOM简单学习(为了满足案例要求) 功能:控制html文档的内容获取页面标签(元素)对象:Element document.getElementById("id值"):通过元素 ...

  7. JavaScript学习05（操作DOM）

    操作DOM DOM(文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被结构化为对象树: 通过这个对象模型,Java ...

  8. 05 BOM与DOM

    BOM和DOM 1. 什么是BOM和DOM 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的 ...

  9. SAX与DOM

    http://www.cnblogs.com/zhulin/archive/2012/05/03/2480962.html 在解析xml时(如浏览器解析html标签),主要存在两种方式:SAX模式和D ...

随机推荐

  1. $_session (应用)

    登录: 封装类(用于连接数据库)代码中创建一个对象最好可以重复使用 <?php class DBDA { public $host="localhost"; public $ ...

  2. struts2 No result defined for action XXX and result input

    这种错误的原因一般是页面的属性和action里的属性个数.名称.类型不一致造成的 困扰了我一下午的问题,原来是表单中有两个input-text的name属性重复了,然后接受参数的时候就出现了这个错误 ...

  3. JDBC的操作总结

    JDBC  操作总结 JDBC是一组能够执行SQL语句的API JDBC的操作方式比较单一,简单的分为以下几个流程:  1.通过数据库厂商提供的JDB类库想DriverManager注册数据库驱动   ...

  4. Android 敏感 API 的说明

    从中国的国情来看,Google 的诸多产品,包括 gmail,Android 官方市场 Google Play 正处于并将长期处于访问不了的状态.国内几亿网民也要生活,于是墙内出现了“百家争鸣”的场面 ...

  5. oracle 11.2.0.4单实例文件系统安装与补丁

    [TOC] 一,预安装处理 1.版本准备 操作系统:RHEL 6.5 数据库版本:Oracle 11.2.0.4 相关包:p13390677_112040_Linux-x86-64_1of7.zip  ...

  6. 安装Python环境时遇到的问题

    问题描述:An error occurred during the installation of assembly 'Microsoft.VC90.MFC,version="9.0.210 ...

  7. Python的多类型传值和冗余参数

    多类型传值(向函数中传递元组和字典) 1 向函数中传递元组 def func(x,y): print x+y     调用这个函数的时候,我们只需要传入两个变量就可以了,但是比如我有一个元组t = ( ...

  8. tomcat热部署

    tomcat默认支持热部署,修改文件会自动加载部署,不需要重启容器 server.xml配置如下所示 autoDeploy=”true” — 自动部署 reloadable=”true” — 自动加载

  9. VadRoot枚举进程模块在Windows7下的完整实现

      原理小伟的小伟在http://bbs.pediy.com/showthread.php?t=66886说的挺清楚了,Windows7下有一些变化,使用NtQueryVirtualMemory来枚举 ...

  10. ring3硬件断点

    4个断点寄存器DR0~DR3用来设置断点的线性地址. DR6为状态寄存器,DR7为控制寄存器. DR4和DR5保留.当CR4.DE==1时,访问DR4和DR5产生#UD异常:IF CR4.DE==0, ...