当网页被加载时，浏览器会创建页面的文档对象模型（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. Form提交时隐藏Token验证

    前端声称一个Token @Html.AntiForgeryToken() 后台对Token进行验证 AntiForgery.Validate();

  2. HTML5历史管理

    边看视频边做的练习,随机显示数字,分别使用history和hash来实现历史管理 <!doctype html> <html> <head> <meta ch ...

  3. 在spring拦截器中response输出html标签到页面

    @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object ...

  4. jetty启动https

    <Configure id="Server" class="org.eclipse.jetty.server.Server"> <!-- if ...

  5. OOP的方法

    <?php class Computer{ //我要创建一个构造方法 public function __construct(){ echo '我是比较先进的构造方法!'; //构造方法一般用于 ...

  6. stm32 串口乱码的解决

    版权声明:本文为博主原创文章. 前几天在中移物联网申请了一个迷你开发板,运行官方提供的程序,感觉板子是正常的.但是自己写的程序能够刷到板子上,但是串口却是乱码.官方和我的额程序都是用的库函数的方式写的 ...

  7. EditText文本中用正则匹配是否包含数字，及判断文本只能是纯汉字或纯字母

    遇到判断EditText中文本,是否为制定格式 EditText et; Button btn; @Override protected void onCreate(Bundle savedInsta ...

  8. Android5.1源码Xposed框架编译

    介绍 Xposed框架是一款可以在不修改APK的情况下影响程序运行(修改系统)的框架服务,基于它可以制作出许多功能强大的模块,且在功能不冲突的情况下同时运作 . 对于Android5.1系统,官方提供 ...

  9. box2d 已知bug

    1.动态刚体与一个与静态刚体重叠的小的感应刚体在contactBegin时,有些时候无法侦测到

  10. 永洪BI配置测试及遇到的一些问题

    1.连oracle 11g数据库遇到密码不能验证通过. 在11g中, 数据库默认密码的大小写是敏感的,jdbc在给oracle密码时, 会将其变成大写.其他个别情况也会出现变成小写的. 为统一,去除o ...