第10章DOM笔记

第十章 DOM

一 Node类型

共有12种节点类型，每个节点都有nodeType属性，用于表明节点类型，nodename 表示标签名称 nodeValue始终为null

1.操作节点

a)  appendChild()方法 用于向childNodes的列表最后添加节点，添加后相应的节点都会得到更新。如果出入到appendChild()中的节点已经是文档的一部分了，那结果就是将该节点从原来的位置移到新位子。

b) 如果要把节点放到childNodes列表中某个特定的位置，而不是末尾。可以使用insertBefore()方法。insertBefore()接受两个参数：要插入的节点和作为参照的节点。

如果参照为null则appsertBofore()和appendChild()执行相同的操作

如：插入到最后一个子节点之前

returnedNode=someNode.insertBefore(new,someNode.lastChild)

Alert(newNode==someNode.childNodes[someNode.childNodes.lenght-2]);   //ture

c) 替换节点

replaceChild()接受两个参数：要插入的节点和要替换的节点，返回的是要替换节点

如果只想要移除不想替换，只接受一个参数就是要删除的节点

d） cloneNode()用于克隆节点，用于创建调用这个方法的节点的一个完全相同的副本  接受一个布尔值为参数，当为ture是表示深度克隆 克隆除本身外和子节点的树，为false表示浅复制，复制节点本身。

1. Document类型

虽然DOM标准规定document节点的子节点可以是documentType， ELement，ProcessingInstruction或comment，但还有两个内置的访问器子节点的快捷方式 Document.documentElement   //html

Document.body     //body

Document.title    //取得文档标题，也可以设置

属性：URL domain referrer

Url 表示包含页面完整的URL

Domain 包含页面的域名

Referrer 包含连接到当前页面的那个页面的URL

1.查找元素

getelementById()  取页面中命名为iD标签

getelementTagname()   取页面中的 某一类标签

GetelementsByName()   取得给定Name特性的标签

2.DOM一致性检测

Document.implementation属性就是用于检测DOM的一致性

DOM1只为Document.implementation规定了一个方法：

hasFeature()  此方法接受两个参数，要检测的DOM功能的名称及版本号

如：

var hasXmlDom=document.implementation.hasFeature(“XML”,”1.0”)

3.文档的写入

Write()

Writeln()

Open()

Close()

Write()和writeln()两个方法都是在页面加载完向页面写入文档不同的是writeln()在入完的后面会加一个</br>换行符。

2.Element类型

Element用于表现html和xml，提供了对元素的标签名 子节点特性的访问

要访问元素的标签名可以使用：nodeName属性和tagName属性  如果检测元素的标签名最好使用toLowerCase（）方法把标签专为小写

a）html元素

所有的HTML类型都有HTMLElement表示HTMLElement直接继承Element并添加了一些属性，添加的这些属性分别对应每个HTML的特性

Id: 元素在文档中的唯一标识符

Title：有关元素的附加说明，一般通过工具提示条显示出来

Lang:元素内容的语言代码

Dir:语言的方向

className: 元素指定的css类

如：

<div id=”myDiv”  classs=”db”  title=”Body text” lang=”en” dir=”ltr”></div>

Var div=getElementById(“myDiv”)

Alert(div.id)   //myDiv

Alert(div.class)   //db

同时通过赋值的形式还可以修改其每个特性

b) 取得特性

每个元素都有一个或多个特性，这些特性的用途主要是给相应元素或内容的附加信息。操作特性的方法主要有

getAttribute()

setAttrivute()

removeAttribute()

如：

getAttribute()用法

Alert(div.getAttribute(“id”))    //myDiv

Alert(div.getAttribute(“class”))   //db

如上代码：使用此方法是需注意3点，取得class时直接传递class，而且无法取得style 和onclick的特性返回的是字符串。

setAttribute()接受两个参数，要设置的特性名和值。如果特性已经存在，则会替代已存在的值。如果不存在则设置相应的值。

removeAttribute() 彻底删除某个特性  除了删除特性值，也会完全删除特性

