javascript学习笔记之DOM

DOM(文档对象模型),猫叔了一个层次化的节点树

一、DOM NODE相关公共属性与方法

DOM中所有节点都实现了NODE接口,该接口的公共属性和方法如下:

1.节点基本属性

1)NodeType 节点类型,利用12个数值来表示。1代表Element,2代表attribute,3代表Text...

2) NodeName与NodeValue 这两个属性的值完全取决于特定的节点类型

2.节点关系相关属性

I.childNodes属性,返回一个NodeList对象,这是一个有生命,会呼吸的对象,能够实时,动态的反映节点结构。具有length属性,也可以利用方括号或者item()访问其中的节点。

II,parentNode属性,previousSibling属性,nextSibling属性,firstChild属性,lastChild属性。

IV,ownerDocument属性,该属性指向整个文档的文档节点Document.

3.操作节点相关方法

hasChildNodes()方法

1)appendChild()放回新增的节点

2)insertBefore()

3)replaceChild()

4)removeChild()

5)cloneNode()

6)normalize(),其 作用在于处理文档树中相邻的文本节点

4,查找节点的相关方法

1)getElementById() 返回元素,如果调用者是document,那么就在全文档范围内查找,如果是父元素,那么就在其后辈元素中查找

2)getElementsByTagsName() 返回NodeList,其他同上

5,补充

虽然DOM为操作节点提供了丰富的方法,但是在需要给文档插入大量新html标记的情况下,通过DOM仍然非常麻烦,因为不仅要创建一系列的DOM节点,还要小心地按照正确的顺序插入。因此DOM扩展中定义了一下属性:

1.innerHTML属性  在读模式下,innerHTML返回与调用元素的所有子节点对应的html标记。在写模式下,innerHTML会根据制定的值创建新的DOM树,然后用这个DOM树替换掉原来元素的所有子节点。

2)outerHTML属性  在读模式下,innerHTML返回与调用元素的所有子节点对应的html标记。在写模式下,innerHTML会根据制定的值创建新的DOM树,然后用这个DOM树完全替换掉原来元素。

二、document节点类型

其nodeType为9,nodeName为document,nodeValue为null

1.特有属性

1)docType属性,指向DocumentType子节点

2)documentElement属性,指向html元素

3)body属性,指向body元素

4)title属性,指向文档标题

5)url,domain,referer属性,和http头部的对象字段取值相同

2,特有方法

1)getElementsByName()在获取单元框选中值的时候很有用

2)write(),writeln()用于页面的输出流;

3)open(),close()用于打开和关闭输出流,如果是在页面加载期间使用write(),writeln(),则不需要用到上述两个方法

4)createElement()方法 创建element类型的节点

5)createTextNode()方法,创建Text类型的节点,接受一个参数,为要插入节点中的文本,需要注意的是,作为参数的文本将按照html或者xml的格式进行编码

6)createAttributeNode()方法,创建特性节点

三、Elemment类型

nodeType值为1,nodeName为标签名,nodeValue为null

1,特有属性

1)tagName属性 和 nodeName的返回值相同

2)id属性

3)title属性

4)className属性

5)attributes 除非要遍历元素的所有attribute,否则这个属性用的不多

6)style属性,如style.backGround 等,注意的是,这只能获取html代码中内嵌的样式,对于<style>标签中设置的样式,以及外联样式表中的样式,是没有办法获取的。

2,特有方法

1)getAttribute(),setAttribute()和removeAttribute()

四、Text类型

NodeType为3,NodeName为#text,nodeValue为节点所包含的文本

1,特有属性

1)data属性,和nodeValue的返回值相同。可以通过appendData(),deleteData(),insertData(offset,text),replaceData(offset,count,text),substringData(offset,count)等方法进行操作

2)length属性,返回文本中字符数目

备注:要访问Element元素中的文本,利用

div.firstChild.data来访问。或者div.childNodes[0].nodeValue来访问

五、attr类型

nodeType为1,nodeName为特性名称,nodeValue为特性的值。尽管他们也是节点,但特性并不被认为是dom文档树的一部分。通常使用getAttribute(),setAttribute(),removeAttribute()进行操作

最后:

需要注意的是,上述是基本的dom方法,随着前端技术的发展,目前dom也在不断改进,如继承了目前只有类库才提供的选择符方法,html5的data数据操作等。

