当网页被加载时，浏览器会创建页面的文档对象模型（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. Fedora25

    Fedora默认情况是没有装flash的,首先输入https://get.adobe.com/flashplayer/?loc=cn,选择.rpm包,点击立即下载,下载完成后进到download目录, ...

  2. 关于Java集合

    之前关于java集合认识,虽然理解,但是总是忘记关键点,今明两天写一篇关于集合的随笔

  3. mx51的三个framebuffer，mxc_ipuv3_fb.c分析

    转载:http://blog.csdn.net/jack_a8/article/details/43309169 mx51支持三个framebuffer:fb0, fb1, fb2 /dev/grap ...

  4. jquery点击选中，再次点击取消选中

    if(!$(this).hasClass("current")){ $(this).addClass("current"); }else{ $(this).re ...

  5. Scrapy框架使用—quotesbot 项目（学习记录一）

    一.Scrapy框架的安装及相关理论知识的学习可以参考:http://www.yiibai.com/scrapy/scrapy_environment.html 二.重点记录我学习使用scrapy框架 ...

  6. 2017-1-15-libubox analysis

    2017-1-15-libubox analysis libubox utils.h utils.h 提供了一些简单的实用工具函数.比如大小端转换,位图操作,编译器属性的封装,连续内存申请函数call ...

  7. 查询被收录页面中的死链接 By SEO

    朋友说他的站挂了,想知道被收录的页面有多少是死链,于是我就想了一下流程,从Site获得收录数量当然是不精准的,不过也没有更好的地了,真实的收录只有搜索引擎数据库里面才有... 查询被收录页面的状态码, ...

  8. Xcode-之CocoaPads

    一.说明 CocoaPods是OS X和iOS下的一个第三类库管理工具,通过CocoaPods工具我们可以为项目添加被称为“Pods”的依赖库(这些类库必须是CocoaPods本身所支持的),并且可以 ...

  9. POJ 2656 Unhappy Jinjin

    #include <stdio.h> int main() { ) { int i, n; ; scanf("%d", &n); ) break; ; i &l ...

  10. linux搭建phantomjs+webdriver+testng+ant自动化工程

    因为项目的原因,需要将脚本在linux环境无浏览器化去跑,那么原有的在windows系统下有浏览器化的自动化脚本场景就不适用了,这里给出linux系统下搭建phantomjs+webdriver+te ...