读javascript高级程序设计10-DOM

一、节点关系

元素的childNodes属性来表示其所有子节点，它是一个NodeList对象，会随着DOM结构的变化动态变化。

• hasChildNodes()：是否有子节点。

var headlines=document.getElementById("headline_block");

var childs=headlines.childNodes;

childs.length;//1

childs[0];//取第一个子节点

childs.item(0);//取第一个子节点

• parentNode：指向其DOM树中的父节点；
• previousSibling：当前节点前面相邻的兄弟节点；
• nextSibling：当前节点后面相邻的兄弟节点。

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类型

三、Document类型（nodeType=9）

1. 基本属性

• nodeType=9
• nodeName="#document"
• document.documentElement：指向页面中的html元素；
• document.body：指向body元素。

2. 文档信息:

document.title：获取或修改页面title，修改后会反映在浏览器标签页上，但是不会修改<title>元素。

document.title;//"博客园 - 开发者的网上家园"

document.title="博客园-小静";

document.URL:显示页面完整的URL。

document.referrer：来源页面的完整地址。

document.domain：页面的域名，该属性是可以设置的。但要注意几点：

• 不能将domain设置为当前所在域名中不包含的域；
• 不能将松散的域再设置为紧绷的域；
• 跨域通信：由于跨域安全限制，不用域的页面之间是无法进行javascript通信的。通过将两个页面的document.domain设置为相同值，就可以互相访问对方包含的javascript对象了。

例如当前在博客园闪存主页：

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. 特殊集合

• document.anchors：带name特性的<a>签；
• document.links：带链接的<a>签；
• document.images：页面中所有<img>元素。

四、Element类型（nodeType=1）

Element类型提供了对标签名、子节点、特性的访问和操作。

1.标签名

tagName返回的是标签名大写格式，比较时要先进行大小写转换。

node.tagName.toLowerCase()=="a";

2.HTML元素基本特性className：与元素的class特性对应，用于指定元素的css样式。

3.元素属性

• getAttribute()：获取元素的某个特性。这里的特性名与元素实际的特性相同，所以想获得样式名就直接使用“class”而不是“clssName”。
• setAttribute(attr,value)：设置元素特性。第一个参数是特性名称，第二个参数是特性的值。使用该方法设置的特性名称会自动转换为小写。
• removeAttribute(attr)：彻底移除元素的某个属性。

五、Text类型(nodeType=3)

1. nodeName="#text"

2. 获取节点文本内容：nodeValue或者data属性均可。

3. 操作文本节点内容

• appendData(text)：在文本节点末尾追加文本。
• deleteData(offset,count)：从offset位置开始删除count个字符。
• insertData(offset,text)：从offset位置插入文本text。
• replaceData(offset,count,text)：用text替换从offset位置开始长度为count的文本。
• substringData(offset,count)：提取从offset位置开始长度为count的文本。
• splitText(offset)：从指定位置将文本节点分割为两个文本节点。

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

六、DocumentFragment类型(nodeType=11)

可以作为仓库使用，保存未来要添加到文档中的节点。

(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);

})();

七、DOM操作

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}");