DOM 节点含有：元素节点，属性节点，文本节点。

document.getElementById("id")　　//通过页面元素ID 值 捕获元素对象，得到的值为一个object

1. innerHTML：

　//作用有两个：1. 实例化object 值；2. 修改元素内容（给object 对象重新赋值），以下实例详细说明其两点作用：

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>innerHTML</title>

 </head>

 <body>

 <h2 id="con">javascript</H2>

 <p> JavaScript good</p

 <script type="text/javascript">

 var mychar=  document.getElementById("con");  //捕获id 对象

 document.write("原标题:"+mychar+"<br>"); //输出一个非null 的对象，此时没有真实内容

 documet.write("原标题:" + mychar.innerHTML);输出获取到对象的内容，实例化对象

 mychar.innerHTML = "替换后的内容是这样的";

 document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容

 </script>

 </body>

 </html>

2. 修改对象样式：

 var mychar=  document.getElementById("con");  //捕获id 对象

 mychar.style.cssText="fontsize:20px;color:red;background:blue";    //修改对象样式

3. 显示和隐藏(display 属性,value = none or block):

 <script type="text/javascript">

     function hidetext(){

         document.getElementById("con").style.display = "none";

     }

     function showtext(){

         document.getElementById("con").style.display = "block";

     }

 </script>

 <p id="con">点击按钮实现隐藏和显示功能</p>

 <form>

     <input type="butoon" onclick="hidetext()" value="隐藏" />

     <input type="butoon" onclick="showtext()" value="显示" />

 </form>

4. 控制类名(className 属性):

 <style>

 .one {

     background-color:write;

 }

 .two{

     background-color: blue;

 }

 </style>

 <script>

     function addone(){

         document.getElementById("p1").className = "one";

     }

     function addtwo(){

         document.getElementById("p2").className = "two";

     }

 </script>

 <p id="p1">the one!</p>

 <p id="p2">the two!</p>

 <input type="butoon" value="改变样式" onclick="addone()" />

 <input type="butoon" value="改变样式" onclick="addtwo()" />

5. 恢复所有修改内容(removeAttribute("style")):

 document.getElementById("id").removeAttribute("style");

#综合实例：

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />

 <title>javascript</title>

 <style type="text/css">

 body{font-size:12px;}

 #txt{

     height:400px;

     width:600px;

     border:#333 solid 1px;

     padding:5px;}

 p{

     line-height:18px;

     text-indent:2em;}

 </style>

 </head>

 <body>

   <h2 id="con">JavaScript课程</H2>

   <div id="txt">

      <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>

         <p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p>

         <p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>

         <p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>

   </div>

   <form>

   <!--当点击相应按钮，执行相应操作，为按钮添加相应事件-->

     <input type="button" value="改变颜色" onclick="changecolor()"/>

     <input type="button" value="改变宽高" onclick="changewh()" />

     <input type="button" value="隐藏内容" onclick="hidecontent()"/>

     <input type="button" value="显示内容" onclick="showcontent()"/>

     <input type="button" value="取消设置" onclick="cancle()"/>

   </form>

   <script type="text/javascript">

 //定义"改变颜色"的函数

     function changecolor(){

         document.getElementById("con").style.cssText="color:blue";

     }

 //定义"改变宽高"的函数

     function changewh(){

         document.getElementById("con").style.cssText="width: 200px;height:500px";

     }

 //定义"隐藏内容"的函数

     function hidecontent(){

         document.getElementById("txt").style.display="none";

     }

 //定义"显示内容"的函数

     function showcontent(){

         document.getElementById("txt").style.display="block";

     }

 //定义"取消设置"的函数

     function cancle(){

         document.getElementById("con").removeAttribute("style");

         document.getElementById("txt").removeAttribute("style");

     }

   </script>

 </body>

 </html>

