当网页被加载时，浏览器会创建页面的文档对象模型（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. 利用LibreOffice与ImageMagick将网页分享至微信

    现在越来越多的内容分享都是在微信上进行了.然而,若想将电脑浏览器中看到的感兴趣的网页分享至微信,则只能以纯文本的方式粘贴超级链接,而不能直接拷贝图文混排的HTML.因此,我想到不妨借助LibreOff ...

  2. HihoCoder

    #1043 : 完全背包 20160516 时间限制:20000ms 单点时限:1000ms 内存限制:256MB 描述 且说之前的故事里,小Hi和小Ho费劲心思终于拿到了茫茫多的奖券!而现在,终于到 ...

  3. Ecstore启用www.ecstore.com和m.ecstore.com域名

    Ecstore启用www.ecstore.com和m.ecstore.com域名 修改config/mapper.php if($_SERVER['SERVER_NAME']=='www.ecstor ...

  4. Php函数完整参考手册

    序号 分类 描述 1 Array 函数 2 Calendar 函数 日历扩展包含了简化不同日历格式间的转换的函数. 3 Date/Time 函数 Date/Time 函数用于从 PHP 脚本运行的服务 ...

  5. NYOJ-1057 寻找最大数（三）（贪心）

    寻找最大数(三) 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 给出一个整数N,每次可以移动2个相邻数位上的数字,最多移动K次,得到一个新的整数. 求这个新的整数的 ...

  6. 绝对路径&相对路径

    被绝对路径和相对路径搞疯了,好多地方不一样,从今天开始,记录下来每次关于这个问题的记录,以备查用 css文件里: 绝对路径:以"/"开头,表示从项目的根目录开始

  7. window.open实现模式窗口(只弹出一个window.open)

    父页面 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> & ...

  8. Mongo组合索引优化

    包含了等值测试.排序及范围过滤查询的索引建立方法: 1. 等值测试 在索引中加入所有需要做等值测试的字段,任意顺序. 2. 排序字段(多排序字段的升/降序问题 ) 根据查询的顺序有序的向索引中添加字段 ...

  9. Java中新建子文件夹和新建文件

    File file = new File("地址"); file.mkdirs(); //新建文件夹,当没有父文件夹时,但是不会自动创建父文件夹 file.mkdirs(); // ...

  10. HDU Herding

    F - Herding Time Limit:1000MS       Memory Limit:32768KB      64bit IO Format:%I64d & %I64u Subm ...