JS第五课_DOM对象模型高级编程(增查)

去掉空格文本节点

function cleanWhitespaceDG(nodeObj){ 
	//经典算法:递归算法
	for(var i=nodeObj.childNodes.length-1;i>=0;i--){
		var node=nodeObj.childNodes[i];
	   //文本节点 并且 文本节点的值为空白
	  if(node.nodeType==3 && /\s/.test(node.nodeValue)){  
		node.parentNode.removeChild(node);
		continue;
	  }
	  cleanWhitespaceDG(node);
	}
}

1.找到元素

• 根据ID
  document.getElementById("id");
• 根据name
  document.getElementsByName("name");
• 根据标签名称 标签tag
  document.getElementsByTagName("p");
• 根据表单
  document.form表单name.文本框的name.value;

2.找节点

• 本节点--自己
  var tab=document.getElemetById("tab");
• 父节点
  tab.parentNode
• 子节点
  tab.firstChild--第一个子节点
  tab.lastChild--最后一个子节点
  tab.childNodes--子节点的集合
  tab.childNodes[下标]--数组下标一样 0开始
  tab.childNodes.length---获取子节点的总数

3.新建元素

JS的写法
var im=document.createElement("img");
----上一句代码相当于------

赋值图片路径
im.src="55.gif";
HTML的写法

	<img src=""/>

定义属性注意:必须当前标签有该属性才可以设置

标签新建的时候自动识别单/双
var tab=document.createElement("table");

4.追加元素(后) -- 排队

节点对象.appendChild(新的元素);
tab.appendChild(im);

5.插入元素(前) -- 插队

本元素.父节点.插入(新元素,本元素)
tab.parentNode.insertBefore(im,tab);