DOM DOMDocument Object Model DOM Core DOM HTMLDOM
操作DOM DOM:Document Object Model(文档对象模型) DOM Core DOM HTML-DOM 6/36 CSS-DOM Java. Script如何获取网页元素并操作?
访问节点 使用get. Element系列方法访问指定节点 get. Element. By. Id()、get. Elements. By. Name()、 get. Elements. By. Tag. Name() 根据层次关系访问节点 9/36
根据层次关系访问节点 2 -2 element属性 属性名称 first. Element. Child 描述 返回节点的第一个子节点,最普遍的用法是访 last. Element. Child 问该元素的文本节点 返回节点的最后一个子节点 next. Element. Sibling 下一个节点 previous. Element. Sibling 上一个节点 示例 12/36 o. Next = o. Parent. next. Element. Sibling || o. Parent. next. Sibling o. Pre = o. Parent. previous. Element. Sibling || o. Parent. previous. Sibling o. First = o. Parent. first. Element. Child || o. Parent. first. Child o. Last = o. Parent. last. Element. Child || o. Parent. last. Child
14/36
节点信息 node. Name:节点名称 node. Value:节点值 node. Type:节点类型 元素element 1 属性attr 文本text 2 3 注释comments 8 文档document 9 演示示例3:节点信息 16/36 Node. Type值 节点类型
20/36
var del. Node=document. get. Element. By. Id("first"); del. Node. parent. Node. remove. Child(del. Node); var old. Node=document. get. Element. By. Id("second"); var new. Node=document. create. Element("img"); new. Node. set. Attribute("src", "images/f 03. jpg"); old. Node. parent. Node. replace. Child(new. Node, old. Node); 22/36
style属性 语法 HTML元素. style. 样式属性="值" 示例 document. get. Element. By. Id("titles"). style. color="#ff 0000"; document. get. Element. By. Id("titles"). style. font. Size="25 px "; 类别 名称 属性 描述 当用户单击某个对象时调用事件 onclick Background. Color、background. Image、background. Repeat 背景 鼠标移到某元素之上 onmouseover font. Size、font. Weight、text. Align、text. Decoration、font、 文本 color 鼠标从某元素移开 onmouseout padding、padding. Top 、padding. Bottom、padding. Left、 边距 padding. Right 鼠标按钮被按下 onmousedown border、border. Top、border. Bottom、border. Left、 边框 border. Right 26/36
我的购物车 function out(){ document. get. Element. By. Id("cart"). style. background. Color="#f 9 f 9 f 9"; document. get. Element. By. Id("cart"). style. border. Bottom="solid 1 px 示例 #dcdcdc"; document. get. Element. By. Id("cart. List"). style. display="none"; } function over(){ document. get. Element. By. Id("cart"). style. background. Color="#ffffff"; document. get. Element. By. Id("cart"). style. z. Index="100"; document. get. Element. By. Id("cart"). style. border. Bottom="none"; document. get. Element. By. Id("cart. List"). style. display="block"; document. get. Element. By. Id("cart. List"). style. position="relative"; document. get. Element. By. Id("cart. List"). style. top="-1 px"; } 27/36
class. Name属性 语法 示例 HTML元素. class. Name="样式名称" function over(){ document. get. Element. By. Id("cart"). class. Name="cart. Over"; document. get. Element. By. Id("cart. List"). class. Name="cart. List. Over" ; } function out(){ document. get. Element. By. Id("cart"). class. Name="cart. Out"; document. get. Element. By. Id("cart. List"). class. Name="cart. List. Out"; } 28/36 演示示例7:我的购物车
获取元素的样式 语法 示例 语法 HTML元素. style. 样式属性; alert(document. get. Element. By. Id("cart. List"). display); document. default. View. get. Computed. Style(元素, null). 属性; 示例 var cart. List=document. get. Element. By. Id("cart. List"); alert(document. default. View. get. Computed. Style(cart. List, null). display); 语法 HTML元素. current. Style. 样式属性; 兼容IE浏览器 示例 alert(document. get. Element. By. Id("cart. List"). current. Style. display); 29/36
元素属性应用 语法 document. Element. scroll. Top; document. Element. scroll. Left; 或者 标准浏览器 document. body. scroll. Top; document. body. scroll. Left; Chrome var s. Top=document. Element. scroll. Top||document. body. scroll. Top; 36/36 演示示例8:随鼠标滚动的广告图片
总结 分类:DOM Core、HTML-DOM、CSS-DOM DOM操作 节点和节点关系:根节点、父节点、子节点、兄弟节点 get. Element系列访问 parent. Node、child. Nodes 访问节点 层次关系访问 first. Child、last. Child next. Sibling、previous. Sibling 节点信息:node. Name、node. Value、node. Type get. Attribute("属性名") 操作节点的属性 Java. Script操作 文档对象模型 操作节点 set. Attribute("属性名", "属性值") create. Element( tag. Name) A. append. Child( B)、insert. Before( A, B 创建和插入节点 ) clone. Node(deep) 删除和替换节点:remove. Child(N)、replace. Child(new. N, old. N) 操作节点样式:style属性、class. Name属性 获取元素的样式 current. Style 获取元素位置 39/36 get. Computed. Style()
- Slides: 40