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. poj3067树状数组求逆序数

    Japan plans to welcome the ACM ICPC World Finals and a lot of roads must be built for the venue. Jap ...

  2. linux 内核的spinlock

    spinlock设计成了三层,第一层是接口,第二层raw实现层,第三层是CPU平台层.在第二层raw实现层提供了两个分支,分别是单CPU和多CPU(核).第三层是不同CPU的锁操作实现.raw层除了调 ...

  3. jenkins部署

    第一步:官网下载jenkins:http://Jenkins-ci.org/ 第二步:安装jdk:(参考jdk安装)http://www.cnblogs.com/tanghuang/p/5805514 ...

  4. tomcat启动一闪而过问题的解决

    1.今天使用startup.bat启动tomcat报错,现象是一闪而过,在logs文件夹中有没有日志文件, 可以在控制台输入startup.bat,如下:   但是也没有看出什么太有用的错误,然后可以 ...

  5. 求序列的和，杭电0j-2058

    原题地址:http://acm.hdu.edu.cn/showproblem.php?pid=2058 [Problem Description] Given a sequence 1,2,3,... ...

  6. 2.从AbstractQueuedSynchronizer(AQS)说起(1)——独占模式的锁获取与释放

    首先我们从java.util.concurrent.locks包中的AbstraceQueuedSynchronizer说起,在下文中称为AQS. AQS是一个用于构建锁和同步器的框架.例如在并发包中 ...

  7. 0Raspi开启root权限并登录使用

    sudo passwd root sudo passwd --unlock root su root  切换回用 su pi   开始登陆选择root preferences>raspberry ...

  8. 论MySQL何时使用索引，何时不使用索引

    索引: 使用索引可快速访问数据库表中的特定信息.索引是对数据库表中一列或多列的值进行排序的一种结构,例如 employee 表的姓(name)列.如果要按姓查找特定职员,与必须搜索表中的所有行相比,索 ...

  9. java 线程方法join的简单总结

    虽然关于讨论线程join方法的博客已经很多了,不过个人感觉挺多都讨论得不够全面,所以我觉得有必要对其进行一个全面的总结. 一.作用 Thread类中的join方法的主要作用就是同步,它可以使得线程之间 ...

  10. 关于饿了么在浏览器标签页失去焦点时网页Title改变的实现方法

    说在前面:必须是基于支持H5的浏览器才可以 这个 API 本身非常简单,由以下三部分组成. document.hidden:表示页面是否隐藏的布尔值.页面隐藏包括 页面在后台标签页中 或者 浏览器最小 ...