javascript DOM基本操作

1.获取节点

document

1.用指定ID选取元素 document.getElementById

<div id="div"></div>

document.getElementById('div');

2.用指定名字选取元素 document.getElementsByName
一些HTML元素拥有name属性（比如、、、、和等），非唯一，所以多个元素可能有相同的名字。

基于name属性的值选取HTML元素，可以使用Document对象的getElementsByName()方法，返回一个NodeList对象（类数组对象）。

<input name="input"/>

var inputs = document.getElementsByName('input');
inputs[0].tagName  //input

注意：getElementsByName()定义在HTMLDocument类中，而不在Document类中，所以它只针对HTML文档可用，在XML中不可用。
3.用指定标签名选取元素 getElementsByTagName
下面的代码就是查找文档中第一个

元素里面的所有元素。

var p = document.getElementsByTagName('p')[0];
var span = p.getElementsByTagName('span');

4.通过CSS类选取元素 getElementsByClassName() 方法
如果您希望查找带有相同类名的所有 HTML 元素，请使用这个方法：
document.getElementsByClassName(“intro”);
上面的例子返回包含 class=”intro” 的所有元素的一个列表

2.节点指针

1.firstChild和lastChild
该节点的子节点中的第一个和最后一个，如果该节点没有子节点则为null
注意：这两个属性返回的除了HTML元素子节点，还可能是文本节点或评论节点。
2.childNodes
返回只读的类数组对象（NodeList对象），它是该节点的子节点的实时表。
3.previousSibling
返回某节点之前紧跟的节点

document.getElementById("item2").previousSibling;\

4.nextSibling
返回某个元素之后紧跟的节点

document.getElementById("item1").nextSibling;

5.parentNode
返回选中的元素父节点:

document.getElementById("item1").parentNode;

3.节点操作

1.创建节点

1.createElement
创建一个按钮:

var btn=document.createElement("BUTTON");

2.createAttribute()
创建 class 属性, 属性值为 “democlass”, 并将clas属性添加到 H1 元素中

var att=document.createAttribute("class");
att.value="democlass";
document.getElementsByTagName("H1")[0].setAttributeNode(att);

3.createTextNode()
创建一个文本节点:
var btn=document.createTextNode(“Hello World”);

2.插入节点

1.appendChild()

var node=document.createElement("LI");
var textnode=document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);

2.insertBefore()

document.getElementById("myList").insertBefore(newItem,existingItem);

3.replaceChild()

document.getElementById("myList").replaceChild(newnode,oldnode);

4.cloneNode

var node=document.getElementById("myList2").lastChild.cloneNode(true);
document.getElementById("myList1").appendChild(node);

5.removeChild()

var list=document.getElementById("myList");
list.removeChild(list.childNodes[0]);

3.属性操作

1.getAttribute()
获取链接的 target 属性值：

document.getElementsByTagName("a")[0].getAttribute("target");

输出结果：

_blank

2.setAttribute()

document.getElementsByTagName("INPUT")[0].setAttribute("type","button");

3.removeAttribute()

document.getElementsByTagName("H1")[0].removeAttribute("style");