要怎么样的开场白才能使我有力气再更新学习进度呢？啊啊啊啊啊，表示好累啊~~~默念“棒棒棒，我最棒~”召唤精气神开总结敲字咯。哈哈哈。

-----------------------------------------------------------------------------------------------

DOM简介：

1、HTML DOM（网页对象模型）:当网页被加载时，浏览器会创建页面的文档对象模型。

HTML DOM 模型被构造为对象的树。

HTML DOM树：

（ps:这个东东好像有点难懂也不知道是干嘛的？就是DOM的一个结构啥的吧，蛮看吧，后面我的学习好像没有涉及这个可怕的深奥定义，以后用到了，我再做提醒嘎。）

--------------------------------------------------------------------------------------------------------------------------

DOM操作HTML

1.改变html的输出流；（！注意：一定不要再整个文档加载完成之后使用document.write(),否则会覆盖该文档！！！！）

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例（针对1）：(1)<script> document.write("hello");</script>

结果：界面打印出hello

(2)<p>hello</p>

<script>document.write("world");</script>

结果：界面打印出hello

world（因为p是段落标签，所以world换行）。

(3)<p>hello</p>

<button onclick="demo()">按钮</button>

<script>

function  demo(){

document.write("world");

}

</script>

结果：界面打印出hello

一个按钮标志

当鼠标点击按钮是，界面出现覆盖现象，变为打印出world。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

2.寻找元素：（1）通过id找到html元素；       （2）通过标签名找到html元素；

3.改变html内容：使用属性innerHTML

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例（针对2,3）：

<p id="pid">hello</p>

<button onclick="demo()">按钮</button>

<script>

function demo(){

var nv=document.getElementById("demo");

nv.innnerHTML="world";

}

</script>

结果：界面打印出hello

按钮标志

当鼠标点击按钮是，hello变为world。

（ps:通过标签寻找即是用document.getElementByTagName("标签名")）。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

4.改变HTML属性：使用属性attribute.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例(针对4):

<a id="aid" href="http://www.cnblogs.com/yanyuanyuan/”>烽火戏诸诸诸候</a>

<button onclick="demo()">按钮</button>

<script>

function demo(){

document.getElementById("aid").href="http://www:baidu.com";

}

</script>

结果：界面出现链接字样：烽火戏诸诸诸候，点击不是跳转到http://www.cnblogs.com/yanyuanyuan/，而是跳转到http://www.baidu.com。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~``

---------------------------------------------------------------------------------

DOM操作CSS

1.通过DOM对象改变CSS

语法：document.getElementById(id).style.property=new style.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例：<style>

.div{

width:100px;

heigth:100px;

background:red;

}

</style>

<body>

<div id="div" class="div">hello</div>

<button onclick="demo()">按钮</button>

<script>

function demo(){

document.getElementById("div").style.background="blue";

}

</script>

</body>

结果：界面打印出宽100px,高100px的红色背景框，里面有hello字样

一个按钮

当鼠标点击按钮时，背景色变为蓝色。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

————————————————————————————————————--------------------

1.DOM EventListener

方法：（1）addEventListener():方法用于向指定元素添加事件句柄。

（2）removeEventListener():移出方法添加的事件句柄。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例：<button id="btn">按钮</button>

<script>

var x=document.getElementById("btn");

x.addEventListener("click",hello);

x.addEventListener("click",world);

function hello(){

alert("hello");

}

function world(){

alert("world");

}

</script>

结果：界面弹出提示框“hello”,点击确定继续弹出提示框“world”.

（ps:removeEventListener()是对事件的移除，即上述例子，则就在add......后就一语句:x.removeEventListener("click",hello)，则不会弹出提示框hello）

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

-----------------------------------------------------

下期见，嘻嘻。

