第五章 网页交互——文本对象模型【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的更多相关文章

  1. javascript学习笔记(四) Number 数字类型

    数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数  toExponential() 方法 用科学 ...

  2. Javascript学习笔记四——操作表单

    Javascript学习笔记 大多网页比如腾讯,百度云之类的需要登陆,用户输入账号密码就可以登陆,那么浏览器是如何获取用户的输入的呢?今天就记录一下操作表单. 操作表单与操作DOM是差不多的,表单本身 ...

  3. javascript学习笔记之DOM与表单

    DOM(文档对象模型),猫叔了一个层次化的节点树 一.DOM NODE相关公共属性与方法 DOM中所有节点都实现了NODE接口,该接口的公共属性和方法如下: 1.节点基本属性 1)NodeType 节 ...

  4. JavaScript学习笔记之DOM介绍

    目录 1.简介 2.方法 3.属性 4.访问节点 5.修改节点 6.添加节点 7.删除节点 8.替换节点 9.改变 CSS 1.简介 文档对象模型(Document Object Model,DOM) ...

  5. javascript学习笔记之DOM

    DOM(文档对象模型),描述了一个层次化的节点树 一.DOM NODE相关公共属性与方法 DOM中所有节点都实现了NODE接口,该接口的公共属性和方法如下: 1.节点基本属性 1)NodeType 节 ...

  6. JavaScript学习笔记(四)——jQuery插件开发与发布

    jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...

  7. JavaScript 学习笔记-HTML&&DOM

    HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. JavaScript 能够 ...

  8. JavaScript学习笔记(四十四) 装饰器

    装饰器模式(Decorator) 在装饰器模式中,可以在运行时给一个对象动态的添加额外的功能.当和静态类打交道的时候(static classes),这可能是一个挑战.但在JavaScript中,对象 ...

  9. JavaScript学习笔记之DOM对象

    目录 1.Document 2.Element 3.Attribute 4.Event 1.Document 每个载入浏览器的 HTML 文档都会成为 Document 对象,Document 对象允 ...

  10. Javascript学习笔记三——操作DOM（二）

    Javascript学习笔记 在我的上一个博客讲了对于DOM的基本操作内容,这篇继续巩固一下对于DOM的更新,插入和删除的操作. 对于HTML解析的DOM树来说,我们肯定会时不时对其进行一些更改,在原 ...

随机推荐

  1. 一些有用的社区论坛，wiki网站（持续更新）

    1. IBM开发者(IBM developerwork): 这是一个比较全面的网站,上面有关于linux 管理.linux内核设计.存储等各个方面的知识,内容广泛,参考价值很高 http://www. ...

  2. 升级MAC OS到10.13, 10.14系统后UNITY工程无法加载资源的解决办法

    升级MAC OS到10.13, 10.14系统后,出现UNITY工程无法加载资源的情况: Unity项目中Asset目录显示为空! 解决办法一: 打开Launchpad中的磁盘工具 (也就是实用工具下 ...

  3. Eclipse中按CTRL键点击类不能进入

    是因为Eclipse或项目没有关联jdk,首先看window->preferences->java->Installed JREs,看是不是关联的你所安装的jdk,有的是关联的JRE ...

  4. iOS下ajax回调函数里不能播放audio

    iOS下audio必须监测到事件才可播放, ajax回调函数里不能播放 解决办法 在点击方法里先播放然后立即暂停,在回调函数里重新播放 onclick(function(){ $("#_wx ...

  5. MySQL----MySQL数据库入门----第五章 多表操作

    5.1 外键 比如说有两个数据表,分别是学生信息表student和年级表grade.在student表中有存储学生年级的字段gid(外键),在grade表也有存储学生年级的字段id(主键),stude ...

  6. C# 系统应用之鼠标模拟技术及自动操作鼠标

    游戏程序的操作不外乎两种——键盘输入控制和鼠标输入控制,几乎所有游戏中都使用鼠标来改变角色的位置和方向,本文主要是讲述如何使用C#调用Windows API函数实现鼠标模拟操作的功能.首先通过结合Fi ...

  7. iPhone Plus手机的分辨率到底是多少，是1080×1920还是1242×2208？

    近日在准备AppStore上架的时候,需要提供屏幕快照,苹果官方的要求是: 5.5寸的iOS设备的分辨率是:是1080×1920:然而我们如果找一张Plus的屏幕截图,会发现截图的分辨率是1242×2 ...

  8. NFS服务的搭建

    NFS服务的作用:提供网络文件系统给客户机 nfs服务器的安装配置和使用: 1.将已经制作好的文件系统rootfs_fs210_audio.tgz 拷贝到 /opt,并解压(这里的/opt目录是通过s ...

  9. 大数据Hadoop的HA高可用架构集群部署

        1 概述 在Hadoop 2.0.0之前,一个Hadoop集群只有一个NameNode,那么NameNode就会存在单点故障的问题,幸运的是Hadoop 2.0.0之后解决了这个问题,即支持N ...

  10. ant-design-pro弹出框表单设置默认值

    项目需求需要使用ant-design-pro的弹出框表单并在表单出现时设置默认值 然而按照官方的示例给 <Input> 标签设置 defaultValue 时发现并没有效果.如下所示: & ...