时间: 2024-08-28 04:34:32

javascript学习笔记之DOM的相关文章

javascript学习笔记:DOM节点概述

0x01: DOM是javascript操作网页的接口,全称为文档对象模型(Document Object Model).它的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组成一个树状结构.DOM的最小组成单位叫做节点(node),文档的树形结构(DOM树)由12种类型的节点组成.本文将主要说明DOM节点类型.HTML DOM 定义了访问和操作 HTML 文档

javascript学习笔记:DOM节点关系和操作

0x01:前面的话 DOM可以将任何HTML描绘成一个由多层节点构成的结构.节点分为12种不同类型,每种类型分别表示文档中不同的信息及标记.每个节点都拥有各自的特点.数据和方法,也与其他节点存在某种关系.节点之间的关系构成了层次,而所有页面标记则表现为一个以特定节点为根节点的树形结构.本文将详细描述DOM间的节点关系和基础的DOM操作.节点中的各种关系可以用传统的家族关系来描述,相当于把文档树比喻成家谱.接下来,将把DOM节点关系分为属性和方法两部分进行详细说明. 0x02:属性 父级属性par

JavaScript学习笔记——5.DOM(文档对象模型)

1.获得对象方式 方法一 document.getElementsByTagName("div"); document.getElementById("head"); document.getElementsByName("username"); 方法二 //通过数组 document.all //存在为IE,不存在为FF document.body document.forms document.images document.links 2.

javascript学习笔记——如何修改&lt;a href=&quot;#&quot;&gt;url name&lt;/a&gt;

0.前言 使用了一段时间javascript,再花了点时间学习了jquery,但是总是感觉自己很"迷糊",例如<a href="#">url name</a>中,如果修改href中的"#"应如何编写代码,如果修改url name应如何编写代码.再加上javascript和jquery操作方法略有不同,所以我就更"迷糊"了. [说明] 曾经使用关键词--"innerHTML和value区别&qu

Java程序猿的JavaScript学习笔记(12——jQuery-扩展选择器)

计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript学习笔记(3--this/call/apply) Java程序猿的JavaScript学习笔记(4--this/闭包/getter/setter) Java程序猿的JavaScript学习笔记(5--prototype) Java程序猿的JavaScript学习笔记(6--面向对象模拟) Java程

Java程序猿的JavaScript学习笔记(9—— jQuery工具方法)

计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript学习笔记(3--this/call/apply) Java程序猿的JavaScript学习笔记(4--this/闭包/getter/setter) Java程序猿的JavaScript学习笔记(5--prototype) Java程序猿的JavaScript学习笔记(6--面向对象模拟) Java程

Javascript 学习笔记 2: 标识语句

可以在任何语句声明之前使用唯一标识(identifier)和冒号(:)用来标记该语句: identifier: statement 这样,你可以在程序的任何其他地方通过标识来使用这个语句.即使在语句内部也可以使用该语句的标识(例如:循环语句和条件语句).当在一个循环语句前添加一个标识,你可以在语句内部通过break 标识来退出当前循环,也可以通过continue标识来继续执行该语句.例如: mainloop: while(token != null) { // Code omitted... c

javascript学习笔记---ECMAScript-判断变量类型

判断类型之前,先要清楚有哪些类型. (理理思路:程序由数据和方法构成,数据由简单数据和复杂数据构成) 即类型有: 数据(简单数据:boolean,string,num,undefined,null.复杂数据:object), 方法(function) 万能的typeof,神一样的方法 typeof(1);// num typeof("hello");// string   typeof(false);// boolean var vFlag; typeof(vFlag);// unde

javascript学习笔记---ECMAScript语法(引用类型)

引用类型通常叫做类(class). 本教程会讨论大量的 ECMAScript 预定义引用类型. 引用类型 引用类型通常叫做类(class),也就是说,遇到引用值,所处理的就是对象. 本教程会讨论大量的 ECMAScript 预定义引用类型. 从现在起,将重点讨论与已经讨论过的原始类型紧密相关的引用类型. 注意:从传统意义上来说,ECMAScript 并不真正具有类.事实上,除了说明不存在类,在 ECMA-262 中根本没有出现"类"这个词.ECMAScript 定义了"对象定