Attributes属性 Attributes属性中包含一个NamedNodeMap,与nodelist类似，也是一个动态的集合，NamedNodeMap对象具有以下方法

getNamedItem(name)   返回nodename属性等于namede的节点

removeNamedItem(name)  从列表中移除nadename等于namede的节点

setNamedItem(node)  向列表中添加节点，以节点nodename的属性的索引

Item(pos)  返回位于数字pos位置处的节点

Var id=element.attributes.getNamedItem(“id”).nodeValue

Var id=element.attributes.[“id”]nodeValue

Attributes属性由于不够方便一般很少使用，如果想要遍历元素特性，则可以使用Attributes

Function outputAttributes(element){

Var pairrs=new Array();

attrName,

attrValue,

i,

Len;

For(i=0,len=element.attributes.lenght;i<len;i++){

attName=elemet.attributes[i].nodeName;

attName=elemet.attributes[i].nodeValue;

Pairs.push(attrName+”=\”+attrValue+”\””)

}

Return paors.join(“ ”)

}

创建元素 document.createElement()方法可以创建新元素，接受一个参数，就是要创建元素的标签名。

Var div=document.createElement(“div”)创建一个div标签

可以使用appendchild()等方法把创建的标签插入到文档树里，同时还可以为标签添加特性

在IE中还可以以另一种形式使用createElement()方法，即可以传入完整的元素标签，也可以包含属性。

Var div=document.createElement(“<div id=\”myNewDiv\”  class=\”box\”></div>”) 这种方法有助于避开IE7及更早版本中动态创建元素的某些问题。

创建子节点

childNodes包含他所有的子节点 访问时须检查nodetype

3.Text类型

Nodetype的值为3

nodeName的值为#text

nodeValue的值为节点所包含的文本

可以通过nodeVlaue属性和data属性访问节点中包含的文本。这两个属性包含的值相同

appendDate(text) 将text添加到节点的末尾

deleteData（offset,count）从offset的指定位置开始删除count个字符

insertData（offset，text）从offset指定位置插入text

replaceData(offset,count,text) 用text替换从offset指定位置开始到offset+count为止处的文本

splitText(offst) 从offset指定的位置将当前文本节点分成两个文本节点

substringData(offset,count) 提取从offset指定的位置开始到offset+count为止处的字符串

Lenght:保存着文本节点中字符的数目。

1.创建文本节点

Document.createTextNode（）创建新文本节点接受一个参数——要插入节点中的文本

2.合并文本节点

Normalize()如果在包含一个或多个人本节点的父元素上调用此方法，将会把 所有文本节点合并成一个，

3.分割人本节点splitText()按照指定位置把一个文本节点分割成两个，接受一个参数：要分割的索引号

4.Comment 和CDATASection 类型

注释在DOM中是通过Comment 类型表示的，

CDATASection类型针对于Xml文档

他们拥有除splitText()之外的所有字符串操作方法。

5.DocumentFragment类型

所有节点类型中只有DocumentFragment在文档中没有对的标记，dom规定DocumentFragment是“轻量级”文档，可以包含element processingInstruction, comment  txet CDATASection等

6.attr类型

元素的特性在DOM中以attr类型表示

Attr 对象有三个属性：name  value  specified

Name 相当于nodename

Value  相当于nodeValue

Specified  布尔值 用于区别特性是代码中指定的还是默认的

Document.createAttribute（）传入特性的名称可以创建新的特性节点

如：

为元素添加特性align

Var attr=document.createAttribute(“align”)

attr.value=”left”;

element.setAttrributeNode(attr);

Alert(element.attributes[“align”].value) // left

Alert(element.getAttrributeNode(“align”).value) //left

创建动态脚本

创建动态样式

操作表单

第十一章 DOM扩展

1. 选择符API

querySelector()方法接收一个css选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素,返回null.

querySelectorAll()方法接收的参数也是css选择符，返回的是与之匹配的所有元素，

matcheSelector()方法接收一个参数css选择符，如果调用的元素与该选择符匹配，返回ture.

