DOM

第十章 DOM

一.节点层次

文档：html页面

文档对象：页面中的元素

稳当对象模型：定义为了能让程序（JS）操作页面中的元素

1.Node类型

.childNode.length 子节点个数（只包含一级子节点，不包含孙级）、包含文本元素（如空格换行）和非法嵌套

.nodeType:判断节点类型

.attribute:节点属性个数 .attribute[ ].name 属性名称 .attribute[ ].value 属性值

.children.length:不包含文本元素（如空格换行）、非法嵌套

.firstChild :标准下：包含文本非标准：不包含文本

.firstElementChild:非标准下不支持这个属性

.lastChild | | .lastElementChild: 最后一个子节点，属性同上

.nextSibling | | .nextElementSibling:下一个兄弟节点

.previousSibling | | .previousElementSibling:上一个兄弟节点、

.parentNode:父节点

.offsetParent：离当前节点最近的有定位属性的节点，如果没有定位父级，默认值Body,ie7以下，如果当前元素没有定位，默认值为BODY，如果有定位，则为htmL

.offsetLeft/Top:距有定位属性的父节点的距离

.style.height/元素的高和宽

.clientWidth/Height:样式长宽+padding

.offsetWidth/Height:样式长宽+padding+border可视区+边框

* 父级.appendChild(要添加的元素) 插入元素

* 父级.insertBefore(新的元素，被插入的元素) 在指定元素之前插入一个新的元素//在ie下，如果第二个参数节点不存在，会报错，在其他标准浏览器，如果第二个参数节点不存在，则会以appendChild的形式进行插入

*父级.removeChild(要删除的元素)删除元素

*父级.repalceChild(替换内容，被替换内容) 替换子节点

getElementByClassName()；函数

var aLi=getElementsByClassName('li_one');
alert(aLi.length);
// console.log(aLi);
function getElementsByClassName(className)
{
var oAll=document.getElementsByTagName('*');
var oArr=[];
for(var i=0;i<oAll.length;i++)
if(oAll[i].className==className)
oArr.push(oAll[i]);
return oArr;
}

获取表单数据：

<form>

alert(form.text1.value) ;

.onchange();当值发生改变时触发

.onsubmit();表单提交时触发

.submit()提交函数

.onreset():当表单重置时触发

confirm() 弹出对话框 “确定”为true “取消”为false

oForm.onreset=function(){

return confirm('确定要重置？');

};

1）.nodeName和nodaValue

2.Document类型

document.documentElement:访问文档节点

document.body获得body引用

document.doctype:获得<!DOCTYPE>引用

*多数情况下，用不着在document对象上调用appendChild();removeChild();replaceChild();因为文档类型是只读的，而且他只能有一个元素子节点，而且这个节点通常已经存在。

document.title获得title元素（可更改）

document.URL;获得完整URL

document.domain;取得域名(可设置,但只能包含于URL，若开始设置省略前置域名（松散型loose），则之后不能再设置成紧绷型（tight）)

document.referrer;去的来源页面的URL

3.Element特性

1.取得特性

操作特性的方法主要有三个，分别是getAttribute()、setAttribute()和removeAttribute()。

2.设置特性

div.setAttribute("id", "someOtherId");

div.setAttribute("class", "ft");

div.setAttribute("title", "Some other text");

div.setAttribute("lang","fr");

div.setAttribute("dir", "rtl");

4.删除属性

div.removeAttribute("class");

5.Attributes特性

要取得元素的特性，可以使用以下代码。

var id = element.attributes.getNamedItem("id").nodeValue;

以下是使用方括号语法通过特性名称访问节点的简写方式。

var id = element.attributes["id"].nodeValue;

6.创建元素

var div = document.createElement("div");

4.text类型

1.创建文本节点

var textNode = document.createTextNode("<strong>Hello</strong> world!");

2.规范化文本节点

normalize();相邻文本节点合并。

3.分割文本节点

splitText();

5.Comment类型

注释节点。

6.CDATASection类型

7.DocumentType类型

8.DocumentFragment类型

9.Attr类型

三个属性：name 、value 、specified(区别特性是在代码中指定的还是默认的).

var attr=document.creatAttribute("align");
attr.value="left";
element.setAttribuyes(attr);

二.DOM操作技术

1.动态脚本

function loadScript(url){
script=document.creatRElement("script");
script.type="text/javascript";
script.src=url;
document.body.appendChild(script);

}

2.动态样式

function loadStyles(url){
var link=documentElement("link");
link.rel="stylesheet";
link.type="text/css";
link.herf=url;
var head=document.getElementByTagName("head")[0];
head.appendChild(link);
}