DOM (JavaScript学习笔记)

DOM是针对HTML和XML文档的一个API(应用程序接口)。

IE中所有DOM对象都是以COM对象的形式实现的,所以IE中的DOM对象与原生JavaScript对象的行为或活动特点不一致,这个要注意。

1.节点层次

文档节点是每个文档的根节点.<html>元素是根节点的子节点,成为文档元素。文档元素是文档的最外层元素。每个文档只能有一个文档元素。

1.1Node类型

  NODE.ELEMENT_NODE(1)

  NODE.ATTRIBUTE_NODE(2)

  NODE.TEXT_NODE(3)

  NODE.COMMENT_NODE(8)

  NODE.DOCUMENT_NODE(9)

  NODE.DOCUMENT_TYPE_NODE(10)

  NODE.DOCUMENT_FRAGMENT_NODE(11)

(someNode.nodeType==1)用这种方式判断元素的类型,不要用someNode.nodeType == NODE.ELEMENT_NODE,因为IE浏览器不支持

(1)nodeName和nodeValue

如果是元素节点,nodeName为标签名,nodeValue为null

(2)节点关系

childNodes属性

每个节点都有一个childNodes属性,其中保存着一个NodeList对象,是基于DOM结构动态执行查询的结果。访问NodeList中的元素,可以用[序号]或者用someNode.childNodes.item(序号)两种方法。

NodeList是类数组对象,可以转换成数组:

var nodeArray=Array.prototype.slice.call(someNode.childNodes,0);

(在IE中,需要手动枚举所有成员)

parentNode属性

nextSibling属性

previousSibling属性

firstChild属性

lastChild属性

hasChildNodes()方法:在节点包含一个或者多个子元素的时候会返回true

ownerDocument属性:指向表示整个文档的文档节点

(3)操作节点

appendChild(newNode)方法:向childNodes列表的末尾添加一个节点。若是传入的node在childNodes列表中有,会将这个node从原来的位置移动到最后。返回值为newNode

insertBefore(newNode,refNode)方法:在参考node前插入新的node,若参考节点为null则和appendChild()方法一样。返回值是newNode

replaceChild(插入节点,被替换节点)方法:删除被替换节点,插入节点占据其位置。返回值是被替换节点。即被替换节点仍在文档中,不过没有了自己的位置~~~

removeChild(被删除的节点)方法:返回被删除的节点,也是依然在文档中,但是没有了自己的位置

这四个方法都要取得父元素

(4)其它方法

someNode.cloneNode():参数为true,拷贝元素和子元素;false 拷贝元素本身

someNode.normalize():删除空的文本节点,合并两个相邻的文本节点

时间: 2024-08-07 19:33:50

DOM (JavaScript学习笔记)的相关文章

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程

HTML DOM(学习笔记二)

嗯,在HTML DOM(学习笔记一)中简单描述了一下HTML DOM 是什么,这一篇将记录下来有关HTML DOM的内容! 1:DOM节点 首先,再来看一下HTML DOM的树状结构,如下图所示: 这就是我们要处理的HTML DOM 也就是一种HTML文档的另一种表现的形式,更加接近我们的HTML文档的表现形式的样式是这样的,如下图所示: 在HTML DOM中,所有的事物都是节点.HTML DOM就是被视为节点树的HTML.根据W3C的HTML DOM标准,HTML文档中所有内容都是节点,如上图

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 定义了"对象定

javascript学习笔记---ECMAScriptECMAScript 对象----定义类或对象

使用预定义对象只是面向对象语言的能力的一部分,它真正强大之处在于能够创建自己专用的类和对象. ECMAScript 拥有很多创建对象或类的方法. 原始的方式 因为对象的属性可以在对象创建后动态定义(后绑定),类似下面的代码: var oCar = new Object; oCar.color = "blue"; oCar.doors = 4; oCar.mpg = 25; oCar.showColor = function() { alert(this.color); };不过这里有一

javascript学习笔记---ECMAScriptECMAScript 对象----修改对象

通过使用 ECMAScript,不仅可以创建对象,还可以修改已有对象的行为. prototype 属性不仅可以定义构造函数的属性和方法,还可以为本地对象添加属性和方法. 创建新方法 通过已有的方法创建新方法Number.prototype.toHexString = function() { return this.toString(16); }; 在此环境中,关键字 this 指向 Number 的实例,因此可完全访问 Number 的所有方法.有了这段代码,可实现下面的操作: var iNu

javascript学习笔记---ECMAScript语法(辅助)

1.区分大小写. test与Test变量是两个不同的变量 2.变量是弱变量. 与C,java等等语言变量不是很一样. 如下java代码 ? 1 2 3 4 int i =0; //再次赋值 i = 10;//ok i = "hello";//wrong 类型不匹配 javascript ? 1 2 3 4 var i = 9; //再次赋值 i = 10;//ok i = "hello";//ok 但是不建议这么干,如此会给开发造成干扰,不明确变量的类型.(变量命名