HTML Dom节点基本用法

DOM 是 Document Object Model（文档对象模型）的缩写,浏览器在解析HTML文档时会将HTML文档在内存中映射成一个逻辑模型DOM树，每个HTML的标签都是该DOM树上的叶子，浏览器解析时根据节点在DOM树上的情况按照相应的规范进行渲染显示。

HTML DOM节点的操作案例：
定义输入框和列表节点：

<ul id="city"><li id="bj" value="beijing">北京</li><li id="sh" value="shanghai">上海</li><li id="gz" value="guangzhou">广州</li></ul><br/><span style="background-color: yellow;">span01----</span>Dom Tree<span style="background-color: yellow;">----span02</span>

单个Node节点操作：

/*append：类似于DOM里面的appendChild()函数,将新元素加入该元素内部做为子节点 *appned:父元素内部加入子元素 *appendTo:子元素追加到父元素内部  */$("#b1").click(function(){var LiNode=$("<li></li>");  //构造Li元素节点LiNode.attr("id","sz");LiNode.attr("value","shenzhen");LiNode.text("深圳");$("#city").append(LiNode);});/** * before:兄弟元素之前加入新的元素 * after：兄弟元素之后加入新的兄弟元素 * insertAfter：新元素加入存在的兄弟元素后面 * insertBefore:新元素加入存在的兄弟元素前面 */$("#b2").click(function(){var LiNode=$("<li id='sz' value='shenzhen'><font color='aquamarine'>深圳</font></li>");      LiNode.insertAfter($("#gz"));});$("#b3").click(function(){ var LiNode=document.createElement("li");     LiNode.setAttribute("id","sz");     LiNode.setAttribute("value","shenzhen");     LiNode.innerHTML="深圳";     document.getElementById("gz").appendChild(LiNode);});$("#b4").click(function(){    var LiNode=$("<li id='sz' value='shenzhen'><font color='#FF0000'>深圳</font></li>");      $("#sh").before(LiNode);});

效果图：

Node节点类处理：

//清除所有的span元素节点$("#b5").click(function(){    $("span").empty(); //清空元素节点内容    setTimeout(function(){        //$("span").remove();  //删除元素节点         $("<button>span替换节点</button>").replaceAll($("span"));    },5000);});/** * clone:默认浅克隆，只会简单克隆元素的属性 * clone(true):深克隆，元素的属性和方法都会进行复制，属于完整独立空间 */$("#b6").click(function(){    $("#b6").after($("#b5").clone(true));});

效果图：

注意：这里设置定时器的操作主要是为了更好显示清空(并非删除节点)、替换节点的效果。