JavaScript 学习笔记8

时间 2019-11-17

标签 javascript 学习笔记栏目 JavaScript 繁體版

原文原文链接

第十章 DOMcss

1.节点层次html

每一个节点有各自的特色，数据和方法，节点之间的关系构成了层次node

文档节点是每一个文档的根节点，HTML中文档元素是最外层元素，文档节点的惟一子节点数组

a.节点类型浏览器

每一个节点都有一个nodeType属性，用于代表节点类型——IE无效app

对于元素节点，nodeName保存的始终是元素的标签名，nodeValue值始终为nulldom

每一个节点都有一个childNodes属性，保存着一个NodeList对象，NodeList是一种类数组对象，用于保存一组有序的节点函数

var firstChild=someNode.childNodes[0];//访问一个节点url

var secondChild=someNode.childNodes.item(1); //访问第二个节点spa

每一个节点都有一个parentNode属性，指向文档树中的父节点。nodeList中的节点互为同胞节点，每一个节点的previousSibling和nextSibling可访问同一列表的其余节点

父节点的firstChild和lastChild分别指向孩子列表的第一和最后一个节点

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

操做节点：appendChild（newNode）；——在childNodes列表末尾新增节点并返回该节点

insertBefore（要插入的节点，参考节点）——把节点放到参考节点以前并返回被插入的节点

replaceChild（要插入的节点，要替换的节点）——返回要替换的节点并删除，插入新节点

removeChild（要移除的节点）

cloneNode（true）//深复制，复制节点和整个子节点树

cloneNode（false）；//浅复制，复制后的节点属文档全部，是孤儿节点

normalize（）//处理文本节点，删除空文本节点、合并相邻文本节点

b.Document类型

表示文档，document对象是window对象的属性，可将其做为全局对象来访问。特征：

nodeType=9

nodeName=“#document”

nodeValue=null

parentNode=null

ownerDocument=null

子节点但是是DocumnetType（最多一个），Element（最多一个），ProcessingInstruction或Comment

访问子节点的快捷方式：1）document.documentElement//始终指向HTML页面的<html>元素

2）经过childNodes列表访问文档元素

var body=document.body; //取得对<body>的引用

文档信息：document.title——取得当前页面的标题

document.URL——包含页面完整的url

document.domain——只包含页面的域名，可修改值，但不能够是任何值；域名一开始是松散的不能设置为紧绷的

document.referer——保存着连接到当前页面的那个页面的url

查找元素：取得元素的操做——getElementById（要取得元素的ID）

getElemnetByTagname(要取得元素的标签名)，返回NodeList列表，传入参数“*”会取得文档中的全部元素

getElementByName（）——只有HTMLDocument具备，返回带有给定name特性的全部元素

一致性检测：document.implementation——为检测浏览器实现了DOM的哪些部分提供相应信息和功能的对象

document.implementation.hasFeature（DOM名称和版本号）——支持则返回true

文档写入： write（写入到输出流的文本）——原样写入

writeln（写入到输出流的文本）——末尾添一个换行符

open（），close（）——打开和关闭网页的输出流

c.Element类型

取得特性：getAttribute（“特性名”）

setAttribute（特性名，值），removeAttribute（）

attributes属性：该属性包含一个NameNodeMap，是一个动态的集合，元素的每个特性都由一个Attr节点表示，每一个节点都包含在NameNodeMap对象中，该对象拥有如下方法：

getNamedItem（name）......

经过该属性可遍历元素的特性

建立元素：document.createElement（标签名）

取得后代节点：getElementById（），getElemnetByTagname（）

d.text类型

可经过nodeValue属性或者data属性访问Text节点中包含的文本

appendData（text）：将text添加到节点的末尾

deleteData（offset，count）

insertData（offset，text）

replaceData（offset，count，text）

spliteText（offset）：分割成两个文本节点，原节点是指定位置前内容，新节点是以后的内容，返回新节点

substringData（offset，count）：提取字符串

每一个能够包含内容的元素最多只能有一个文本节点

建立文本节点：document.createTextNode（要插入节点的文本）

规范化文本节点：在文本节点的父元素上调用normalize（）

e.comment类型

注释，没有子节点

和text相似，拥有除spliteText（）以外的全部字符串操做方法

建立——document.createComment()

f.documentType类型、

包含着与文档的doctype有关的信息

3个属性：name（表示文档类型的名称），entities，notations

第12章 DOM2和DOM3

12.1DOM的变化

