当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

//显示，改变html内容

document.getElementById("p1").innerHTML="New text!";

//显示，改变html属性

document.getElementById("image").src="landscape.jpg";

//显示，改变html CSS

document.getElementById("p2").style.color="blue";

//使用 HTML DOM 来分配事件

document.getElementById("myBtn").onclick=function(){displayDate()};
<!--

增加HTML元素

首先添加元素，然后添加文本节点，随后在之前的元素上追加文本节点，

最后在已有的元素上追加之前创建的DOM元素

-->

<!DOCTYPE html>

<html>

<body>

<div id="div1">

<p id="p1">这是一个段落。</p>

<p id="p2">这是另一个段落。</p>

</div>

<script>

var para=document.createElement("p");

var node=document.createTextNode("这是新段落。");

para.appendChild(node);

var element=document.getElementById("div1");

element.appendChild(para);

</script>

</body>

</html>
<!--

删除已有的HTML元素

先找出该元素的父元素，然后再找出该元素，

在父元素的基础上删除

-->

<!DOCTYPE html>

<html>

<body>

<div id="div1">

<p id="p1">这是一个段落。</p>

<p id="p2">这是另一个段落。</p>

</div>

<script>

var parent=document.getElementById("div1");

var child=document.getElementById("p1");

parent.removeChild(child);

/*

或这么写，不用找父元素

var child=document.getElementById("p1");

child.parentNode.removeChild(child);

*/

</script>

</body>

</html>

dom入门的更多相关文章

  1. JavaScript DOM编程基础精华01（DOM入门，DOM模型和获取页面元素,事件，window对象的方法）

    DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...

  2. JavaScript Dom入门

    好像代码太杂了,博客园里跑不起来,单独复制到html中本地测试都是没有问题的. JavaScript JavaScript 是属于 web 的语言,它适用于 PC.笔记本电脑.平板电脑和移动电话. J ...

  3. DOM入门。

    DOM  Document Object Model  文档对象模型,dom就是HTML页面的模型,将每个标签都作为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框,层 ...

  4. JavaScript HTML DOM 入门详解

    HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. HTML DOM 树 通过 ...

  5. 通俗易懂的来讲讲DOM——科普性质的DOM入门教程

    DOM这个东西很重要,不过初学的时候很容易蒙,什么Document.Element.Node用官方语言来解释根本就不是人话,只能在实践中硬着头皮一点一点尝试.今天要推荐的是一篇关于DOM的博客.说是教 ...

  6. CSS和DOM入门

    CSS补充: - position - background - hover - overflow - z-index - opacity 示例:输入框右边放置图标 JavaScript: 局部变量 ...

  7. js之DOM入门（慕课网学习笔记）

    DOM简介 获得元素 document.getElementById('') 1.通过id获得元素内容 document.getElementsByTagName('') 2.通过标签获得元素内容 d ...

  8. 《CSS网站布局实录》学习笔记（四）

    第四章 CSS网站元素设计 4.1 网站导航 网站导航是网站中最重要的元素.从形式上看,网站导航主要分横向导航.纵向导航.下拉及多级菜单导航灯3种常见形式. 横向导航:作为门户网站的设计而言,主导航一 ...

  9. 15个HTML元素方法!

    首先让我们来讨论一下 HTML 与 DOM 之间的区别. 显然,普通的 <table> 元素就是一段 HTML 代码,它可以应用在任何一个以 .html 为扩展名的文件中.元素自带一系列特 ...

随机推荐

  1. Excel的 OleDb 连接串的格式(Provider=Microsoft.ACE.OLEDB)

    string strCon = "Provider=Microsoft.ACE.OLEDB.12.0;data source=" + filePath + ";Exten ...

  2. PowerTool(杀毒辅助工具) V4.6 中文免费绿色版

    软件名称: PowerTool(杀毒辅助工具)软件语言: 简体中文授权方式: 免费软件运行环境: Win7 / Vista / Win2003 / WinXP 软件大小: 968KB图片预览: 软件简 ...

  3. Wise Registry Cleaner Pro(智能注册表清理) V9.31 绿色版

    软件名称: Wise Registry Cleaner Pro(智能注册表清理)软件语言: 简体中文授权方式: 免费试用运行环境: Win7 / Vista / Win2003 / WinXP 软件大 ...

  4. 转：【译】Asp.net MVC 利用自定义RouteHandler来防止图片盗链

    [译]Asp.net MVC 利用自定义RouteHandler来防止图片盗链   你曾经注意过在你服务器请求日志中多了很多对图片资源的请求吗?这可能是有人在他们的网站中盗链了你的图片所致,这会占用你 ...

  5. css3学习01

    1.圆角边框(div的一个属性:border-radius) <!DOCTYPE html> <html> <head> <style> div { t ...

  6. JMM内存管理

    原文地址http://www.cnblogs.com/BangQ/p/4045954.html 原本准备把内存模型单独放到某一篇文章的某个章节里面讲解,后来查阅了国外很多文档才发现其实JVM内存模型的 ...

  7. instanceof运算符、Class的isInstance( )与isAssignableFrom之间的区别

    instanceof运算符 只被用于对象引用变量,检查左边的被测试对象 是不是 右边类或接口的 实例化.如果被测对象是null值,则测试结果总是false.形象地:自身实例或子类实例 instance ...

  8. 【JS】学习18天Jquery Moblie的总结笔记。

    现在是2013年11月18日1:53分,从1号开始学习JqueryMoblie(简称JQM),这些天遇到的问题,和走的弯路还真不少. 先做个小总结,做了那么多天的一些收获: ●JQM是一个手机网站/轻 ...

  9. Strusts2--课程笔记7

    国际化: 国际化是指,使程序在不做任何修改的情况下,就可以使用在不同的语言环境中.国际化在一般性项目中是不常用的.在编程中简称 i18n. 国际化是通过读取资源文件的形式实现的.资源文件的定义与注册, ...

  10. scala集合和高级函数操作

    scala常用函数操作 reduceLeft   是将集合的元素从左向右进行所需要的相应操作,图以减法为例展示,表达的算法是 : 1-2-3-4-5 例: (1 to 5).reduceLeft(_ ...