| 一、基本概念 -------------------------------------------------------------------------- HTML DOM 定义了访问和操作HTML文档的标准方法。 HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。 DOM 被分为不同的部分： 1.Core DOM 定义了一套标准的针对任何结构化文档的对象 2.XML DOM 定义了一套标准的针对 XML 文档的对象 3.HTML DOM 定义了一套标准的针对 HTML 文档的对象。 节点：根据 DOM，HTML 文档中的每个成分都是一个节点。 DOM 是这样规定的： >整个文档是一个文档节点 >每个 HTML 标签是一个元素节点 >包含在 HTML 元素中的文本是文本节点 >每一个 HTML 属性是一个属性节点 >注释属于注释节点 节点彼此间都存在关系。 >除文档节点之外的每个节点都有父节点。 >大部分元素节点都有子节点。 >当节点分享同一个父节点时，它们就是同辈（同级节点）。 >节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点 >节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点 查找并访问节点 你可通过若干种方法来查找您希望操作的元素： >通过使用 getElementById() 和 getElementsByTagName() 方法 >通过使用一个元素节点的 parentNode、firstChild 以及 lastChild childNodes属性 节点信息 每个节点都拥有包含着关于节点某些信息的属性。这些属性是： nodeName（节点名称） nodeValue（节点值） nodeType（节点类型） nodeName 属性含有某个节点的名称。 元素节点的 nodeName 是标签名称 属性节点的 nodeName 是属性名称 文本节点的 nodeName 永远是 #text 文档节点的 nodeName 永远是 #document 二、HTML DOM 对象参考 ---------------------------------------------------------------------- Document: 代表整个 HTML 文档，可被用来访问页面中的所有元素 常用集合属性：forms Anchor : 代表 <a> 元素 Area : 代表图像映射中的 <area> 元素 Base : 代表 <base> 元素 Body : 代表 <body> 元素 Button : 代表 <button> 元素 Event : 代表某个事件的状态 Form : 代表 <form> 元素 Frame : 代表 <frame> 元素 Frameset: 代表 <frameset> 元素 Iframe : 代表 <iframe> 元素 Image : 代表 <img> 元素 Input button : 代表 HTML 表单中的一个按钮 Input checkbox : 代表 HTML 表单中的复选框 Input file : 代表 HTML 表单中的文件上传 Input hidden : 代表 HTML 表单中的隐藏域 Input password : 代表 HTML 表单中的密码域 Input radio : 代表 HTML 表单中的单选按钮 Input reset : 代表 HTML 表单中的重置按钮 Input submit : 代表 HTML 表单中的确认按钮 Input text : 代表 HTML 表单中的文本输入域（文本框） Link : 代表 <link> 元素 Meta : 代表 <meta> 元素 Object : 代表 <Object> 元素 Option : 代表 <option> 元素 Select : 代表 HTML 表单中的选择列表 Style : 代表单独的样式声明 Table : 代表 <table> 元素 TableData : 代表 <td> 元素 TableRow : 代表 <tr> 元素 Textarea : 代表 <textarea> 元素 第七天 继续讲解DOM(重点讲XML DOM) ==================================================================== 一、HTML的DOM --------------------------------------------------------- Object : 代表 <Object> 元素 Option : 代表 <option> 元素 Select : 代表 HTML 表单中的选择列表 Style : 代表单独的样式声明 Table : 代表 <table> 元素 TableData : 代表 <td> 元素 TableRow : 代表 <tr> 元素 Textarea : 代表 <textarea> 元素 二、XML的DOM --------------------------------------------------------- DOM （Document Object Model） 文档对象模型 1. document 文档 HTML XML 文件 （标记语言) <body> <div> <!-- --> <a href="#">wwww</a> </div> </body> 节点： 将文档想成一个倒树， 每一个部分（根、元素、文本（内容）， 属性， 注释）都是一节点。 根据 DOM，HTML 文档中的每个成分都是一个节点。 DOM 是这样规定的： 1. 整个文档是一个文档节点(根节点) 2. 每个 HTML 标签是一个元素节点 3. 包含在 HTML 元素中的文本是文本节点 4. 每一个 HTML 属性是一个属性节点 5. 注释属于注释节点 2. 父、子和同级节点 节点树中的节点彼此之间都有等级关系。 父、子和同级节点用于描述这种关系。父节点拥有子节点，位于相同层级上的子节点称为同级节点（兄弟或**）。 1. 在节点树中，顶端的节点成为根节点 2. 根节点之外的每个节点都有一个父节点 3. 节点可以有任何数量的子节点 4. 叶子是没有子节点的节点 5. 同级节点是拥有相同父节点的节点 只要知道一个节点， 按关系找到其它节点 父节点： parentNode 子节点（第一个， 最后一个） childNodes firstChild lastChild 同胞（同辈）节点 （上一个， 下一个）nextSibling previousSibling 3。 获取节点的方式： array getElementsByTagName("节点名"); //获取所对应节点名（所有），返回的是数组 object getElementById("id名"); //获取id名的唯一节点对象 示例：(找节点) document.getElementsByTagName("li"); //所有所有li节点 document.getElementById("lid"); //获取id值为lid的唯一节点 document.getElementById("uid").getElementsByTagName("li"); //获取id值为uid中所有li子节点 document.getElementsByTagName("ul")[0].getElementsByTagName("li"); //获取第一个ul节点中所有li子节点 获取到的标记名(多个)、 id（唯一）、 name（多个） 4. 每个节点中的内容 节点类型nodeType、节点名nodeName，节点值nodeValue 节点名nodeName： nodeName 是只读的 元素节点的 nodeName 与标签名相同 属性节点的 nodeName 是属性的名称 文本节点的 nodeName 永远是 #text 文档节点的 nodeName 永远是 #document 节点值nodeValue 元素节点的 nodeValue 是 undefined 文本节点的 nodeValue 是文本自身 属性节点的 nodeValue 是属性的值 nodeType（节点类型） 元素类型 节点类型 元素 1 属性 2 文本 3 注释 8 文档 9 4. Object 对象 （HTML元素 转成的对象(js对象)） 注意： 如果使用js操作HTML文档， 就需要选将HTML文档结构转成Js对象 a. 操作属性: nodeName（节点名称） nodeValue（节点值） nodeType（节点类型） 其他属性：（针对于节点） childNodes 返回节点到子节点的节点列表。 firstChild 返回节点的首个子节点。 lastChild 返回节点的最后一个子节点。 nextSibling 返回节点之后紧跟的同级节点。 previousSibling 属性可返回某节点之前紧跟的节点（处于同一树层级） parentNode 返回节点的父节点。 textContent设置或返回节点及其后代的文本内容。 b. 操作内容 innerText(IE) textContent(FF) //获取的是显示的内容，不包含HTML标签 innerHTML //获取的是显示的内容，会包含HTML outerText outerHTML 表单 value c. 操作样式 aobj.style.backgroundColor="red"; aobj.style.fontSize="3cm"; className aobj.className="test"; aobj.className+=" demo"; aobj.className=""; e. 操作节点： appendChild() 向节点的子节点列表的结尾添加新的子节点。 cloneNode() 复制节点。 removeChild() 删除（并返回）当前节点的指定子节点。 replaceChild() 用新节点替换一个子节点。 hasAttributes() 判断当前节点是否拥有属性。 hasChildNodes() 判断当前节点是否拥有子节点。 insertBefore() 在指定的子节点前插入新的子节点。 f. 创建节点： * createElement() 创建元素节点 createAttribute() 来创建属性节点 可以：元素节点.属性名=值； createTextNode() 来创建新的文本节点 可以：元素节点.innerHTML=文本内容； 有了以上三点的操作之前先转成对象 转成对象的两种形式： 1. 标记名(多个)、 id（唯一）、 name（多个） document中的三个方法 var objs=document.getElementsByTagName("div"); //获取多个 var objs=document.getElementById("one"); //获取一个 var objs=document.getElementsByName("two"); |
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) | 黑马程序员IT技术论坛 X3.2 |