元素的childNodes属性来表示其所有子节点，它是一个NodeList对象，会随着DOM结构的变化动态变化。
var headlines=document.getElementById("headline_block"); var childs=headlines.childNodes; childs.length;//1 childs[0];//取第一个子节点 childs.item(0);//取第一个子节点
var li1=childs[0].childNodes[2]; li1.previousSibling; li1.nextSibling;
1.appendChild()：向节点的childNodes末尾追加一个节点。如果传入的节点已经是其子节点，那么会将该节点移动到末尾。
var headlines=document.getElementById("headline_block"); var ul=headlines.childNodes[0]; var firstnode=ul.firstChild ul.appendChild(firstnode);
2.insertBefore(newnode,somenode)：向指定位置来插入子节点。第一个参数是要插入的节点，第二个是作为参照的节点。
var headlines=document.getElementById("headline_block"); var ul=headlines.childNodes[0]; var firstnode=ul.firstChild; ul.insertBefore(firstnode,ul.childNodes[2]);
3.replaceChild(newnode,oldnode)：替换节点。第一个参数是要插入的新节点，第二个参数是要被替换掉的节点。
4.removeChild(somenode)：移除节点指定节点。
var headlines=document.getElementById("headline_block"); var ul=headlines.childNodes[0]; ul.removeChild(ul.childNodes[0]);
常用Node类型
1. 基本属性
2. 文档信息:
document.title：获取或修改页面title，修改后会反映在浏览器标签页上，但是不会修改<title>元素。
document.title;//"博客园 - 开发者的网上家园" document.title="博客园-小静";
document.URL:显示页面完整的URL。
document.referrer：来源页面的完整地址。
document.domain：页面的域名，该属性是可以设置的。但要注意几点：
例如当前在博客园闪存主页：
document.URL;//"http://home.cnblogs.com/ing/" document.referrer;//"http://www.cnblogs.com/" document.domain;//"home.cnblogs.com" document.domain="www.baidu.com";//报错 document.domain="cnblogs.com";//可以 document.domain="home.cnblogs.com";//报错 document.domain;//"cnblogs.com"
3. 特殊集合
Element类型提供了对标签名、子节点、特性的访问和操作。
1.标签名
tagName返回的是标签名大写格式，比较时要先进行大小写转换。
node.tagName.toLowerCase()=="a";
2.HTML元素基本特性className：与元素的class特性对应，用于指定元素的css样式。
3.元素属性
1. nodeName="#text"
2. 获取节点文本内容：nodeValue或者data属性均可。
3. 操作文本节点内容
4. normalize()：规范化文本节点。在包含多个文本节点的元素上调用该方法，会将其文本节点进行合并。
var node=document.getElementById("ing_body_578997"); //获取文本节点 var textnode=node.childNodes[0]; //获取节点文本值 var data=textnode.data;//"最近学js高级编程，又是基础书，该掉粉了，`(*∩_∩*)′" //追加文本 textnode.appendData("Text");//最近学js高级编程，又是基础书，该掉粉了，`(*∩_∩*)′Text //删除文本片段 textnode.deleteData(8,10);//最近学js高级编粉了，`(*∩_∩*)′Text //插入文本 textnode.insertData(8,"博客园");//最近学js高级编博客园粉了，`(*∩_∩*)′Text //替换文本 textnode.replaceData(5,25,‘,加油‘);//最近学js加油 //获取文本片段 textnode.substringData(5,1);//, //分割为多个节点 textnode.splitText(‘,‘); console.log(node.childNodes.length);//2 //规范化 node.normalize(); console.log(node.childNodes.length);//1
可以作为仓库使用，保存未来要添加到文档中的节点。
(function(){ var ul=document.getElementById("myList"); var frag=document.createDocumentFragment(); var li=null,text=null; for(var i=4;i<=6;i++){ li=document.createElement("li"); text=document.createTextNode("item"+i); li.appendChild(text); frag.appendChild(li); } ul.appendChild(frag); })();
1.动态脚本
①通过src包含外部脚本文件。加载完成后就可以在页面其他地方调用了。
function LoadScriptSrc(src){ var script=document.createElement("script"); script.type="text/javascript"; script.src=src; document.body.appendChild(script); } LoadScriptSrc("validate.js"); checkName();
②动态添加行内代码脚本。代码作用域为全局，而且执行完后立马可用。
function LoadScript(){ var script=document.createElement("script"); script.type="text/javascript"; try{ script.appendChild(document.createTextNode("function begin(){console.log(‘hello world.‘)}")); }catch(ex){ script.text="function begin(){console.log(‘hello world.‘)}"; } document.body.appendChild(script); }
LoadScript();
begin();
2.动态样式
注意样式要添加到head中。
①使用Link动态添加来自外部的样式文件，执行是异步的。
function loadCss(url){ var link=document.createElement("link"); link.rel="stylesheet"; link.href=url; var head=document.getElementsByTagName("head")[0]; head.appendChild(link); } loadCss("http://www.damifanli.com/data/css/index_index_914724003.css")
②使用style动态添加嵌入式CSS样式代码。向页面中添加样式后立即就能看到效果。
function loadCss(css){ var style=document.createElement("style"); style.type="text/css"; try{ style.appendChild(document.createTextNode(css)); }catch(ex){ style.styleSheet.cssText=css; } var head=document.getElementsByTagName("head")[0]; head.appendChild(style); } loadCss("body{background-color:red}");
读javascript高级编程10-DOM,布布扣,bubuko.com
原文：http://www.cnblogs.com/janes/p/3897711.html