DOM (JavaScript学习笔记)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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():删除空的文本节点,合并两个相邻的文本节点

 

以上是关于DOM (JavaScript学习笔记)的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript学习笔记(10)——JavaScript语法之操作DOM

javascript学习笔记:DOM节点概述

JavaScript DOM编程艺术学习笔记

DOM (JavaScript学习笔记)

HTML 学习笔记 JavaScript (DOM)

JavaScript DOM编程艺术学习笔记