Javascript–DOM_html/css_WEB-ITnose

Note:IE中的所有DOM对象都是以COM对象的形式实现的。这意味着IE中的DOM对象与原生Javascript对象的行为或活动特点并不一致。

DOM1级主要定义了HTML和XML的文档的底层结构。DOM2和DOM3级分为几个模块。

DOM2级核心(DOM Level 2 Core):在1级核心基础上构建，为节点添加了更多方法和属性

DOM2级视图(DOM Level 2 Views):为文档定义了基于样式信息的不同视图

DOM2级事件(DOM Level 2 Events):说明了如何使用事件与DOM文档交互

DOM2级样式(DOM Level 2 Style):定义了如何以编程方式来访问和改变CSS样式信息

DOM2级遍历和范围(DOM Level 2 Tranversal and Range):引入了遍历DOM文档和选择其特定部分的新接口。

DOM2级HTML(DOM Level 2 HTML):在1级HTML基础上构建，添加了更多属性、方法和新街口。

// 判断是否支持模块var DOM2Core = document.implementation.hasFeature('Core',2.0)

DOM2级核心

Node

DOM1级定义了一个Node接口。该接口将由DOM中的所有节点类型实现。

Javascript中的所有节点类型都继承自Node类型，因此所有节点类型都共享着相同的基本属性和方法。

兼容性:除IE外，其他所有浏览器都可以访问到这个类型

节点类型

每个节点都有一个 nodeType属性，用于表明节点的类型。

节点类型由在Node类型中定义的12个数值常量来表示，下面列出常用的几个。

Node.ELEMENT_NODE: 1

Node.TEXT_NODE: 3

Node.COMMENT_NODE: 8

节点信息

可以通过 nodeName和 nodeValue来了解节点信息。这两个属性取决于节点的类型。

在使用这两个节点之前，最好先检测一下节点类型。

如果节点是一个元素，nodeName中保存的始终是元素的标签名，而nodeValue值始终为0。

节点关系

每个节点都有一个 childNodes属性，其中保存着一个NodeList对象。NodeList对象是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。

hasChildNodes():这个方法在节点包含一个或多个子节点的情况下返回true。

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

// 将NodeList对象转换为数组var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0);

兼容性:IE8以及更早版本将NodeList实现为一个COM对象，因此上面的代码会导致错误。

Note:NdoeList对象的特殊之处在于，它实际上是基于DOM结构动态执行查询的结果，因此DOM的变化能直接反映在NodeList对象之中。它是有生命的对象，而不是在我们第一次访问它在某一个瞬间拍下的快照。

操作节点

appendChild():用于向childNodes列表的末尾添加一个节点。返回新增的节点。

insertBefore():接收两个参数:要插入的节点和作为参照的节点。插入节点后，被插入的节点会变成参照节点的前一个同胞节点。同时被方法返回。

replaceChild():接收两个参数:要插入的节点和要替换的节点。要替换的节点将由这个方法返回并从文档树中移除。同时由要插入的节点占据其位置。

removeChild():接收一个参数，即要移除的节点。返回被移除的节点。

这四个方法都是操作的某个节点的子节点，也就是说，要使用这几个方法必须先取得父节点。另外并不是所有节点都有子节点，如果在不支持子节点的节点上，调用了这些方法，将会导致错误。

Note:

如果传入到 appendChild()中的节点已经是文档的一部分，那结果就是将该节点从原来的位置转移到新位置。即使可以将DOM树看成是由一系列指针连接起来的，但任何DOM节点也不能同时出现在文档中的多个位置上。

在使用 replaceChild()插入一个节点时，该节点的关系指针都会从被它替换的节点复制过来。从技术上来讲，被替换的节点仍然还在文档中，但它在文档中已经没有了自己的位置。同样的， removeChild()移除的节点也同样为文档所有，只不过在文档中已经没有了自己的位置。

其他方法

有两个方法是所有类型节点都要的。