1. 元素遍历

对于元素间的空格，ie9之前版本不会返回文本节点。从而导致childNodes和firstChild等属性的行为不一致。因此新定义一组属性

childElementCount:返回子元素的个数

firstElementChild：指向第一个子元素

lastElementChild：指向最后一个子元素

previousElementSibling:指向前一个同辈元素

nextElementSibling:指向后一个同辈元素

1. classlist属性

在操作类名时，通过className属性添加、删除、和替换类名

<div class=”db user disabled”> </div>

要删除used

//首先，取得类名字符串并拆分数组

Var classNames=div.calssName.Split(/\s+/);

//找到要删除的类名

Var pos=-1;

i,

Len;

For(i=0,len=className.lenght;i<len;i++){

If(className[i]==”usar”){

Pos=1;’

Breack;

}

}

//删除类名

className.splice(i,1);

//把剩下的类名拼成字符串并重新设置

div.className=classnames.join(“ “)

Html5 新加的方法

Add(value):将给定的字符串值添加到列表中 如果值已存在就不添加

Contains(value)表示列表中是否存在给定的值，如果存在则返回ture

Remove(value) 从列表中删除给定的字符串

Toggle（value）：如果列表中存在给定的值，删除，如果不存在就添加

如：div.Classlist.remove(“user”)

Html5 焦点管理

Document.activeElement属性，该属性始终引用DOM中当前获得了焦点的元素。

Document.hasFocus()方法，用于确定文档是否获得了焦点

1. HTMLDocu的变化

1.readyState属性

Document的readyState属性有两个可能的值

Loading，正在加载的文档

Comolete, 已经加载完的文档

用法就是可以和onload事件处理程序一起使用，用以提醒某文档是否加载完

Head属性 引用文档的head元素

Charset属性  表示文本中实际使用的字符集  “UTF-16”

Dataset属性 访问自定义属性的值

5.插入标签

innerHTML属性

返回的是与调用元素的所有子节点（包括元素，注释，文本节点）

Outerhtml属性返回调用他的元素以及所有子节点的HTML标签。

Div.outerhtml=”<p>This is a paragraph</p>”   向div里插入标签

insertAdjacentHTML（）方法接受两个参数：插入的位置和插入的html文本

第一个参数是下列值之一

beforebegin：当前元素之前插入一个紧邻的同辈元素

afterbegin：当前元素之下插入一个新的子元素或在第一个子元素之前在插入新的子元素

beforeend：当前元素之下插入一个新的子元素或在最后一子元素之后在插入新的子元素

Afterend:在当前元素之后插入一个紧邻的同辈元素。

第二个参数是类似<p>This is a paragraph</p>的HTML标签

6.scrollintoView()方法

可以再所有的HTML中调用，通过滚动浏览器或某个容器元素调用元素就可以出现在视口中，如果传入ture作为参数，或不传参数，那么窗口滚动之后会让调用元素的顶部与视口顶部平齐。如果传入falae，调用元素会尽可能全部出现在视口，

7.插入文本

innerText属性  返回元素中包含的所有文本内容，包括子节点树中的文本，读取时会由浅入深的顺序将文档中所有文本拼接起来

outerText属性 ,作用范围扩大到包含调用他的节点之外，基本和innerText没有区别

第十二章 DOM2和DOM3

1. 访问元素的样式

Style属性，对于有短划线的CSS属性，必须将其转换为驼峰大小写形式。

1. DOM样式的属性和方法

在DOM2中还为style对象定义了一些属性和方法，这些属性和方法在提供元素的style特性值的同时，也可以修改样式

cssText:通过他可以访问到style特性中的css代码

Lenght: 应用给元素的css数量

parentRule: 表示css信息的CSSRule对象，

getPropertyCSSValue(propertyName):返回包含给定属性值得cssValue对象

getPropertyPriority(propertyName):如果给定的属性使用了！Important设置，则返回，否则，返回null

getPropertyValue(propertyName)返回给定属性的字符串的值，

