当网页被加载时，浏览器会创建页面的文档对象模型（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. Opencv+MFC获取摄像头数据，显示在Picture控件

    分为两步:OpenCV获取摄像头数据+图像在Picture上显示 第一步:OpenCV获取摄像头数据 参考:http://www.cnblogs.com/epirus/archive/2012/06/ ...

  2. jquery中的serialize

    jquery中的serialize对serializeArray进行了封装,serializeArray源码中定义将disabled的过滤掉,所以提交后值为null 解决方式是:在提交的时候,讲dis ...

  3. ps -ef |grep 输出的具体含义

    [root@localhost ~]# ps -ef | grep ApacheJetspeed root     18887 18828  0 08:09 pts/0    00:00:00 gre ...

  4. python setup.py install 报错ImportError: No module named setuptools

    学习光荣之路python课程时,使用python setup.py install安装其他模块时,第一次安装某模块成功了.安装另一模块却报错ImportError: No module named s ...

  5. Nopi Excel导入

    http://download.csdn.net/detail/diaodiaop/7611721 using System.Collections.Generic; using System.Dat ...

  6. ubuntu 开机进入不了图形界面

    在开机的时候有注意到空间不足.第二天重启的时候进入不了系统. 但是 ctrl + alt _F6 可以进入shell  . 于是估计是空间不足导致进入不了系统. 找到哪里文件夹空间异常的大就可以解决问 ...

  7. js replace(a,b)之替换字符串中所有指定字符的方法

    var str = 'abcadeacf'; var str1 = str.replace('a', 'o'); alert(str1); // 打印结果: obcadeacf var str2 = ...

  8. php 设置白名单ip

    //检查白名单ip private function _checkAllowIp() { $allowIp = ['203.195.156.12']; $ip = $this->getIp(); ...

  9. Samba: Server setup..

    To make samba shard folder permission clear, there are 3 kind of permission need to be paid attentio ...

  10. OSGI.NET，请求因HTTP状态404 失败：Not Found

    在VS里使用OSGI.NET可以正常运行项目和插件,开放工厂远程管理工具也可以使用,没有任何异常.可是,当我把项目部署到IIS上,网站可以正常运行,插件也正常:使用开放工厂远程管理工具时,就出现&qu ...