DOM是Document Object Model的缩写，即文档对象模型，是基于文档编程的一套API

使用javaScript操作DOM对象通常分为三类：1.DOM CORE        2.HTML-DOM和CSS-DOM.

本段代码涉及到的知识点有1.如何锁定一个节点     2.返回子节点集合所用到的公式     3.如何将一种节点类型遍历出来

<!DOCTYPE html>
<html>
  <head>
    <title>4</title>
 <script>
 window.onload=function(){
  var myul=document.getElementById("box");//锁定元素
  var lis=myul.childNodes;//返回子节点集合
  for ( var i = 0; i < lis.length; i++) {
   //创建循环，长度为子节点集合的长度
   if(lis[i].nodeType==1){
   //如果遍历的子节点集合的每一项的节点类型为元素节点类型（即nodetype==1）
   alert(lis[i].innerHTML);
   }
  }
 
 }
 
 </script>

</head>
 
  <body>
<ul id="box">
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>

</ul>
  </body>
</html>

本段代码所涉及到的知识点有：如何创建标签以及如何向添加的新标签中添加内容

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>5.html</title>
  5. 	<script type="text/javascript">
  6. 	window.onload=function(){
  7. 		//
  8. 		var myli=document.createElement("li");
  9. 		myli.innertext="大哥威武";
  10.  
  11. 		//归属UL
  12. 		var myul=document.getElementById("box");
  13. 		myul.appendChild(myli);
  14. 		//动态创建一个DIV
  15.  
  16. 		var mydiv=document.createElement("div");
  17. 		mydiv.innerText="我是div";
  18. 		var mybody=document.getElementById("mine");
  19.  
  20. 		var myul=document.getElementById("box");
  21. 		//把mydiv节点插入到myul节点之前
  22. 		mybody.insertBefore(mydiv,myul);
  23. 	};
  24.  
  25. 	</script>
  26.  
  27.   </head>
  28.  
  29.   <body id="mine">
  30.   <ul id="box">
  31.   <li>
  32.  
  33.   </li>
  34.   </ul>
  35.  
  36.   </body>
  37. </html>

　　javaScript操作DOM操作节点属性的代码：

涉及到的知识点有：1获取属性值的公式和设置属性值的公式

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>1.html</title>
  5. 	<script type="text/javascript">
  6. 	    window.onload=function(){   //等待所有的html标签，img。css。js加载完毕后执行
  7. 	      var myul=document.getElementById("box");
  8. 	      myul.setAttribute("dynamicattr", "dynamicvalue");
  9. 	      var mybox=myul.getAttribute("mykey");
  10. 		  alert(mybox);
  11. 	    };
  12. 	 </script>
  13.   </head>
  14.  
  15.   <body>
  16.      <ul id="box" mykey="myvalue">
  17. 	     <li id="first">吃饭</li>
  18. 	     <li>睡觉</li>
  19. 	     <li>打豆豆</li></ul>
  20.   </body>
  21. </html>

　　javaScript操作DOM删除和替换节点的代码

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>1.html</title>
  5. 	<script type="text/javascript">
  6. 	    window.onload=function(){   //等待所有的html标签，img。css。js加载完毕后执行
  7. 	    //删除节点 ，A.removeChild(子元素对象)
  8. 	    /*    var dom=document.getElementById("first");
  9.  
  10. 	       var box=document.getElementById("box");
  11.  
  12.            box.removeChild(dom); */
  13.  
  14.           //替换节点
  15.  
  16. 	    };
  17. 	    function myreplace(){
  18. 	      var myfirst=document.getElementById("first");
  19.           var dom=document.createElement("li");
  20.           dom.innerText="青鸟杯IT精英挑战赛在6月22日华丽开幕";
  21.           var box=document.getElementById("box");
  22.  
  23.           box.replaceChild(dom,myfirst);
  24. 	    }
  25.  
  26. 	 </script>
  27.   </head>
  28.  
  29.   <body id="mine">
  30.      <ul id="box">
  31. 	     <li id="first">吃饭</li>
  32. 	     <li>睡觉</li>
  33. 	     <li>打豆豆</li>
  34. 	  </ul>
  35. 	  <input type="button" value="replace" onclick="myreplace()"/>
  36.   </body>
  37. </html>

　　

操作节点样式的代码：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>1.html</title>
  5.     <style type="text/css">
  6.     *{
  7.           margin:0px;
  8.           padding:0px;
  9.      }
  10.        #big{
  11.            width:500px;
  12.            height:500px;
  13.            border:2px solid red;
  14.            margin:0px auto;
  15.            position:relative;
  16.        }
  17.         #small{
  18.            width:200px;
  19.            height:200px;
  20.            border:1px solid red;
  21.            margin-left:5px;
  22.        }
  23.     </style>
  24. 	<script type="text/javascript">
  25. 	    window.onload=function(){   //等待所有的html标签，img。css。js加载完毕后执行
  26. 	       var small=document.getElementById("small");
  27. 	       //左外边距
  28. 	      /*  var leftValue=small.offsetLeft;
  29. 	       alert(leftValue);
  30. 	        */
  31. 	        var height=small.clientHeight;
  32. 	         var heightandborder=small.offsetHeight;
  33. 	       alert(height+"\r\n"+heightandborder);
  34. 	    };
  35.  
  36. 	 </script>
  37.   </head>
  38.  
  39.   <body>
  40.      <div id="big">
  41.         <div id="small">我是小div</div>
  42.      </div>
  43.  
  44.   </body>
  45. </html>

　　