js 第二篇 （DOM 操作）的更多相关文章

  1. js基础篇(dom操作，字符串，this等)

    首先我们来看这样一道题 <div id='foo' class='aa bb cc'></div>写出如何判断此div中是否含有aa(注:aa成立,aaa不成立) 首先,我们一 ...

  2. 深入理解javascript对象系列第二篇——属性操作

    × 目录 [1]查询 [2]设置 [3]删除[4]继承 前面的话 对于对象来说,属性操作是绕不开的话题.类似于“增删改查”的基本操作,属性操作分为属性查询.属性设置.属性删除,还包括属性继承.本文是对 ...

  3. js中的DOM操作汇总

    一.DOM创建 DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性.DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: Element,元素 Attrib ...

  4. jquer 基础篇 dom操作

    DOM操作: 1.新增元素:创建元素:$("HTML")返回的创建成功的新元素新增子元素:元素.append(obj) 在匹配元素的里面新增一个子元素 追加方式 新元素作为最后一个 ...

  5. js练习【DOM操作】

    完成效果: 演示地址:http://codepen.io/anon/pen/jPbYWq HTML: <!DOCTYPE html> <html lang="en" ...

  6. [笔记]原生JS实现的DOM操作笔记

    原生JS实现的DOM一系列操作参考: 原生JavaScript封装DOM库 siblings: 原生JS-查找相邻的元素-siblings方法的实现 addClass,removeClass,hasC ...

  7. 【2017-03-28】JS基础、DOM操作

    一.JS基础 1.javascript功能 ⑴进行数据运算 ⑵控制浏览器功能 ⑶控制元素的属性.样式.内容 2.javascript位置和格式 可以放在html页的任意位置,也可以创建一个以js结尾的 ...

  8. React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操作

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson21 转载请注明出处,保留原文链接和作者信息. 在 React.js 当中你基本不需要和 DO ...

  9. ref 和 React.js 中的 DOM 操作

    在 React.js 当中你基本不需要和 DOM 直接打交道.React.js 提供了一系列的 on*方法帮助我们进行事件监听,所以 React.js 当中不需要直接调用 addEventListen ...

随机推荐

  1. android中与Adapter相关的控件----ExpandableListView

    ExpandableListView(可折叠的列表) 一.ExpandableListView(可折叠的列表)和ListView有很多地方差不多的,使用也差不多,只是他们使用适配器不一样的,Expan ...

  2. 基于Xen实现一种domain0和domainU的应用层数据交互高效机制 - 2

    继续昨天的思路,今天先google了类似的实现domain0和domainU之间数据传输的方案 [Xen-devel] XenStore as a data transfer path?  这篇帖子讨 ...

  3. Spring Boot学习——第一个Spring Boot程序

    依照下面的步骤创建项目: 点击 Next 项目介绍: Application.java中的主要代码: @SpringBootApplication public class ReaderApplica ...

  4. WKWebView遇到的问题汇总

    一.手势放大缩小页面解决方法 1.通过操作webview中scrollview的代理方法来关闭 -(UIView *)viewForZoomingInScrollView:(UIScrollView ...

  5. 牛客网 牛客小白月赛2 D.虚虚实实-无向图判欧拉路径

    D.虚虚实实 链接:https://www.nowcoder.com/acm/contest/86/D     这个题是无向图判欧拉路径,首先要判是否连通,然后再判欧拉路径就可以,板子题. 板子来源: ...

  6. MySQL的INFORMATION_SCHEMA数据库简介

    大家在安装或使用MYSQL时,会发现除了自己安装的数据库以外,还有一个 information_schema数据库.information_schema数据库是做什么用的呢,使用WordPress博客 ...

  7. POJ 2411 Mondriaan's Dream [经典状态压缩dp]

    题意:略. 思路:这一题开始做的时候完全没有思路,便去看了别人的题解. 首先,对于这个题目解法想有一个初步的了解,请看这里:http://www.2cto.com/kf/201208/146894.h ...

  8. asp.net 面试题（附答案）

    这次面试遇到的一些问题有很基础,也有的一些我没有听过.根据经验不同或应聘职位和公司的不同等,遇到的面试问题肯定也不一样.本人两年半asp.net开发经验,这是我年后应聘asp.net工程师遇到的问题, ...

  9. java基础篇1之可变参数，增强for循环，自动装箱

    1.java中可变参数应用 例如 add(int x,int... args) 1)只能放在参数列表的最后面 2)...位于变量类型和变量名之间,前后有无空格都可以 3)调用可变参数的方法时,编译器为 ...

  10. TSRC挑战赛：WAF之SQL注入绕过挑战实录

    转自腾讯 博文作者:TSRC白帽子 发布日期:2014-09-03 阅读次数:1338 博文内容: 博文作者:lol [TSRC 白帽子] 第二作者:Conqu3r.花开若相惜 来自团队:[Pax.M ...