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. php函数每日学习二十个

    数学函数 1,abs() 求绝对值 2,ceil() 进一法取整 3,floor() 舍去法取整 4,fmod()对浮点数进行取余 例如fmod(5.7,1.3) 5,pow() 返回数的n次方 po ...

  2. AngularJS2基本构造

    2.NG2入门 2.1 基本构造 angularjs主要有8个构造快: 模块(module) 组件(component) 模板(template) 元数据(metadata) 数据绑定(data bi ...

  3. 一句话告诉你JQuery $(this)到底指的是什么，怎么用

    看了网上好多关于jquery $(this)的解释,感觉都说的很模糊. 下面说出我自己的理解. this表示的是当前对象,下面以例子来说明 <!DOCTYPE html> <html ...

  4. 1019 Least Common Multiple

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submission( ...

  5. poj3261 Milk Patterns 后缀数组求可重叠的k次最长重复子串

    题目链接:http://poj.org/problem?id=3261 思路: 后缀数组的很好的一道入门题目 先利用模板求出sa数组和height数组 然后二分答案(即对于可能出现的重复长度进行二分) ...

  6. 支付宝app支付服务器签名代码(C#)

    1,引入支付宝的sdk(AopSdk) 支付宝接口文档网站可下载,注意下载C#版本: 2,代码写的比较简单 public static string RSASign(string OrderNo,de ...

  7. Node.js编写CLI的实践

    导语:通常而言,Node.js的应用场景有前后端分离.海量web页面渲染服务.命令行工具和桌面端应用等等.本篇文章选取CLI(Command Line Tools)这子领域,来谈谈Node.js编写C ...

  8. 初识数据库连接池开源框架Druid

    Druid是阿里巴巴的一个数据库连接池开源框架,准确来说它不仅仅包括数据库连接池这么简单,它还提供强大的监控和扩展功能.本文仅仅是在不采用Spring框架对Druid的窥探,采用目前最新版本druid ...

  9. 使用xftp将文件上传至云服务器

    一.在云服务器配置FTP服务:    1.在root权限下,通过如下命令安装Vsftp(以centos 系统为例): yum install -y vsftpd.    2. 在启动vsftpd服务之 ...

  10. 第 8 章 MySQL 数据库 Query 的优化

      前言: 在之前“影响 MySQL 应用系统性能的相关因素”一章中我们就已经分析过了Query语句对数据库性能的影响非常大,所以本章将专门针对 MySQL 的 Query 语句的优化进行相应的分析. ...