javaScript操作DOM对象（看三遍，敲三遍，写三遍！ 不会你找我）！！的更多相关文章

  1. 第四章 JavaScript操作DOM对象

    第四章   JavaScript操作DOM对象 一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...

  2. JQuery制作网页—— 第三章 JavaScript操作DOM对象

    1. DOM:Document Object Model(文档对象模型):          DOM操作:                   ●DOM是Document Object Model的缩 ...

  3. JavaScript操作DOM对象

    js的精华即是操作DOM对象 [1]先看代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

  4. JavaScript 操作DOM对象

    1)JavaScript  操作DOM對象 1.DOM:是Document  Object  Model 的缩写,及文档对象模型 2.DOM通常分为三类:DOM Core(核心).HTML-DOM 和 ...

  5. 使用jQuery快速高效制作网页交互特效-----JavaScript操作DOM对象

    一.DOM操作分类 使用JavaScript操作DOM时通常分为三类:DOM    Core.HTMl--DOM和CSS-DOM 二.访问节点 节点属性 三.节点信息 四.操作节点的属性 语法: ge ...

  6. 第三章 JavaScript操作Dom对象

    常用的方法: 1.访问节点: 通过Document.getElementByXXX()获得一个指定节点-->再通过以下属性节点访问节点:第一部分:节点属性a:parentNode 返回节点的父节 ...

  7. accp8.0转换教材第7章JavaScript操作DOM对象理解与练习

    程序调试,chrome开发人员工具,DOM操作,节点和节点间的关系,节点信息,操作节点,获取元素 一.单词部分 ①alert警告②prompt提示③parentNode父节点④childNode子节点 ...

  8. 第三章 JavaScript操作BOM对象

    第三章   JavaScript操作BOM对象 一.window对象 浏览器对象模型(BOM)是javascript的组成之一,它提供了独立与浏览器窗口进行交换的对象,使用浏览器对象模型可以实现与HT ...

  9. 【repost】Javascript操作DOM常用API总结

    Javascript操作DOM常用API总结 文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...

随机推荐

  1. MongoDB Java Driver 3.4操作

    导入jar包 <dependency> <groupId>org.mongodb</groupId> <artifactId>mongo-java-dr ...

  2. python3 selenium 鼠标悬停操作

    使用场景: 测试过程中有些元素隐藏在某些元素下面,需要鼠标悬停,才会看到 使用方法: # 定位元素hover_element = driver.find_element_by_css_selector ...

  3. Git相关操作及记录

    一.软件 1.下载Git客户端软件 Widows平台: https://github.com/git-for-windows/git/releases/download/v2.13.0.windows ...

  4. 看完48秒动画，让你不敢再登录HTTP网站（附完整示例代码）

    在我的 单点登录SSO示例代码 一文中,强烈不建议部署HTTP的SSO服务站点. 在此写个基于网络包嗅探的HTTP会话劫持程序,给大家一个直观的危害性展示. 示例中,我在一台Mac上登录58同城,被另 ...

  5. Ubuntu14.04安装samba

    Ubuntu14.04安装samba 按照惯例,首先介绍Samba.Samba是在Linux系统上实现的SMB(Server Messages Block,信息服务块)协议的一款免费软件.它实现在局域 ...

  6. [转]GET，POST，PUT，DELETE的区别

    原文链接:http://blog.csdn.net/mfe10714022/article/details/39692305 Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,P ...

  7. 转义字符及URI编码

    URL中的转义字符 当URL的参数中出现诸如+,空格,/,?,%,#,&,=等特殊字符串符号时,因为上述字符有特殊含义,导致服务器端无法正确解析参数. 解决办法:将这些字符转化成服务器可以识别 ...

  8. Ajax02 json

    1 什么是json JavaScript Object Notation(JavaScript 对象表示法) 是一种轻量级的数据交换格式. 注: 数据交换:将数据先转换成一种与平台无关的数据 格式(比 ...

  9. Lambda应用场景和使用实例

    Java 8已经推出一段时间了,Lambda是其中最火的主题,不仅仅是因为语法的改变,更重要的是带来了函数式编程的思想.这篇文章主要聊聊Lambda的应用场景及其相关使用示例. Java为何需要Lam ...

  10. C# DataTable转换成实体列表 与 实体列表转换成DataTable

    /// <summary> /// DataTable转换成实体列表 /// </summary> /// <typeparam name="T"&g ...