DOM操作

DOM基础，DOM进阶

节点

加载HTML页面时，Web浏览器生成一个树型结构，用来表示页面内部结构。DOM将这种树型结构理解为由节点组成。

总结：以上由元素+文本+属性，3个部分构成的。

节点种类

1.节点种类：元素节点、文本节点、属性节点。
2. 如果节点是元素节点，则 nodeType 属性将返回 1。
3. 如果节点是属性节点，则 nodeType 属性将返回 2。
4. 如果节点是文本内容节点，则nodeType属性将返回 3。

查找元素

分别为：getElementById( )、
getElementsByTagName( )、
getElementsByName( )、
getAttribute( )、
setAttribute( )、
removeAttribute( )。

元素节点方法

方法 说明
getElementById() 获取特定ID元素的节点
getElementsByTagName() 获取相同元素的节点列表
getElementsByName() 获取相同名称的节点列表
getAttribute() 获取特定元素节点属性的值
setAttribute() 设置特定元素节点属性的值
removeAttribute() 移除特定元素节点属性

1.getElementById()方法

getElementById( )方法，接受一个参数：获取元素的ID。如果找到相应的元素则返回该元素的HTMLDivElement对象（返回元素(dom)对象），如果不存在，则返回null。
document.getElementById(‘box’); //获取id为box的元素节点

注解：上面的例子，默认情况返回null，这无关是否存在id="box"的标签，而是执行顺序问题。解决方法，1.把script调用标签移到html末尾即可；2.使用onload事件来处理JS，等待html加载完毕再加载onload事件里的JS。

window.onload = function () { //预加载html后执行
document.getElementById('box');
}

2.getElementsByTagName()

getElementsByTagName()方法将返回一个对象数组HTMLCollection(NodeList)，这个数组保存着所有相同元素名的节点列表。

document.getElementsByTagName('*'); //获取所有元素

3.getElementsByName()

主要用于表单域中
方法:dom对象. getAttribute()
getAttribute()方法将获取元素中某个属性的值。它和直接使用.属性获取属性值的方法有一定区别。

adocument.getElementById('box').getAttribute('id');//获取元素的id值
document.getElementById('box').id; //获取元素的id值
 
document.getElementById('box').getAttribute('mydiv');//获取元素的自定义属性值
document.getElementById('box').mydiv //获取元素的自定义属性值，非IE不支持
 
document.getElementById('box').getAttribute('class');//获取元素的class值

方法:dom对象. setAttribute()

setAttribute()方法将设置元素中某个属性和值。它需要接受两个参数：属性名和值。如果属性本身已存在，那么就会被覆盖。

document.getElementById('box').setAttribute('align','center');//设置属性和值
document.getElementById('box').setAttribute('bbb','ccc');//设置自定义的属性和值

方法：dom对象. removeAttribute()

removeAttribute()可以移除HTML属性。

document.getElementById('box').removeAttribute('style');//移除属性

元素节点属性& HTML属性的属性

元素节点属性

属性 说明
tagName 获取元素节点的标签名
innerHTML 获取元素节点里的内容，非W3C DOM规范

document.getElementById(‘box’).tagName; //DIV
document.getElementById(‘box’).innerHTML; //测试Div

HTML属性的属性

属性 说明
id 元素节点的id名称
title 元素节点的title属性值
style CSS内联样式属性值
className CSS元素的类

DOM节点

node节点属性

节点可以分为元素节点、属性节点和文本节点，而这些节点又有三个非常有用的属性，分别为：nodeName、nodeType和nodeValue。
信息节点属性
节点类型 nodeName nodeType nodeValue
元素 元素名称 1 null
属性 属性名称 2 属性值
文本 #text 3 文本内容(不包含html)

document.getElementById('box').nodeType; //1，元素节点

层次节点属性和children属性(重点)

节点的层次结构可以划分为：父节点与子节点、兄弟节点这两种。当我们获取其中一个元素节点的时候，就可以使用层次节点属性来获取它相关层次的节点。
层次节点属性
属性 说明
childNodes 获取当前元素节点的所有子节点
firstChild 获取当前元素节点的第一个子节点
lastChild 获取当前元素节点的最后一个子节点
ownerDocument 获取该节点的文档根节点，相当与document
parentNode 获取当前节点的父节点
previousSibling 获取当前节点的前一个同级节点
nextSibling 获取当前节点的后一个同级节点
attributes 获取当前元素节点的所有属性节点集合
Children属性的代码如下：
var box = document.getElementById(‘box’);
alert(box.children.length); //得到有效子节点数目

节点操作

DOM不单单可以查找节点，也可以创建节点、复制节点、插入节点、删除节点和替换节点。

节点操作方法

方法 说明
write() 这个方法可以把任意字符串插入到文档中
createElement() 创建一个元素节点
appendChild() 将新节点追加到子节点列表的末尾
createTextNode() 创建一个文件节点
insertBefore() 将新节点插入在前面
repalceChild() 将新节点替换旧节点
cloneNode() 复制节点
removeChild() 移除节点

write()方法

write(String)方法可以把任意字符串插入到文档中去。
document.write(‘

这是一个段落！

’)’ ; //输出任意字符串

createElement()方法

createElement(tagName)方法可以创建一个元素节点。
参数：tagName:标签名称：div,p,h1,span,a
document.createElement(‘p’); //创建一个元素节点

appendChild()方法

appendChild(节点对象)方法讲一个新节点添加到某个节点的子节点列表的末尾上。

createTextNode()方法

createTextNode()方法创建一个文本节点。
var text = document.createTextNode(‘文本节点’); //创建一个文本节点。
p.appendChild(text); //将文本节点添加到子节点末尾。

insertBefore()方法

insertBefore()方法可以把节点创建到指定节点的前面。
语法：dom容器对象. insertBefore(newDom,oldDom);
box.parentNode.insertBefore(p, box); //把

之前创建一个节点

注解：insertBefore()方法可以给当前元素的前面创建一个节点，但却没有提供给当前元素的后面创建一个节点。那么，我们可以用已有的知识创建一个insertAfter()函数。

function insertAfter(newElement, targetElement) {
//得到父节点
var parent = targetElement.parentNode;
//如果最后一个子节点是当前元素，那么直接添加即可
if (parent.lastChild === targetElement) {
parent.appendChild(newElement);
} else {
//否则，在当前节点的下一个节点之前添加
parent.insertBefore(newElement, targetElement.nextSibling);
}
}

注意：空文本节点的问题！

repalceChild()方法

父节点dom对象.replaceChild(newDom,oldDom)方法可以把节点替换成指定的节点
代码如下：

cloneNode()方法

cloneNode()方法可以把子节点复制出来
参数 类型 描述
deep Boolean 可选。该方法将复制并返回调用它的节点的副本。如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点。

removeChild()方法

父节点dom对象.removeChild(子节点dom对象)方法指定元素的某个指定的子节点
box.parentNode.removeChild(box); //删除指定节点