javascript 之DOM篇的更多相关文章

  1. javascript之DOM篇二（操作）

    一.创建DOM元素 createElement:document.createElement(' 所要创建的元素标签名'): <!DOCTYPE html><html>< ...

  2. javascript之DOM篇一

    一.什么是DOM DOM是用来操作页面,如div的获取,修改样式 二.DOM节点 标签(css)=元素(js)=节点(DOM) 1.子节点 childNodes 仅算父元素下的第一层 <!DOC ...

  3. 前端开发之JavaScript HTML DOM理论篇一

    主要内容: 1.DOM简介 2.DOM 节点 3.DOM 方法和属性 4.DOM 访问和修改 一.DOM简介 1.什么是 DOM? DOM 是 W3C(万维网联盟)的标准. DOM 定义了访问 HTM ...

  4. Javascript中DOM技术的的简单学习

    第十四课DOM技术概述1:DOM概述 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...

  5. 第十五章：Python の Web开发基础 (二) JavaScript与DOM

    本課主題 JavaScript 介绍 DOM 介绍 JavaScript 介绍 JavaScript 是一门编程语言,它可以让网页动起来的,JavaScript 的变量有两种,一个是局部变量:一个是全 ...

  6. JavaScript之DOM创建节点

    上几篇文章中我们罗列了一些获取HTML页面DOM对象的方法,当我们获取到了这些对象之后,下一步将对这些对象进行更改,在适当的时候进行对象各属性的修改就形成了我们平时看到的动态效果.具体js中可以修改D ...

  7. JavaScript之DOM对象的获取

    之前我们讲过JavaScript之DOM对象获取的两篇文章,本文是该系列文章之三,点击回顾上两篇文章能更好地理解本文.<JavaScript之DOM对象的获取(一)>: <JavaS ...

  8. JavaScript与DOM（上）

    本来像自己写一篇的...结果看到了Tom uncle的这篇..总结的确实很赞,其他文章也非常好推荐 转载自:http://www.cnblogs.com/TomXu/archive/2011/12/1 ...

  9. JavaScript性能优化篇js优化

    JavaScript性能优化篇js优化   随着Ajax越来越普遍,Ajax引用的规模越来越大,Javascript代码的性能越来越显得重要,我想这就是一个很典型的例子,上面那段代码因为会被频繁使用, ...

随机推荐

  1. AOP Aspect Oriented Programming

    原理AOP(Aspect Oriented Programming),也就是面向方面编程的技术.AOP基于IoC基础,是对OOP的有益补充. AOP将应用系统分为两部分,核心业务逻辑(Core bus ...

  2. unity3d shader之God Ray上帝之光

    又是一个post-process后期效果,god ray 上帝之光,说起上帝之光就是咱们再看太阳时太阳周围一圈的针状光芒先放组效果,本文的场景资源均来自浅墨大神,效果为本文shader效果 加入了前篇 ...

  3. 基于Processing的数据可视化

    虽然数据可视化领域有很多成熟.界面友好.功能强大的软件产品(例如Tableau.VIDI.NodeXL等),但是借助Processing我们可以基于Java语言框架进行丰富多元的可视化编程,熟悉了Pr ...

  4. Hdu 4010-Query on The Trees LCT,动态树

    Query on The Trees Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65768/65768 K (Java/Othe ...

  5. UVA 465 (13.08.02)

     Overflow  Write a program that reads an expression consisting of twonon-negative integer and an ope ...

  6. 1242Rescue （优先队列BFS）

    Problem Description Angel was caught by the MOLIGPY! He was put in prison by Moligpy. The prison is ...

  7. C#中的线程(下)-多线程

    1.  单元模式和Windows Forms 单元模式线程是一个自动线程安全机制, 非常贴近于COM——Microsoft的遗留下的组件对象模型.尽管.NET最大地放弃摆脱了遗留下的模型,但很多时候它 ...

  8. OS开发网络篇—监测网络状态

    iOS开发网络篇—监测网络状态 一.说明 在网络应用中,需要对用户设备的网络状态进行实时监控,有两个目的: (1)让用户了解自己的网络状态,防止一些误会(比如怪应用无能) (2)根据用户的网络状态进行 ...

  9. (使用步骤)ThinkPHP3.1.2中如何配置Ckeditor_4.1.1和Ckfindtor（转）

    ThinkPHP3.1.2中如何配置Ckeditor_4.1.1和Ckfindtor  一.下载Ckeditor和Ckfinder Ckeditor官网 http://ckeditor.com/dow ...

  10. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（43）-工作流设计-字段分类设计

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(43)-工作流设计-字段分类设计 系列目录 建立好42节的表之后,每个字段英文表示都是有意义的说明.先建立 ...