《JavaScript 实战》第4章 DHTML.pptxVIP

DHTML 动态HTML 启奥-Web前端培训教程 第4章 授课目标： Document 对象 DOM的操作 表单与事件动态HTML设计 Document 对象 启奥-Web前端培训教程 Document 启奥-Web前端培训教程 Document 的属性： title：读写位于文档标记title/title之间的文本 URL：装载文档的URL，与 Window 对象的 location 属性相同 referrer：返回把浏览器带到当前文档的链接（上一个URL） domain：提供下载文档的服务器域名（防盗链） cookie：允许设置或查询当前文档的 cookie Document 启奥-Web前端培训教程 Document 的集合： images：数组，文档对象中的所有 img 元素 links：数组，文档对象中的所有 link 对象（包含 超链接 和 Area） forms：数组，文档对象中的所有 form 元素 anchors：数组，文档对象中的所有锚 还记得那段神奇的魔法代码吗？ Document 启奥-Web前端培训教程 Document 的方法： open( )：打开一个新的文档输出流，覆盖原有文档 close( )：关闭文档输出流 write( )：向当前文档写入文本内容 writeln( )：与 write 一样，只是末尾会追加换行 Document 对象还包含很多其他方法，其余的我们在 DOM 操作部分再做介绍 DOM操作 获取元素 启奥-Web前端培训教程 DOM结构树 启奥-Web前端培训教程 DOM元素之间的关系 启奥-Web前端培训教程 关系术语： 父节点（parent）：直接位于一个节点之上的节点，是这个节点的父节点 子节点（children）：直接位于一个节点下层的节点是该节点的子节点 兄弟节点（sibling）：属于同一层次，具有相同父节点的节点是兄弟节点 后代（descendant）：一个节点的下一层次节点的集合是那个节点的后代 祖先（ancestor）：一个节点的上一层节点是那个节点的祖先 通过方法查找元素 启奥-Web前端培训教程 Document 对象有 3 个查找元素的方法： getElementById( idName )：通过元素的 id 属性查找 因为HTML中 id 属性值不允许重复，该操作将返回单个元素 getElementsByTagName( tagName )：通过元素的 标签名 查找 该操作将返回一个元素集合，可通过数组的方式查找单个元素 getElementsByName( name )：通过元素的 name 属性查找 因为元素的 name 属性允许重复，该操作将返回元素集合 getElementsByClassName( className )：通过元素的 class 属性查找 该属性IE浏览器只有10以上版本可以支持 由于 document 是每个 DOM 树的根 document.documentElement：属性，返回文档的 HTML 元素 document.body：属性，返回文档的 body 元素 通过对象查找元素 启奥-Web前端培训教程 Document 针对一些遗留元素，还可以通过 name 属性直接查找 遗留的元素：表单、表单控件、图像、applet img src= a.jpg name= photo / document.photo.src ; photo.src ; // 这里的 document 在某些浏览器下可以省略掉，但这并不代表 photo 是一个 window 的属性 form name = myform input type=text name = txt //form myform.txt.value ; 节点指针查找元素 启奥-Web前端培训教程 在一颗DOM树环境中，任何两个元素之间都是有关联的，通过这种关联，我们也可以查找到元素 Node：节点对象，元素在 DOM 树环境中所表现的对象形式 Node 对象的属性： nodeType：节点类型 ！ nodeName：节点名称（标签名） nodeValue：节点值 ！ attributes：数组，节点的属性集合 [] ownerDocument：该节点所在的 document parentNode：父节点 childNodes：数组，子节点集合 [] firstChild：第一个子节点 lastChild：最后一个子节点 nextSibling：下一个兄弟节点 previousSibling：上一个兄弟节点 Node对象 启奥-Web前端培训教程 Node.nodeType：表示节点的类型 Node.nodeValue：根据节点类型