JavaScript学习笔记（四）——DOM
第五章 网页交互——文本对象模型【Document object model】
1 简单介绍DOM，dom是将html与javascript进行交互的工具。
【使用innerHTML时注意：html中的内容是按照HTML本身的先后顺序加载的。故js对应代码应置于html之后】
问题：
*document.getElementById时，id不存在返回null，存在返回对应字符串；
*planet.innerHTML其中innerHTML属性可以修改字符串的内容；
*getElementsByClassName可以返回类名的元素集合；
*getElementsByTagName返回与指定标签名匹配的元素；
*innerHTML甚至可以替换整个body的内容；
2 介绍window.onload=函数名;
回调函数，在网页加载完毕后再回调onload指向的指定函数。
3 关于元素的修改
（1）添加新元素
<!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);//为p添加文本
//为div1添加元素
var element=document.getElementById("div1");
element.appendChild(para);
</script>
</body>
</html>
（2）修改元素
var planet=document.getElementById("p2");//获取DOM指定ID的元素
planet.innerHTML="Red Alert:hit by phaser fire!";//使用innerHtml属性修改内容
（3）删除元素
<!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);//删除
</script>
</body>
</html>
4 特性
（1）设置setAttribute();
例如：
planet.setAttribute("class","redtext");//为planet添加一个class名为redtext
（2）获取特性getAttribute();
例如：
var alttext=scoop.getAttribute("alt");//其中scoop类似于planet，alt为获取其值的特性的名称？？
5 完整例子
<!doctype html>
<html lang="en">
<head>
<title>My blog</title>
<meta charset="utf-8">
<style type="text/css">
.redtext{
color:red;
}
</style>
<script language="JavaScript" type="text/JavaScript">
function inni(){
var planet=document.getElementById("p2");//获取DOM指定ID的元素
planet.innerHTML="Red Alert:hit by phaser fire!";//使用innerHtml属性修改内容
planet.setAttribute("class","redtext");//设置特性
var attribute=planet.getAttribute("text");//获取特性，返回为null，不太清楚什么是特性？
console.log("I'm not see the image in the console,but I'm told it looks like:"+attribute);
}
window.onload=inni;
</script>
</head>
<body>
<h1>My blog</h1>
<div id="entry1">
<h2>Great day bird watching</h2>
<p id="p1">
Today I saw three ducks!<br />
I named them <br />
Huey,Louie,and Dewey.
</p>
<p id="p2">
I took a couple of photos...
</p>
</div>
</body>
70 </html>
JavaScript学习笔记（四）——DOM的更多相关文章
- javascript学习笔记(四) Number 数字类型
数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数 toExponential() 方法 用科学 ...
- Javascript学习笔记四——操作表单
Javascript学习笔记 大多网页比如腾讯,百度云之类的需要登陆,用户输入账号密码就可以登陆,那么浏览器是如何获取用户的输入的呢?今天就记录一下操作表单. 操作表单与操作DOM是差不多的,表单本身 ...
- javascript学习笔记之DOM与表单
DOM(文档对象模型),猫叔了一个层次化的节点树 一.DOM NODE相关公共属性与方法 DOM中所有节点都实现了NODE接口,该接口的公共属性和方法如下: 1.节点基本属性 1)NodeType 节 ...
- JavaScript学习笔记之DOM介绍
目录 1.简介 2.方法 3.属性 4.访问节点 5.修改节点 6.添加节点 7.删除节点 8.替换节点 9.改变 CSS 1.简介 文档对象模型(Document Object Model,DOM) ...
- javascript学习笔记之DOM
DOM(文档对象模型),描述了一个层次化的节点树 一.DOM NODE相关公共属性与方法 DOM中所有节点都实现了NODE接口,该接口的公共属性和方法如下: 1.节点基本属性 1)NodeType 节 ...
- JavaScript学习笔记(四)——jQuery插件开发与发布
jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...
- JavaScript 学习笔记-HTML&&DOM
HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. JavaScript 能够 ...
- JavaScript学习笔记(四十四) 装饰器
装饰器模式(Decorator) 在装饰器模式中,可以在运行时给一个对象动态的添加额外的功能.当和静态类打交道的时候(static classes),这可能是一个挑战.但在JavaScript中,对象 ...
- JavaScript学习笔记之DOM对象
目录 1.Document 2.Element 3.Attribute 4.Event 1.Document 每个载入浏览器的 HTML 文档都会成为 Document 对象,Document 对象允 ...
- Javascript学习笔记三——操作DOM（二）
Javascript学习笔记 在我的上一个博客讲了对于DOM的基本操作内容,这篇继续巩固一下对于DOM的更新,插入和删除的操作. 对于HTML解析的DOM树来说,我们肯定会时不时对其进行一些更改,在原 ...
随机推荐
- Java语言实现通过Ajax抓取后台数据及图片
1.Java语言实现通过Ajax抓取后台数据及图片信息 1.1数据库设计: create table picture( pic_id number not null, pic_name )not nu ...
- Java中的集合框架-Collections和Arrays
上一篇<Java中的集合框架-Map>把集合框架中的键值对容器Map中常用的知识记录了一下,本节记录一下集合框架的两个工具类Collections和Arrays 一,Collections ...
- 实际SQL案例解决方法整理_LEAD函数相关
表结构及数据如下: 需求: 将记录按照时间顺序排列,每三条记录为一组,若第二条记录与第一条记录相差5分钟,则删除该记录,若第三条与第二条记录相差5分钟,则删除该记录, 第二组同理,遍历全表,按要求删除 ...
- Java多线程入门知识点梳理
前言 在多核时代,高并发时代,对系统并行处理能力有很高要求.多线程就是这个时代最好的产物.通过使用多线程可以增强系统并行处理能力,提高CPU资源的有效利用:从而提高系统的处理能力.常见应用场景如:多窗 ...
- Flash的swf文件破解
1.准备好flash文件,xxx.swf(后缀为swf),将其重构swf文件为fla源文件. 2.asv软件(5以上版本)的操作 1.点击左上角 文件 --> 打开 --> 运行已准备好的 ...
- Hadoop(12)-MapReduce框架原理-Hadoop序列化和源码追踪
1.什么是序列化 2.为什么要序列化 3.为什么不用Java的序列化 4.自定义bean对象实现序列化接口(Writable) 在企业开发中往往常用的基本序列化类型不能满足所有需求,比如在Hadoop ...
- 基于STM32的简易数码相册
原理:在板子上插入SD卡,并使用FATFS文件系统来循环读取并显示SD卡内的指定目录内的所有BMP图片. 这是显示效果(能上传视频的话就能看到循环显示效果): 因为图片显示函数显示的是24位BMP图片 ...
- 【转】ruby rake执行rspec
RSpec 是Ruby的一个行为驱动开发(BDD)工具,当前的版本是 2.10.根据其入门文档,安装好之后,可以使用 rspec 命令来运行“测试”.但在某些情况下,如果参数较多,使用该命令并不方便: ...
- PCB布线设计（1）
在PCB设计的时候,初学的时候对布线设计一无所知,那个时候老师布置 AT91SAM7X-开发板 作为学习例板 ,最终采用自动布线的结果如下 也并非全为自动布线,自动布线对于这种元器件稍多的很难全部 ...
- MySQL事务异常
在做大屏系统的时候,遇到十分奇怪的问题,同样的代码,测试环境插入与更新操作正常,但是上了生产环境之后,插入与更新不生效, 插入数据的时候,主键会自增,但是查询表中没有数据,同样一个@Transacti ...