javaScript操作DOM对象（看三遍，敲三遍，写三遍！不会你找我）！！

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对象（看三遍，敲三遍，写三遍！不会你找我）！！的更多相关文章

第四章 JavaScript操作DOM对象
第四章 JavaScript操作DOM对象一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...
JQuery制作网页—— 第三章 JavaScript操作DOM对象
1. DOM:Document Object Model(文档对象模型): DOM操作: ●DOM是Document Object Model的缩 ...
JavaScript操作DOM对象
js的精华即是操作DOM对象 [1]先看代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...
JavaScript 操作DOM对象
1)JavaScript 操作DOM對象 1.DOM:是Document Object Model 的缩写,及文档对象模型 2.DOM通常分为三类:DOM Core(核心).HTML-DOM 和 ...
使用jQuery快速高效制作网页交互特效-----JavaScript操作DOM对象
一.DOM操作分类使用JavaScript操作DOM时通常分为三类:DOM Core.HTMl--DOM和CSS-DOM 二.访问节点节点属性三.节点信息四.操作节点的属性语法: ge ...
第三章 JavaScript操作Dom对象
常用的方法: 1.访问节点: 通过Document.getElementByXXX()获得一个指定节点-->再通过以下属性节点访问节点:第一部分:节点属性a:parentNode 返回节点的父节 ...
accp8.0转换教材第7章JavaScript操作DOM对象理解与练习
程序调试,chrome开发人员工具,DOM操作,节点和节点间的关系,节点信息,操作节点,获取元素一.单词部分 ①alert警告②prompt提示③parentNode父节点④childNode子节点 ...
第三章 JavaScript操作BOM对象
第三章 JavaScript操作BOM对象一.window对象浏览器对象模型(BOM)是javascript的组成之一,它提供了独立与浏览器窗口进行交换的对象,使用浏览器对象模型可以实现与HT ...
【repost】Javascript操作DOM常用API总结
Javascript操作DOM常用API总结文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...

随机推荐

sublime text3在指定浏览器上本地服务器(localhost)运行文件(php)
昨天在使用sublime text3时,发现能在本地服务器上运行php文件,于是百度了一下有关知识, 终于成功了,今天总结一下. 首先要让sublime text3 出现侧边栏sidebar,不会的可 ...
Servlet实现简单的登录页面
package emp; import java.io.IOException; import java.io.PrintWriter; import java.sql.Connection; imp ...
linux 内核的各种futex
futex 设计成用户空间快速锁操作,由用户空间实现fastpath,以及内核提供锁竞争排队仲裁服务,由用户空间使用futex系统调用来实现slowpath.futex系统调用提供了三种配对的调用接口 ...
罪恶的SEO优化
1. 基础概念开始 SEO,搜索引擎优化.概括来说就是针对分析搜索引擎的网站收录以及评价规律,来对网站的结构,内容以及其他因素作出一些合理调整,使得网站更容易被搜索引擎收录,并且能够尽量排在搜索引擎自 ...
IOS的UITableView
UITableView 概述 UITableView 一般用来展示表格数据.可以滚动(继承自UIScrollView).性能极佳 UITableView分两种样式: Plain,不分组的样式 Grou ...
Oracle 12C 新特性之表分区带异步全局索引异步维护（一次add、truncate、drop、spilt、merge多个分区）
实验准备:-- 创建实验表CREATE TABLE p_andy(ID number(10), NAME varchar2(40))PARTITION BY RANGE (id)(PARTITION ...
为Distinct准备的通用对比器
使用Linq过滤重复对象的时候,我们使用Distinct. 但是Distinct对int long等值类型才有效果,对于对象我们需要自己写个对象. 以下利用泛型封装了两个类: CommonCompar ...
linux -- 个人笔记
##转自别人的博客一般直接用tar命令打包很简单,直接使用 tar -zcvf test.tar.gz test 即可. 在很多时候,我们要对某一个目录打包,而这个目录下有几十个子目录和子文件,我们 ...
vue动态加载图片，取消格式验证
vue 一. 动态加载图片 (以vue模板为例) app.vue 代码如下: <template> <div id="app"> <img :src= ...
Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目
[TOC] 1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面整体过程: $ npm install -g vue-cli $ vue init webpack vue-admi ...

javaScript操作DOM对象（看三遍，敲三遍，写三遍！ 不会你找我）！！

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

随机推荐

热门专题

javaScript操作DOM对象（看三遍，敲三遍，写三遍！不会你找我）！！

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