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>

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

<!DOCTYPE html>

<html>

  <head>

    <title>5.html</title>

	<script type="text/javascript">

	window.onload=function(){

		//

		var myli=document.createElement("li");

		myli.innertext="大哥威武";

		//归属UL

		var myul=document.getElementById("box");

		myul.appendChild(myli);

		//动态创建一个DIV

		var mydiv=document.createElement("div");

		mydiv.innerText="我是div";

		var mybody=document.getElementById("mine");

		var myul=document.getElementById("box");

		//把mydiv节点插入到myul节点之前

		mybody.insertBefore(mydiv,myul);

	};

	</script>

  </head>

  <body id="mine">

  <ul id="box">

  <li>

  </li>

  </ul>

  </body>

</html>

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

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

<!DOCTYPE html>

<html>

  <head>

    <title>1.html</title>

	<script type="text/javascript">

	    window.onload=function(){   //等待所有的html标签，img。css。js加载完毕后执行

	      var myul=document.getElementById("box");

	      myul.setAttribute("dynamicattr", "dynamicvalue");

	      var mybox=myul.getAttribute("mykey");

		  alert(mybox);

	    };

	 </script>

  </head>

  <body>

     <ul id="box" mykey="myvalue">

	     <li id="first">吃饭</li>

	     <li>睡觉</li>

	     <li>打豆豆</li></ul>

  </body>

</html>

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

<!DOCTYPE html>

<html>

  <head>

    <title>1.html</title>

	<script type="text/javascript">

	    window.onload=function(){   //等待所有的html标签，img。css。js加载完毕后执行

	    //删除节点 ，A.removeChild(子元素对象)

	    /*    var dom=document.getElementById("first");

	       var box=document.getElementById("box");

           box.removeChild(dom); */

          //替换节点

	    };

	    function myreplace(){

	      var myfirst=document.getElementById("first");

          var dom=document.createElement("li");

          dom.innerText="青鸟杯IT精英挑战赛在6月22日华丽开幕";

          var box=document.getElementById("box");

          box.replaceChild(dom,myfirst);

	    }

	 </script>

  </head>

  <body id="mine">

     <ul id="box">

	     <li id="first">吃饭</li>

	     <li>睡觉</li>

	     <li>打豆豆</li>

	  </ul>

	  <input type="button" value="replace" onclick="myreplace()"/>

  </body>

</html>

　　

操作节点样式的代码：

<!DOCTYPE html>

<html>

  <head>

    <title>1.html</title>

    <style type="text/css">

    *{

          margin:0px;

          padding:0px;

     }

       #big{

           width:500px;

           height:500px;

           border:2px solid red;

           margin:0px auto;

           position:relative;

       }

        #small{

           width:200px;

           height:200px;

           border:1px solid red;

           margin-left:5px;

       }

    </style>

	<script type="text/javascript">

	    window.onload=function(){   //等待所有的html标签，img。css。js加载完毕后执行

	       var small=document.getElementById("small");

	       //左外边距

	      /*  var leftValue=small.offsetLeft;

	       alert(leftValue);

	        */

	        var height=small.clientHeight;

	         var heightandborder=small.offsetHeight;

	       alert(height+"\r\n"+heightandborder);

	    };

	 </script>

  </head>

  <body>

     <div id="big">

        <div id="small">我是小div</div>

     </div>

  </body>

</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. ZJOI2017 Round#2 滚粗记

    在杭州的火车站的KFC餐厅里,独自一人,闲来无事,便写写这篇博客.刚刚的一个礼拜,经历了余姚的省选和杭州的数学集训,感觉有些浪,学校里现在还在上新课,我已经落下一个礼拜的文化课了,回去估计补死:最重要 ...

  2. 【算法系列学习三】[kuangbin带你飞]专题二 搜索进阶 之 A-Eight 反向bfs打表和康拓展开

    [kuangbin带你飞]专题二 搜索进阶 之 A-Eight 这是一道经典的八数码问题.首先,简单介绍一下八数码问题: 八数码问题也称为九宫问题.在3×3的棋盘,摆有八个棋子,每个棋子上标有1至8的 ...

  3. Java AOP (1) compile time weaving 【Java 切面编程 (1) 编译期织入】

    According to wikipedia  aspect-oriented programming (AOP) is a programming paradigm that aims to inc ...

  4. openlayers应用“四”：百度地图纠偏续

    续前一篇,上一篇提到百度地图纠偏的基本思路,经过经过一天的努力,实现了百度地图坐标偏移参数的提取,步骤以及实现效果如下: 1.数据来源:四川省的省道矢量数据 2.提取坐标偏移参数的过程如下: A.将四 ...

  5. Brief introduction to Java String Split 【简单介绍下Java String Split】

    Split is a common function in Java. It split a full string to an array based on delimeter. For examp ...

  6. scala 异常处理机制

    有经验的码农都知道,程序开发的差不多的时候,为了提高程序的稳健性,是一定要加上异常处理机制的 在scala中,用try/catch/finally实现该功能,这个在我的博客,数字转汉字小工具中有体现, ...

  7. Struts2之2.5.10.1HelloWorld

    Struts2.5.10.1是目前为止最新的版本,struts2建议持续跟进,理由大家都懂.好了,下面步入正题. 基于struts2.5.10.1建立一个HelloWorld,基于注解的哈! 工具:e ...

  8. 使用 Mono.Cecil 辅助 Unity3D 手游进行性能测试

    Unity3D 引擎在  UnityEngine 名字空间下,提供了  Profiler 类(Unity 5.6 开始似乎改变了这个名字空间),用于辅助对项目性能进行测试.以 Android 平台为例 ...

  9. Linux设备中的并发控制

    一.自旋锁1.定义自旋锁:spinlock_t lock2.初始化自旋锁:spin_lock_init(lock)3.获得自旋锁:spin_lock(lock)4.释放自旋锁:spin_unlock( ...

  10. /usr/bin/python^M: 解释器错误: 没有那个文件或目录

    遇见问题 因为linux在虚拟机中,所以就在本地敲python代码,敲完后再拿到虚拟机去执行,再输入./filename.py时,就遇到这样的一个问题: bash: ./filename.py: /u ...