一、节点关系

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

  • hasChildNodes():是否有子节点。
var headlines=document.getElementById("headline_block");
var childs=headlines.childNodes;
childs.length;//
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);//
//规范化
node.normalize();
console.log(node.childNodes.length);//

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

读javascript高级程序设计10-DOM的更多相关文章

  1. 读javascript高级程序设计00-目录

    javascript高级编程读书笔记系列,也是本砖头书.感觉js是一种很好上手的语言,不过本书细细读来发现了很多之前不了解的细节,受益良多.<br/>本笔记是为了方便日后查阅,仅作学习交流 ...

  2. 读javascript高级程序设计-目录

    javascript高级编程读书笔记系列,也是本砖头书.感觉js是一种很好上手的语言,不过本书细细读来发现了很多之前不了解的细节,受益良多.<br/>本笔记是为了方便日后查阅,仅作学习交流 ...

  3. 读javascript高级程序设计08-引用类型之Global、Math、String

    一.Global 所有在全局作用域定义的属性和方法,都属于Global对象. 1.URI编码: encodeURI():主要用于对整个URI编码.它不会对本身属于URI的特殊字符进行编码. encod ...

  4. JavaScript高级程序设计-10.11: DOM及其扩展

    什么是DOM? DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口).DOM描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分. 文档节点(do ...

  5. 读javascript高级程序设计01-基本概念、数据类型、函数

    一. javascript构成 1.javascript实现由三部分组成: ECMAScript:核心语言功能 DOM:文档对象模型,提供访问和操作网页内容的方法和接口 BOM:浏览器对象模型,提供与 ...

  6. 《JAVASCRIPT高级程序设计》DOM扩展

    虽然DOM为XML及HTML文档交互制定了一系列的API,但仍然有几个规范对标准的DOM进行了扩展.这些扩展中,有很多是浏览器专有的,但后来成了事实标准,于是其他浏览器也提供了相同的实现:浏览器开发商 ...

  7. 读javascript高级程序设计02-变量作用域

    一. 延长作用域链 有些语句可以在作用域前端临时增加一个变量对象,该变量对象在代码执行完成后会被移除. ①with语句延长作用域. function buildUrl(){ var qs=" ...

  8. 读javascript高级程序设计12-HTML5脚本编程

    一.跨文档消息传递(XDM) 1.发送消息 postMessage(msg,domain)用于发送跨文档消息.第一个参数是要传递的消息内容,第二个参数表示接收方来自哪个域.第二个参数有助于提高安全性, ...

  9. 读javascript高级程序设计13-JSON

    JSON是一个轻量级的数据格式,可以简化表示数据结构的工作量.在实际工作中,我们经常用它来传递数据,不过对于其使用的一些细节还是需要注意的.在ECMAScript5中定义了原生的JSON对象,可以用来 ...

随机推荐

  1. replace截取字段

    var a = '123:'b = '123:disfkajsdhfjkasdhf'c = b.replace(a, '')"disfkajsdhfjkasdhf"

  2. 《30天自制操作系统》17_day_学习笔记

    harib14a: 接着上一天的内容,我们来思考一个问题:当所有的LEVEL中都没有任务的时候怎么办?采用前面定时器链表中加入“哨兵”的思路,我们加入一个idle任务,去执行HLT.接下来我们只需要将 ...

  3. 从零开始学Linux[二]:常用操作:用户组、进程、网络、ssh

    摘要:Linux基础学习:创建用户组和用户.软件包管理.磁盘管理.进程管理.前后台进程的切换.网络配置.浏览网页.远程登录ssh 第一节,主要介绍一些简单命令,这节介绍一些日常操作. 1.创建用户组和 ...

  4. 简明python教程 --C++程序员的视角(一):数值类型、字符串、运算符和控制流

    最初的步骤 Python是大小写敏感的 任何在#符号右面的内容都是注释 >>> help('print')在“print”上使用引号,那样Python就可以理解我是希望获取关于“pr ...

  5. Preconditions优雅的检验参数

    Preconditions里面的方法: 1 .checkArgument(boolean) : 功能描述:检查boolean是否为真. 用作方法中检查参数 失败时抛出的异常类型: IllegalArg ...

  6. C++之路进阶——bzoj2879(美食节)

    2879: [Noi2012]美食节 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 1304  Solved: 702[Submit][Status] ...

  7. JS中的prototype///////////////////////////z

    JS中的phototype是JS中比较难理解的一个部分 本文基于下面几个知识点: 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个类A,我想要创建一个 ...

  8. 函数nvl 和decode

    decode(nvl(kkc.category, 'one'),'one','普通','two','精品','three','行业','four','白金')

  9. CPU cache

    cache是一种小而快的缓冲器,用在CPU和main memory之间进行数据读写. 在processor访问主memory时,首先检查cache中是不是有一份copy,如果cache hit,则直接 ...

  10. :radio :checkbox

    匹配所有单选按钮   示例 描述: 查找所有单选按钮 HTML 代码: <form> <input type="text" /> <input typ ...