首页 > 代码库 > 读javascript高级编程10-DOM
读javascript高级编程10-DOM
一、节点关系
元素的childNodes属性来表示其所有子节点,它是一个NodeList对象,会随着DOM结构的变化动态变化。
- hasChildNodes():是否有子节点。
var headlines=document.getElementById("headline_block");var childs=headlines.childNodes;childs.length;//1childs[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.firstChildul.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=http://www.mamicode.com/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}");