《PHP基础教程C16javascript08》由会员分享，可在线阅读，更多相关《PHP基础教程C16javascript08（26页珍藏版）》请在金锄头文库上搜索。
1、JS08-XML DOM主讲: 邮箱: 课前复习 HTML DOM预习检查节点的分类节点的常用属性节点的常用操作本章内容1.节点介绍2.节点的操作 1. 节点介绍HTML文档中的每个成分都是一个节点。根据DOM，HTML文档中的每个成分都是一个节点。1.整个文档是一个文档节点2.每个HTML标签是一个元素节点3.包含在HTML元素中的文本是文本节点4.每一个HTML属性是一个属性节点5.注释属于注释节点节点介绍Node层次节点彼此都有等级关系。HTML文档中的所有节点组成了一个文档树（或节点树）。HTML文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条
2、，直到处于这棵树最低级别的所有文本节点为止。节点介绍下面这个图片表示一个文档树（节点树）：文 档根 元 素 ：元 素 ：元 素 ：文 本 ：“文 档 标 题 ” 元 素 ：元 素 ： 元 素 ：文 本 ：“我 的 链 接 ” 文 本 ：“我 的 标 题 ”根 元 素 ：节点树 DOM Tutorial DOM Lesson one Hello world! 节点树上面所有的节点彼此间都存在关系。除文档节点之外的每个节点都有父节点。举例， 和 的父节点是 节点，文本节点 Hello world! 的父节点是 节点。大部分元素节点都有子节点。比方说， 节点有一个子节点： 节点。 节点也有一个子节点
3、：文本节点 DOM Tutorial。当节点分享同一个父节点时，它们就是同辈（同级节点）。比方说， 和 是同辈，因为它们的父节点均是 节点。节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点，以此类推。比方说，所有的文本节点都是 节点的后代，而第一个文本节点是 节点的后代。节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点，以此类推。比方说，所有的文本节点都可把 节点作为先辈节点。节点的访问查找并访问节点: 你可通过若干种方法来查找您希望操作的元素：1.通过使用getElementById(id)getElementsByTagName(tagname)getE
4、lementsByClassName(classname)getElementsByName(name”)2.获取子节点obj.childNodes3.获取第一个子节点obj.firstChild节点的访问4.获取最后一个子节点：obj.lastChild5.获取父节点： nodeobj.parentNode6.获取子元素节点： obj.children7.获取父元素节点： obj.parentElement; /和obj.parentNode相同，获取同一个人，是单数8.获取前一个兄弟元素： obj.previousSibling9.获取下一个兄弟元素： obj.nextSibling节点的
5、属性1.节点名称 obj.nodeNamenodeName 是只读的元素节点的 nodeName 与标签名相同 div属性节点的 nodeName 是属性的名称 元素节点对象的所有属性的集合obj.attributes文本节点的 nodeName 永远是 #text 元素节点的文本内容文档节点的 nodeName 永远是 #document 最大的，在html之上2.节点属性 obj.nodeValue元素节点的 nodeValue 是 undefined文本节点的 nodeValue 是 文本自身属性节点的 nodeValue 是 属性的值节点的属性3.节点名称 obj.nodeTypeno
6、deType 是只读的nodeType 属性规定节点的类型元 素 类 型 节 点 类 型元 素 1属 性 2文 本 3注 释 8文 档 91.获取节点2.改变节点3.删除节点4.替换节点5.创建节点6.添加节点7.克隆节点 2. 节点操作获取节点1.获取元素节点1).document.getElementById(id);2).document.getElementsByName(name);3).document.getElementsByTagName(tagname);4).document.getElementsByClassName(classname);2.获取属性节点1).obj
7、.attributes; /获取对象的所有的属性的集合2).obj.getAttribute(“id”); /获取id属性节点的值3).obj.getAttributeNode(“id”) /获取id属性节点2.1 获取节点3.获取文本节点1).var obj=document.getElementById(mydiv); for(var i=0;i); /注意页面上的回车转行也算一个文本节点 2.1 获取节点4.获取子节点 1)obj.childNodes; /获取子节点5.获取第一个子节点 1)obj.firstChild;6.获取最后一个子节点 1)obj.lastChild;7.获取父
8、节点 1)nodeobj.parentNode;8.获取子元素节点 1)obj.children; /获取元素中的子元素对象，不要文本 2.1 获取节点1.修改元素节点 元素本身是需要修改的，比如修改a标签本身是没有意义的，而是修改它身上的属性和里面的文本节点2.修改属性节点 obj.setAttribute(“name”，“myname”);3.修改文本节点 1)textobj.nodeValue=“bbbbb”; 2)var obj=document.getElementById(“hid1”).childNodes0; var str=“linux”;obj.insertData(3,s
9、tr); alert(obj.parentNode.childNodes.length);2.2 改变节点1.删除元素节点 parentNode.removeChild(x);2.删除属性节点 obj.removeChild(“name”);3.删除文本节点（文本节点属于子节点，与删除子节点方法相同） parentNode.removeChild(x); 2.3 删除节点1.替换元素节点 parentNode.replaceChild(newText,oldText);2.替换文本节点 textobj.replaceData(offset,length,str); 2.4 替换节点1.创建新的
10、元素节点 document.createElement(h1);2.创建新的属性节点 var obj = document.createAttribute(age); h1obj.setAttributeNode(obj);3.创建新的文本节点 textobj = document.createTextNode(aaaaaa); obj.appendChild(textobj); 2.5 创建节点1.添加节点 obj.appendChild(textobj);2.插入节点 var obj = document.getElementById(id); document.insertBefore(
11、newNode,obj);3.创建新的文本节点 textobj = document.createTextNode(aaaaaa); obj.appendChild(textobj); 2.6 添加节点4.添加新属性 obj.addAttribute(“name”,”myname”);5.向文本节点添加文本 obj.insertData(0,”Hello”); 2.6 添加节点1.复制节点（克隆元素节点和文本节点） obj.cloneNode(); /默认参数为true，将会克隆此节点包括子节点 /若参数为false,只会复制元素，不会复制里面的子节点 2.8 克隆节点1.node操作getAttribute(“id”)setAttribute(“id”,”div1”)removeAttribute(“id”)2.获取元素标签obj.innerHTMLobj.outerHTML3.获取元素中的文本obj.textContent 2.9 节点其他操作总 结本章必须掌握的知识点：节点的分类节点的常用属性节点的常用操作：获取、修改，删除，创建，添加