(一）针对XML命名空间的变化

a.Node类型的变化

DOM2增添属性：localName——不带命名空间前缀的节点名称

namespaceURI——命名空间URI或者null

prefix——命名空间前缀或null

相关方法：isDefaultNamespace（namespaceURL）——返回布尔值

lookupNamespaceURL（prefix）

lookupPrefix（NamespaceURL）

b。document的变化

c。element的变化

（二）其余方面的变化

a.DocumentType类型的变化

DOM2新增了3个属性：publicId和systemId——表示文档类型声明中的两个信息段

internalSubset——用于访问包含在文档类型声明中的额外定义

b.document的变化

importNode（）——从文档中取得一个节点并将其导入另外一个文档

eg：var newNode=document.importNode（oldNode,true）//导入节点和其子节点，返回原来节点的副本

defaultView：保存着一个指向拥有给定文档窗口的指针

为document.implementation对象增添的方法：

建立一个新的documentType节点——document.implementaion.createDocumentType（文档类型名称，publicId，systemId）

建立新文档——document.implementation.createDocument(针对文档中元素的namespaceURL，文档元素的标签名，新文档的文档类型)

建立一个完整的html文档——document.implementation.createHTMLDocument(新建立文档的标题)

c.node类型的变化

isSupported（特性名，特性版本号）——用于肯定当前节点具备什么能力，返回布尔值

DOM3:issameNode(),isEqualNode（），比较相同和相等，返回布尔值

setUserData（要设置的键，实际的数据，处理函数）——讲数理指定给节点

getUserData（）

12.2样式

a.访问元素的样式

在style特性中制定的任何css属性都将表现为这个css对象的相应属性

DOM2新增：cssText，getPropertyCSSValue（propertyName）。。。。。。

计算的样式：document.defaultView.getComputedStyle（要取得样式的元素，为元素字符串或null），

返回包含当前元素全部计算样式的对象

IE不支持这个方法，用currentStyle属性代替

b.操做样式表

CSSStyleSheet类型表示的是样式表

应用于文档的全部样式表都是经过document.styleSheets集合来表示的

document.styleSheets[i]

或者element.sheet||element.styleSheet（IE）取得样式表对象

CSS规则：CSSRule对象表示样式表中的每一条规则

CSSStyleRule对象的属性：cssText，selectorStyleSheet（返回当前规则的选择符文本），

style（设置和取得当前规则的特定的样式值）

建立规则：insertRule（规则文本，索引位置）

IE8及以前版本addRule（选择符文本，样式信息，插入位置）

删除规则：deleteRule（要删除规则的位置）

removeRule（）//IE

c.元素大小

偏移量：offsetHeight，offsetWidth，offsetLeft，offsetTop

包含元素的引用保存在offsetParent属性中

客户区大小：clientHeight，clientWidth

滚动大小：scrollHeight，scrollWidth（用于肯定元素的实际大小）

scrollLeft，scrollTop（隐藏区域大小）

12.3遍历

a.NodeIterator类型

建立：document.createNodeIterator(root,whattoshow,fliter,布尔值一般为FALSE)

fliter参数用来指定NodeFliter对象，每一个对象只有一个方法，acceptNode（）

eg：var fliter={

acceptNode:function（node）{

return node.tagName.toLowerCase（）==“P”？NodeFliter.FLITER_ACCEPT:NodeFliter.FLITER_SKIP;

}

}；

previousNode（），nextNode（）

b.TreeWalker

除了previousNode（），nextNode（）以外，

parentNode（），firstChild（），lastChild（），nextSibling(），previousSibling（）

建立：doucnment.createTreeWalker（参数同NodeIterator）

在fliter参数中，NodeFliter.FILTER_REJECT跳过相应街道和节点子树

curentNode属性：表示任何遍历方法在上一次遍历中返回的的节点

12.4范围

建立DOM范围：document.createRange（）

每一个范围由一个Range类型的实例表示，属性以下

startContainer：包含范围起点的节点

startOffset，endContainer，endOffset，

简单选择，使用该节点的信息来填充范围：selectNode（DOM节点）——选择整个节点

selectNodeContents（）——只选择节点的子节点

复杂选择：setStart（参照节点，偏移量值）

setEnd（参照节点，偏移量值）

操做DOM范围的内容：deleteContents（）

extractContents（）：也是移除范围选区，返回范围的文档片断，可将范围的内容插入其余地方

cloneContents（）——建立范围对象的一个副本

插入DOM范围的内容：insertNode（）——向范围选区的开始出插入一个节点

surroundContents（节点）—插入环绕范围内容的节点

折叠DOM范围：折叠范围，指范围中未选择文档的任何部分

collapse（布尔值，true表示起点）

比较范围：compareBoundaryPoints（比较方式的常量值，要比较的范围）——肯定范围是否有公共的边界

复制范围：cloneRange（）

清理范围：detach（）