Item(index):返回给定位置的CSS属性的值

RemoveProperty（propertyName）从样式中移除给定的属性

3计算样式

DOM2增强了document.defaultView,提供了getComputedStyle()方法，该方法接受两个参数，要去的计算样式的元素和一个为元素字符串（可以为null），返回的是计算元素设置的值，如：

<style>

Background:red;

Width:300px;

Height:300px;

Border:1px solid red;

</style>

var myDiv=document.getElementById(“myDiv”)

Var computedStyle=document.defaultView.getComputedStyle(myDiv,null)

Alret(computedStyle.backgroungColor）  //red

Alert(computedStyle.width)     //300px

Alert(computedStyle.border)    //在某些浏览器中 1px solid red

在ie中不支持此方法，使用的是currentStyle属性

Var computedStyle=myDiv.currentStyle

Alret(computedStyle.backgroungColor）  //red

Alert(computedStyle.width)     //300px

Alert(computedStyle.border)    //undefined

注意：计算的样式都是只读的，计算后的样式也包括默认的样式

4.操作样式表

cssStyleSheet类型表示的是样式表。继承自StyelSheet,继承而来的属性如下：

Type: 表示样式表类型的字符串，在CSS中，字符串是type/css

cssRules:样式表中包含的样式规则的集合  ie不支持

deleteRules(index):删除CSSRules集合中指定位置的规则（样式） ie不支持

insertRules(rule,index): 向cssRules中指定的位置插入rule字符串， ie不支持但是有个addRule()方法

5.css规则

CSSRule对象表示样式表中的每一条规则，CSSRule是一个共其他多种类型继承的基类，最常见的是CSSStyleRule类型，其包含以下属性：

cssText: 返回整条规则对应的 文本  ie 不支持

parentRule: 如果当前规则是导入规则，这个属性应用的就是导入规则。或者这个值为null，

parentStyleSheet:当前规则所属的样式表

selectorText: 返回当前规则的选择符文本

Style：可以通过他设置和取得规则中的特定的样式值

Div.box{

Background:red;

Width:300px;

Height:300px;

Border:1px solid red;

}

假如这条规则位于页面中的第一个样式表中，而且这样式表中只有这一个样式规则，那么通过以下代码可以取得这条规则的各种信息，

Var sheet=doucment.styleSheets[0];

Var rules=sheet.cssRules|| sheet.reles

Var rule=rules[0];

Alert(rule.selectorText)   //divbox

Alert(rule.style.cssText)   //完整的css代码

Alert(backgroundColor)   //red

..........

创建规则：

Dom规定 要想向现有样式中添加新规则，需要使用 insertRule()方法：接受两个参数

规则文本和表示在哪里插入规则的索引

如：

sheet.insertRule(“body { mso-char-indent-count:0.0000; ">Ie不支持这个方法  ie8及更早版本使用addRule()

sheet.addRule(“body” ,” mso-para-margin-left:0.0000gd; text-indent:21.0000pt; mso-char-indent-count:0.0000; ">移除规则

Sheet.deleteEule()

对于IE浏览器使用

sheet.removeRule()  使用方法相同

6.元素的大小

偏移量：

offsetHeight：元素在垂直方向占用的空间包括元素的高度，水平滚动条的高度，上边框及下边框的高度

offsetWidth:元素在水平方向上占用的空间大小，包括元素高度，垂直滚动条宽度，左右边框宽度

offsetLeft:元素的左边框到包含元素的左边框之间的距离

offsetRight：元素的右边框到包含元素的右边框的距离

客户区大小：

clientWidth:内容+左右内边距

clientHeight:内容+上下内边距

滚动大小：

scrollHeight： 在没有滚动条的情况下，元素内容的总高度

scrollWidth：  在没有滚动条的情况下，元素内容的总宽度

scrollLeft：被隐藏在内容区域左侧的距离，设置这个属性可以改变元素的滚动位置

scrollTop:被隐藏在内容区域上方的距离，设置这个属性可以改变元素的滚动位置