HTMLDOM详解

//这里直接调用前述的pushNodeToArray函数即可 pushNodeToArray(childNodesByClass,className,childs[i]);
} return childNodesByClass;
}
总结： 通过前述的扩展，我们要再来操作HTML节点， 那么将又变得更加的方便和实用了。这里 着重就是理解递归算法或者递归思想在这 里的运用。
</ul>
javascript内容
function f1(){ var d= document.getElementById("d1"); d.innerHTML="<a href=''>TestInnerHTML</a>"; } function f2(){ alert(d2.innerText); //最好都打印 d2.innerText="<a href=''>TestInnerText</a>"; } function f3(){ d3.outerHTML="<a href=''>TestOuterHTML</a>"; } function f4(){ d4.outerText="<a href=''>TestOuterText</a>"; }
只指定Class属性值
• 创建一个JS文件:dom.js，用于封装下列代 码 • --方法结构 • getElementsByClass(String className);
实现
function getElementsByTagName(className){
//获取body节点及其子节点集合
var bodyNode=document.getElementsByTagName("body")[0]; var bodyChildNodes=bodyNode.childNodes;
• 3、在得到HTML文档对象中其中任何节点，我们都可以 得到其他节点 • 4、节点作为对象，我们就可以对其进行增、删、改、查
• 所谓增加，即指的是向节点树或者文档对象模型中添加节 点，亦即向HTML中添加标签。 • 所谓修改，即指的是修改节点对象的属性、样式和文本内 容 • 所谓删除，即指的是删除节点或者标签 • 所谓查询，即指的是通过节点名称或者节点ID属性去查询 相应节点，或者通过某一个节点去查询相应的子节点、父 节点或者兄弟节点，或者这些节点的父节点、兄弟节点、 子节点。当然，查询节点通常并不是最终目的，而是要获 取这些节点的属性或者内容。
• •
添加节点的方式方法： //在指定的节点前面插入一个节点
• insertBefore: • parentNode.insertBefore(newNode,targetNode); • 说明：targetNode及targetNode的父节点parentNode必须存在。
•
//在指定节点里面追加一个节点，即添加到//子节点末尾
--第二种情况 getChildsByClass(nodeId,className);
实现
function getChildsByClass(nodeId,className){ var node=document.getElementById(nodeId); var childs=node.childNodes; var childNodesByClass=[]; for(var i=0;i<childs.length;i++){
二：修改
修改分为两个层面来讨论： 一是修改节点的属性； 一是修改节点的内容
修改节点的属性。 案例： 设置ID为msg的节点的class属性为message。
var node=document.getElementById(msg); node.setAttribute("class","message");
//返回存放有相同class属性值的节点的集合
return nodeByClass;
}
pushNodeToArray函数实现
function pushNodeToArray(nodesByClass,className,e){
if(e instanceof HTMLElement){
//如果元素e是HTML节点元素且class属性值为className,就存放到集合
if(e.getAttribute("class")==className){ nodesByClass.push(e); }
//节点元素e的子节点当中有可能还有class属性值为className的子节点 //因此，需要递归调用pushNodeToArray函数
var nodes=e.childNodes; for(var i=0;i<nodes.length;i++){ pushNodeToArray(nodesByClass,className,nodes[i]); } }
三：添加
• 添加节点首先应当了解如何创建节点： • //创建一个段落标签元素 • var p=document.createElement("p");
• //设置段落标签元素的属性 • p.setAttribute("class","content"); • //设置段落标签元素的内容 • p.innerHTML="what are you doing?";
通过测试的效果我们总结出四者之间的区别： 1、采用innerHTML设置内容，浏览器会把内容当中 的HTML标签作为HTML标签解析，而innerText就 不会。
2、innerHTML和outerHTML的区别就是： outerHTML会把当前指定添加内容的标签给覆盖 掉，而innerHTML是作为子内容添加进去的。 3、outerText和outerHTML之间的区别类似于 innerText和innerHTML之间的区别
function digui(e){
if(e.nodeType==1){ var nodes=e.childNodes; for(var i=0;i<nodes.length;i++){ digui(nodes[i]); } }else{ //这样的话，就可以把换行节点给屏蔽掉。 //nodeValue是针对文本节点而言的，但nodeType不管是ELEMENT_NODE(1) //还是ATTRIBUTE_NODE(2)，亦或是TEXT_NODE(3)都有。 /*基于这一原理：由于FireFox不支持innerHTML，为了实现兼容，我们可以采用 添加文本节点的方式实现相同的效果，同时还实现了兼容。*/ if(trim(e.nodeValue).length!=0){ alert(e.nodeValue); } } }
• 修改节点的属性实际应用：通过修改节点 的class属性值改变节点的CSS样式。
• • • • • • •
修改节点的内容。 案例： 设置ID为msg的节点的内容为I Miss You! var n=document.getElementById("msg"); n.innerHTML="I Miss You!"; 或者 n.innerText="I Miss You!";
兼容浏览器的更好的方式
/*javascript本身并不提供trim方法，我们自己构建一 个。*/ function trim(str) { /*把开头部分的空格以及结尾部分的空 格用''替换掉，g表示全局匹配。\s代表空格。 星号代表0个及任意多个。一定要注意 正则的书写方式。 */ return str.replace(/(^\s*)|(\s*$)/g, ''); }
HTML DOM详解
概念
• 当HTML页面被浏览器加载的时候，会创建 与当前HTML页面对应的文档对象模型，即 DOM（Document Object Model）.
HTML文档对象模型示意图
• 这里需要强调一点的是：不同的浏览器对 文本节点的认识是不一样的。比如google 浏览器，body下面始终有一个文本节点， 且把换行也作为一个节点。
function show(){
var u=document.getElementsByTagName("ul")[0];
var nodes=u.childNodes; for(var i=0;i<nodes.length;i++){ //把换行也作为节点处理 打印输出的既有3(TEXT_NODE) //又有1(ELEMENT_NODE) ATTRIBUTE_NODE为2 //alert(nodes[i].nodeType); digui(nodes[i]); } }
//创建存放相同class属性值的递归的方式找到body当中类名为className的节点
for(var i=0;i<bodyChildNodes.length;i++){ pushNodeToArray(nodesByClass,className,bodyChildNodes[0]); }
一：查询
• 一般情况下，我们有两种查询机制：
• document.getElementById(String elementId);
• --通过节点元素的ID属性捕获该节点，这样 做的好处是能够快速得到一个指定的节点。
• document.getElementsByTagName(String tagName);