js dom文档对象模型一[入门篇]

上篇文章纳闷的问题,将在这章和以后的几章里,慢慢搞定。
从今天起,开始学习DOM编程  让我们慢慢称为一名初级的js程序员。
然后往js匠人方向发展。

学习英文:
Dom:文档对象模型。Document object model
Bom:浏览器对象模型。
注:也可以叫窗口对象模型。(window object model.)
API:应用编程接口。
注:DOM其实可以看作一种API。
Node:节点。
注:节点分为:元素节点,属性节点,文本节点。
元素节点 包含 属性节点和文本节点。

Dom树:

 

下面我们直接看 到底怎么操作DOM。
创建元素节点。createElement():
<SCRIPT LANGUAGE="JavaScript">
 var a  = document.createElement("p");
 alert( "节点类型是  : " +a.nodeType   +  " , 节点名称是: "  +  a.nodeName);
</SCRIPT>
输出  ;     nodeType 是  1   .    a.nodeName 是  p ;
所以它创建的是一个元素节点 ….你也许会想  为什么文档中没发现 节点 p呢?
我们看下面例子:
<body>
</body>
<SCRIPT LANGUAGE="JavaScript">
var a  = document.createElement("p");
document.body.appendChild(a);
</SCRIPT>
用firebug查看下,发现文档中已经 有我们需要的结果了。

原来createElement()方法创建出来的新元素节点不会被自动添加到文档里,既然没添加到文档里,说明它还是一个游离的状态。如果想把它添加到文档里,可以使用 appendChild()或者insertBefore()方法或者replaceChild()方法(后面介绍)。

2,创建文本节点。createTextNode():
 var b = document.createTextNode("my demo");
 alert( "节点类型是  : " +b.nodeType   +  " , 节点名称是: "  +  b.nodeName);
输出  ;     nodeType 是  3   .    a.nodeName 是  #text ;
所以它创建的是一个文本节点 ….你也许又会想  为什么文档中没发现 这个文本节点 呢?难道也和createElement()一样,需要使用appendChild()添加到文档里。

对的,你的想法非常对。
我们看下面例子:
<body>
</body>
<SCRIPT LANGUAGE="JavaScript">
var mes = document.createTextNode("hello world");
var container = document.createElement("p");
container.appendChild(mes);//先把文本节点添加到 元素节点
document.body.appendChild(container);//再把元素节点添加到 文档里
</SCRIPT>

时间: 2024-08-02 07:23:58

js dom文档对象模型一[入门篇]的相关文章

js dom文档对象模型节点二[入门篇]

复制节点.cloneNode(boolean) :一个参数: 看一个例子: <body> </body> <SCRIPT LANGUAGE="JavaScript"> var mes = document.createTextNode("hello world"); var container = document.createElement("p"); container.appendChild(mes);

MDN 文档对象模型 (DOM) - DOM概述

在本文章中 什么是 DOM? DOM 和 JavaScript 如何访问 DOM? 重要的数据类型 DOM 接口 接口及对象 DOM中核心接口 测试DOM API 本节提供了一个简单的概念性的DOM介绍:DOM是什么, 它是如何组织 HTML 及 XML 文档,你要如何访问它,这个API提供了那些参考信息和实例.  什么是 DOM? 文档对象模型 (DOM) 是HTML和XML文档的编程接口.它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和

JavaScript学习总结(一)——ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)

一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,主要用来给HTML增加动态功能. 几乎所有主流的语言都可以编译为JavaScript,进而能够在所有平台上的浏览器中执行,这也体现了JavaScript的强大性和在Web开发中的重要性.如Blade:一个Visual Studio扩展,可以将C#代码转

Nodejs学习笔记之入门篇_node.js

分享第一篇,关于 NodeJS -- Javascript 的常用知识以及如何从 Javascript 开发者过渡到 NodeJS 开发者(不会介绍具体的框架).在读本文前,希望你对 javascript 有一些初步的认识. Javascript 是一门原型模型的解释型语言.解释型将在后面的 NodeJS 里面讨论,原型链是 ES6 之前的 Javascript 的面向对象的实现方式之一,在 ES6 中支持的 class 增加了一种新的实现方式.在 Javascript 里面所有东西都是对象,包

《HTML5 Canvas开发详解》——1.3 文档对象模型(DOM)和Canvas

1.3 文档对象模型(DOM)和Canvas 文档对象模型代表了在HTML页面上的所有对象.它是语言中立且平台中立的.它允许页面的内容和样式被Web浏览器渲染之后再次更新.可以通过JavaScript访问DOM,从20世纪90年代末以来它已经成为JavaScript.DHTML和CSS开发最重要的一部分. 画布元素本身可以通过DOM,在Web浏览器中经由Canvas 2D上下文访问,但是在Canvas中创建的单个图形元素是不能通过DOM访问的.正如本章前面讲到的,这是因为画布工作在即时模式,它并

什么是DOM(Document Object Model)文档对象模型_DOM

D:document 文档 浏览器加载的页面 DOM O:object 对象 页面及页面中的任何元素都是对象 M:module 模型 页面中的元素的组织形式 DOM被W3C组织设计为一种平台无关.语言无关的API,程序或脚本通过其动态访问.修改文档的内容.样式.结构. DOM是web 浏览器的运行规范,javascript借助DOM成就了其web标准语言的地位,在web领域实现了所谓"一次编写到处运行"的目标. 文档对象模型(Document Object Model,DOM)是一种用

JavaScript对传统文档对象模型的支持

         这篇文章主要介绍了简述JavaScript对传统文档对象模型的支持,是JS学习进阶中的重要知识,需要的朋友可以参考下             这是将其在JavaScript语言早期版本中引入的模型.大家都被所有浏览器都支持,但只允许访问文件的某些关键部分,如表单,表单元素和图像.         该模型提供了若干个只读属性,如标题,URL和上次更改提供关于文档整体的信息.除了有由该模型可用于设置和获取文档的属性值提供各种方法. 文档属性在传统DOM: 下面是文档属性,可以使用传

jQuery 学习入门篇附实例代码_jquery

程序代码 window.onload = function(){ ... } . 访问HTML文档的元素,必须先载入文档对象模型(DOM).当window.onload函数执行的时候,说明所有东西已经载入,包括图像和横幅等等.要知道较大的图片下载速度会比较慢,因此用户必须等待大图片下载完毕才能看到window.onload()执行的代码效果,这样就花费了很长的等待时间,这不是我们想要的. 对于此,jquery提供了一个"ready"事件,你可以使用以下的代码片段: 程序代码 $(doc

jQuery 开天辟地入门篇一_jquery

一.摘要 二.前言 三.什么是jQuery jQuery是一套Javascript脚本库. 在我的博客中可以找到"Javascript轻量级脚本库"系列文章. Javascript脚本库类似于.NET的类库, 我们将一些工具方法或对象方法封装在类库中, 方便用户使用. 注意jQuery是脚本库, 而不是脚本框架. "库"不等于"框架", 比如"System程序集"是类库,而"ASP.NET MVC"是框架.