今天不忙，看了下DOM，无聊写写记记（详细的是笔者之前没主要的，不详细和缺少的是了解的）

本文链接：https://blog.csdn.net/Yogo_t/article/details/43058863

document对象

1.document.documentElement==document.childNodes[0]=document.firstNode 取到对<html>的引用

2.document.body 取得对<body>的引用

document 是 HTMLDocument 的实例对象，document对象有一些标准Document对象没有的属性

document.title

document.URL 取得完整URL 地址

document.domain 取得域名

document.referrer 取得页面来源URL

document对象特殊集合

1.document.forms 文档所以的<form>元素

2.document.links 文档所以带href特性的<a>元素

3.document.anchors 文档所以带name特性的<a>元素

Element类型

nodeType=1

nodeName=标签名

nodeValue=null

1.<div id="div"></div>

var div=document.getElementById('div');

console.log(div.tagName) //div

console.log(div.tagName==div.nodeName) //true

if(div.tagName=="div") //容易出错

{//执行操作

}

if(div.tagName.toLowerCase()=='div') //适用任何文档

{//执行操作

}

</script>

html

getAttribute() //取得特性

例如：

var div=document.getElementById('div');

alert(div.getAttribute('id')) ; //div

alert(div.getAttribute('class')); //className

alert(div.getAttribute('this_var')); //hello

alert(div.id); //id

alert(div.className) //className

alert(div.this_var) //undefined(ie除外)

</script>

*任何元素的所有属性都可以通过DOM元素本身的属性来获取（除开自定义属性）

特殊属性style

通过 getAttribute()返回的是css文本

通过 element.style 返回的是一个对象

设置属性setAttribute(参数1，参数2);

1.属性存在，setAttribute(参数1) 参数1 取代原本值；

2.属性不存在，setAttribute(参数1，参数2)，参数1为属性名，参数2为对应的值

attributes属性

element类型是使用attributes属性的唯一一个DOM节点类型，attributes属性中包含一个NamedNodeMap动态集合，元素的每一个特性都由一个Attri节点表示，每个节点都保存在NameNodeMap对象中，NameNodeMap对象拥有以下方法:

getNameItem(name) 返回nodeName属性等于name的节点;

removeNamedItem(name) 从类别中删除nodeName属性等于name的节点

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

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

attrbutes属性中包含的一系列节点，每个几点的nodeNade就是特性的名称，而节点的nodeValue就是特性的值，要取得元素的idtex可以使用以下代码。

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

以下是简写方式

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

也可以通过这个方式来改变值

element.attributes['id'].nodeValue="some_id";

创建元素

var li=document.createElement('li');

li.id="c_li";

li.className='li_class';

document.body.appendChild(li);

在IE 以另外一种方式创建

var div=document.createElement("<div class=\"div\" id=\"div\"></div");

*这种方式有助于避开在IE7及更早的版本动态穿件元素的某些问题

1.不能设置动态创建<iframe>元素的name特性

2.不能通过表单的reset()方法重设动态创建的<input>元素

3.动态创建type特性值为“reset”的<button>元素

例如

if(client.browser.ie && client.browser.id<=7)

{

var iframe=document.createElement("<iframe name=\"myframe\" ></iframe>");

}

TEXT类型

nodeType==3

nodeName的值为 “#text”;

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

parentNode是一个Element

可以通过nodeValue属性或data属性访问Text节点中包含的文本，这两个属性中包含的值相同，修改也可以反映出来

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

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

insertData（offset，text）：在offset指定的位置插入text。

replaceData（offset，count，text）：用text替换从offset指定的位置开始到offset+count为止处的文本

splitText（offset）：从offset指定的位置将当前文本节点分成两个文本节点。

substringData（offset，count）：提取从offset指定的位置开始到offset+count喂猴子的字符串。

除了这些方法，文本节点还有一个length属性

创建文本节点

var textnode=document.createElement("this is text");

Comment类型

注释在DOM中是通过Comment类型表示的。Comment类型具有下列特征：

nodeType==8

nodeName的值为“#comment”；

nodeValue的值是注释的内容

parentNode可能是Document或Element

没有子节点