javascript 之DOM篇
要怎么样的开场白才能使我有力气再更新学习进度呢？啊啊啊啊啊，表示好累啊~~~默念“棒棒棒，我最棒~”召唤精气神开总结敲字咯。哈哈哈。
-----------------------------------------------------------------------------------------------
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篇的更多相关文章
- javascript之DOM篇二（操作）
一.创建DOM元素 createElement:document.createElement(' 所要创建的元素标签名'): <!DOCTYPE html><html>< ...
- javascript之DOM篇一
一.什么是DOM DOM是用来操作页面,如div的获取,修改样式 二.DOM节点 标签(css)=元素(js)=节点(DOM) 1.子节点 childNodes 仅算父元素下的第一层 <!DOC ...
- 前端开发之JavaScript HTML DOM理论篇一
主要内容: 1.DOM简介 2.DOM 节点 3.DOM 方法和属性 4.DOM 访问和修改 一.DOM简介 1.什么是 DOM? DOM 是 W3C(万维网联盟)的标准. DOM 定义了访问 HTM ...
- Javascript中DOM技术的的简单学习
第十四课DOM技术概述1:DOM概述 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...
- 第十五章：Python の Web开发基础 (二) JavaScript与DOM
本課主題 JavaScript 介绍 DOM 介绍 JavaScript 介绍 JavaScript 是一门编程语言,它可以让网页动起来的,JavaScript 的变量有两种,一个是局部变量:一个是全 ...
- JavaScript之DOM创建节点
上几篇文章中我们罗列了一些获取HTML页面DOM对象的方法,当我们获取到了这些对象之后,下一步将对这些对象进行更改,在适当的时候进行对象各属性的修改就形成了我们平时看到的动态效果.具体js中可以修改D ...
- JavaScript之DOM对象的获取
之前我们讲过JavaScript之DOM对象获取的两篇文章,本文是该系列文章之三,点击回顾上两篇文章能更好地理解本文.<JavaScript之DOM对象的获取(一)>: <JavaS ...
- JavaScript与DOM（上）
本来像自己写一篇的...结果看到了Tom uncle的这篇..总结的确实很赞,其他文章也非常好推荐 转载自:http://www.cnblogs.com/TomXu/archive/2011/12/1 ...
- JavaScript性能优化篇js优化
JavaScript性能优化篇js优化 随着Ajax越来越普遍,Ajax引用的规模越来越大,Javascript代码的性能越来越显得重要,我想这就是一个很典型的例子,上面那段代码因为会被频繁使用, ...
随机推荐
- 2016年QS亚洲大学排行榜
2016年QS亚洲大学排行榜 人民网北京6月14日电 (记者 郝孟佳)今天,全球高等教育分析机构QS全球教育集团发布了2016年QS亚洲大学排名.清华大学在亚洲20强大学中进步最大,比去年提升6名,上 ...
- 身为java程序员你需要知道的网站(包含书籍,面试题,架构...)
推荐几本书<高级java程序员值得拥有的10本书>, 首页 所有文章 资讯 Web 架构 基础技术 书籍 教程 我要投稿 更多频道 » - 导航条 - 首页 所有文章 资讯 Web ...
- IP定位 C#
IP定位 已经不是什么新的技术,但是在做项目中却会常常用到.找网上找了许久,也做了许多的实验,觉得QQwry.dat,很很好用的,作者也提供了开发的源码和大家分享. 在这里感谢作者.我在项目中也用到了 ...
- HDU-2126 Buy the souvenirs
数组01背包. http://acm.hdu.edu.cn/showproblem.php?pid=2126 http://blog.csdn.net/crazy_ac/article/details ...
- implicitly_wait()隐式等待
# -*- coding:utf-8 -*- """ implicitly_wait():隐式等待 当使用了隐士等待执行测试的时候,如果 WebDriver没有在 DOM ...
- HDOJ/HDU 2539 点球大战(String.endsWith()方法的一个应用~)
Problem Description 在足球比赛中,有不少赛事,例如世界杯淘汰赛和欧洲冠军联赛淘汰赛中,当比赛双方经过正规比赛和加时赛之后仍然不分胜负时,需要进行点球大战来决定谁能够获得最终的胜利. ...
- VS2010 MFC GDI+ 实现PNG透明图片显示
网上找了一些资料学习了一下PNG图的显示,这里总结一下. 参考:http://blog.csdn.net/czyt1988/article/details/7965066 一.VS2010配置GDI+ ...
- nginx主配置文件 在那找怎么打开
- Top 10 Java Debugging Tips with Eclipse
In this tutorial we will see about debugging java applications using Eclipse. Debugging helps us to ...
- zy 送画
问题描述 话说在军训的倒数第二天,zy终于下定决心要将画了 10天之久的画像送给他心怡的法学院mm.但是,他不敢自己一个人去,倒霉的 kk 只能和他一起去了.不过,为了表现的有诚意,kk和zy不能走在 ...