cloneNode()

    item 1    item 2    item 3  var myList = document.body.childNodes[1];var deepList = myList.cloneNode(true); //3 (IE

Note:

deepList.childNodes.length中的差异主要是因为IE8以及更早版本与其他浏览器处理空白字符的方式不一样。IE9以及之前版本不会为空白符创建节点。

cloneNode()方法不会复制添加到DOM节点中的Javascript属性，例如事件处理程序等。这个方法只复制特性，在明确指定的情况下也复制子节点，其他一切都不会复制。IE在此存在一个bug，即它会复制事件处理程序，所以建议，在复制之前最好先移除事件处理程序。

normalize()

Document类型–nodeType=9

Javascript通过Document类型表示文档。HTMLDocument继承自Document类型

1.document对象是HTMLDocument对象的实例2.document对象是window对象的一个属性，可以将其作为全局对象进行访问。

document instanceof HTMLDocument //trueHTMLDocument.__proto__ ==== Document //true

document作为我们操作文档的一个公共接口存在。

document信息

document.URL:包含页面完整的URL

document.domain:包含页面的域名

document.referrer:保存着链接到当前页面的那个页面的URL

在这三个属性中只有domain是可以设置的。但由于安全方面的限制，也并非可以给domain设置任何值。

不能将这个属性设置为URL中不包含的域

如果域名一开始是松散的，那么不能将它设置为紧绷的。

// 假设页面来自p2p.wrox.com域document.domain = 'wrox.com'; // 松散的,成功document.domain = 'nczonline.ne4t' // 出错document.domain = 'p2p.wrox.com'   // 紧绷的,出错

document.readyState:有两个可能的值(HTML5新增)

loading:正在加载文档

complete:已经加载完文档

document.compatMode:这个属性的作用是告诉开发人员浏览器采用了那些渲染模式(HTML5新增)

值等于’CSS1Compat’,表明浏览器采用标准模式进行渲染

值等于’BackCompat’,表明浏览器在混杂模式下进行渲染

document子节点

document.documentElement:获得html元素的引用

document.body:获得body元素的引用

document.head:获得head元素的引用(HTML5新增)

document.title:包含title元素的中的文本

document.activeElement:这个属性始终会引用DOM中当前获得了焦点的元素(HTML5新增)

Browser compatibility-head

Browser compatibility-activeElement

查找节点(元素节点)

Document类型为查元素提供了两种方法，1,2

HTMLDocument类型提供了方法，3

document.getElementById()

document.getElementsByTagName():返回包含0或多个元素的NodeList。在HTML文档中，这个方法会返回一个 HTMLCollection 对象，作为一个动态集合，该对象与NodeList非常相似。

document.getElementsByName:这个方法会返回带有给定name特性的元素，最常用于取得单选按钮。同样也返回 HTMLCollection 对象。

HTMLCollection对象，可以通过length属性访问元素长度，通过[]方括号语法访问对象中的项。方括号中既可以是数字也可以是字符串的索引值。

创建节点

document.createElement():接收一个参数，即要创建元素的标签名。

document.createTextNode():接收一个参数，要插入节点中的文本。

特殊集合

这些集合都是HTMLCollection对象

document.anchors:包含文档中带name特性的>元素

document.forms:包含文档中所有的元素

document.images:包含文档中所有的元素

document.links:包含文档中所有带href特性的a元素

Element类型–nodeType=1

Element类型用于表现HTML或XML元素。HTMLElement类型继承自Element类型。并添加了一些属性。

HTMLElement.__proto__ === Element// true

属性

读取

添加的属性:可读也可写

id title

lang(很少使用)

dir(很少使用)

className:与元素的class特性对应。

dataset:HTML5规定可以为元素添加非标准的属性，但要添加前缀data-,目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加，随机命名，只要以data-开头即可。可以通过元素的 dataset属性来访问自定义属性

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did114363

更新时间：2022-11-17 阅读：36次