JavaScript——DOM基础操作

1、DOM节点的属性
 DOM中有三类节点：元素节点(只有元素节点才有子节点)、属性节点、文本节点，nodeValue、nodeName、nodeType这三个属性是每个节点都有的，获取这三个节点的值的方式如下：

//元素节点
var bjNode = document.getElementById('bj');
alert(bjNode.nodeType);//1-元素节点
alert(bjNode.nodeName);//li-节点名称
alert(bjNode.nodeValue);//null-元素节点的nodeValue值都是null

//属性节点
var nameAttr = document.getElementById('name').getAttributeNode('name');
alert(nameAttr.nodeType);//2-属性节点
alert(nameAttr.nodeName);//name-属性节点名称
alert(nameAttr.nodeValue);//属性值-属性节点的属性值

//文本节点
var textNode = bjNode.firstChild;//文本节点是元素节点的子节点
alert(textNode.nodeType);//3-文本节点
alert(textNode.nodeName);//节点名称：#text(固定值，所有文件节点的nodeName都是#text)
alert(textNode.nodeValue);//文本节点的值

 Tip：nodeType、nodeName属性是只读的，nodeValue属性是可读可写的

2、新建节点
 ①创建一个元素节点：createElement(‘节点名称’)按照给定的标签名创建一个新的元素节点，方法只有一个参数——被创建的元素节点的名字，方法的返回值是一个指向新建节点的引用指针，可认为就是新建的这个元素节点，所以它的 nodeType 属性值等于 1，注意新建的元素节点不会自动添加到文档里, 它只是一个存在于 JavaScript 上下文的对象
 ②创建一个文本节点：createTextNode(‘文本内容’)创建一个包含着给定文本的文本节点，这个方法的返回值是一个指向新建文本节点引用指针，所以它的 nodeType 属性等于 3，新元素节点不会自动添加到文档里

3、为元素节点添加子节点：appendChild()，方法的返回值是一个指向新增子节点的引用指针

//给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点
var reference = element.appendChild(newChild);

4、节点的替换：replaceChild()把一个给定父元素(该方法的调用者)的一个子节点替换为另外一个子节点，返回值是一个指向被替换的那个子节点的引用指针

var reference = element.replaceChild(newChild,oldChild);

 该方法只能完成单向替换，若需要双向替换, 需要自定义函数，示例如下：互换 aNode 和 bNode

function replaceEach(aNode, bNode) {

	if (aNode == bNode) {
		return;
	}

	var aParentNode = aNode.parentNode;
	//若 aNode 有父节点
	if (aParentNode) {
		var bParentNode = bNode.parentNode;

		//若 bNode 有父节点
		if (bParentNode) {
			var tempNode = aNode.cloneNode(true);
			bParentNode.replaceChild(tempNode, bNode);
			aParentNode.replaceChild(bNode, aNode);
		}
	}
}

5、插入节点
 ①insertBefore()：把一个给定节点(newNode)插入到一个给定元素节点(element)的给定子节点(targetNode)的前面

//节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面
//节点 targetNode 必须是 element 元素的一个子节点	 
var reference =  element.insertBefore(newNode,targetNode);

 ②自定义 insertAfter() 方法：将 newChild 插入到 refChild 的后边

function insertAfter(newChild, refChild) {
	var refParentNode = refChild.parentNode;

	//判断 refChild 是否存在父节点
	if (refParentNode) {
		//判断 refChild 节点是否为其父节点的最后一个子节点
		if (refChild == refParentNode.lastChild) {
			refParentNode.appendChild(newChild);
		} else {
			refParentNode.insertBefore(newChild, refChild.nextSibling);
		}
	}
}  

6、删除节点：removeChild()从一个给定元素里删除一个子节点，返回值是一个指向已被删除的子节点的引用指针

var reference = element.removeChild(node);

 Tip：
  1️⃣某个节点被 removeChild() 方法删除时，这个节点所包含的所有子节点将同时被删除.
  2️⃣如果想删除某个节点, 但不知道它的父节点是哪一个, 可以使用该节点的parentNode 属性

7、innerHTML属性：浏览器几乎都支持该属性, 但该属性并不是 DOM 标准的组成部分，innerHTML 属性可以用来读、写某给定元素里的 HTML 内容

8、其它属性：nextSibling(下一个兄弟节点)、previousSibling(上一个兄弟节点)

9、给当前页面上所有的li节点绑定事件

window.onload = function(){
	var liNodes = document.getElementsByTagName('li');
	for(var i = 0;i < liNodes.length;i++){
		liNodes[i].onclick = function(){
			alert(this.firstChild.nodeValue);
		}
	}
}

 注意：
  1️⃣window.onload事件的触发时机是在当前DOM文档全部加载完毕之后，因此在该函数中是可以获取到DOM中的元素节点的；需要注意事件的触发时机是在DOM加载完毕之后立即触发，如该例中在DOM文档加载完毕之后会立即给每个li节点绑定点击事件，也就是说点击事件的绑定并不是在点击li节点的那一刻，换句话说就是在用户点击li节点的时候window.onload中的for循环已经执行完毕，此时的局部变量i的值已经是liNodes.length了
  2️⃣for循环中的this是不可以换成liNodes[i]的，this表示当前，即点击事件触发时的当前元素，而liNodes[i]中的i如1️⃣中所述在点击时已经不再是你以为的那个i了；