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. 蓝桥杯-立方尾不变-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  2. 基于swift MKMapkit 开发的地图定位导航

    //  DTOneViewController.swift //  Mapper-JSON // //  Created by kcl on 16/8/8. //  Copyright © 2016年 ...

  3. ESXi5.0误删除虚拟机还有办法恢复吗？答案是可以！

    [数据恢复故障描述]故障的虚拟化系统是 ESXi5.0,连接了多个LUN,其中一个1T的LUN上跑有7 台虚拟机,均为Windows Server 2003,管理员因为其它原因误删除了一台虚拟机,此台 ...

  4. Hadoop集群

    你可以用以下三种支持的模式中的一种启动Hadoop集群: 单机模式 伪分布式模式 完全分布式模式 单机模式的操作方法 默认情况下,Hadoop被配置成以非分布式模式运行的一个独立Java进程.这对调试 ...

  5. JDK安装、java环境配置

    JDK是Java语言的软件开发工具包,主要用于移动设备.嵌入式设备上的java应用程序.JDK是整个java开发的核心,它包含了JAVA的运行环境,JAVA工具和JAVA基础的类库. JRE(Java ...

  6. IOS的UITableView

    UITableView 概述 UITableView 一般用来展示表格数据.可以滚动(继承自UIScrollView).性能极佳 UITableView分两种样式: Plain,不分组的样式 Grou ...

  7. 镜像的缓存特性 - 每天5分钟玩转 Docker 容器技术（14）

    上一节我们学习了镜像的分层结构,今天讨论镜像的缓存特性. Docker 会缓存已有镜像的镜像层,构建新镜像时,如果某镜像层已经存在,就直接使用,无需重新创建. 举例说明.在前面的 Dockerfile ...

  8. struts的package的name与namespace

    <struts> <constant name="struts.devMode" value="true"></constant& ...

  9. rabbitmq安装Management Plugin

    运行和安装Rabbitmq Management的步骤如下: 1.进入Rabbitmq安装目录,运行rabbitmq-plugins enable rabbitmq_management 2.运行ra ...

  10. maven学习2，安装插件

    eclipse 安装插件的方式最常见的有两种: 1. 一种是在线安装,这貌似是用的最多的,就是:Help  -->  Install New Software,然后输入 HTTP 地址来安装,但 ...