dom入门
当网页被加载时,浏览器会创建页面的文档对象模型(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入门的更多相关文章
- JavaScript DOM编程基础精华01(DOM入门,DOM模型和获取页面元素,事件,window对象的方法)
DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...
- JavaScript Dom入门
好像代码太杂了,博客园里跑不起来,单独复制到html中本地测试都是没有问题的. JavaScript JavaScript 是属于 web 的语言,它适用于 PC.笔记本电脑.平板电脑和移动电话. J ...
- DOM入门。
DOM Document Object Model 文档对象模型,dom就是HTML页面的模型,将每个标签都作为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框,层 ...
- JavaScript HTML DOM 入门详解
HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. HTML DOM 树 通过 ...
- 通俗易懂的来讲讲DOM——科普性质的DOM入门教程
DOM这个东西很重要,不过初学的时候很容易蒙,什么Document.Element.Node用官方语言来解释根本就不是人话,只能在实践中硬着头皮一点一点尝试.今天要推荐的是一篇关于DOM的博客.说是教 ...
- CSS和DOM入门
CSS补充: - position - background - hover - overflow - z-index - opacity 示例:输入框右边放置图标 JavaScript: 局部变量 ...
- js之DOM入门(慕课网学习笔记)
DOM简介 获得元素 document.getElementById('') 1.通过id获得元素内容 document.getElementsByTagName('') 2.通过标签获得元素内容 d ...
- 《CSS网站布局实录》学习笔记(四)
第四章 CSS网站元素设计 4.1 网站导航 网站导航是网站中最重要的元素.从形式上看,网站导航主要分横向导航.纵向导航.下拉及多级菜单导航灯3种常见形式. 横向导航:作为门户网站的设计而言,主导航一 ...
- 15个HTML元素方法!
首先让我们来讨论一下 HTML 与 DOM 之间的区别. 显然,普通的 <table> 元素就是一段 HTML 代码,它可以应用在任何一个以 .html 为扩展名的文件中.元素自带一系列特 ...
随机推荐
- [SOJ]统计数字
Description 某次科研调查时得到了n个自然数,每个数均不超过1500000000(1.5*10^9).已知不相同的数不超过10000个,现在需要统计这些自然数各自出现的次数,并按照自然数从小 ...
- NVIC
1中断:每一个中断都会对应一个服务程序 2NVIC 他的做用是负责中断优先级管理 3IP bit[7:4]每一个中断都有一个IP寄存器,用于设置中断相关的属性 AIRCR[10:8]只一个AIRCR寄 ...
- java中异常处理机制的简单原理
以上是自认为的java异常处理的简单原理,如有不妥之处还请各位大神帮忙指点,谢谢!
- java中多态的使用
一.动手动脑 public class ParentChildTest { public static void main(String[] args) { Parent parent=new Par ...
- HTML表格标记
- NPM使用介绍
NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署的很多问题,常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用 允许用户NPM服务器下载并安装别 ...
- 【转】关于spring集合对象的补充
<span style="font-size:18px;">关于spring集合对象的补充 spring2.0中对集合对象有了改进,新增了一个<util>标 ...
- handler消息机制
MessageQueue代码:http://grepcode.com/file_/repository.grepcode.com/java/ext/com.google.android/android ...
- Linux服务器操作系统
Linux服务器操作系统 今日大纲 ● 服务器操作系统的系列.Linux的主流产品.虚拟机软件 ● 安装linux ● linux基本命令 ● 用户管理及权限(多用户) ● ...
- SSH综合练习-第1天
SSH综合练习-仓库管理系统-第一天 综合练习的整体目的: 整合应用 Struts2 .Hibernate.Spring .Mysql . jQuery Ajax.java基础知识 熟悉企业SSH 基 ...