JS-DOM对象--节点--添加图片的操作

JS-DOM对象
DOM：Document Object Model 文档对象模型
要实现页面的动态交互效果，bom 操作远远不够，需要操作 html 才是核心。如何操作htm，就是 DOM。简单的说，dom 提供了用程序动态控制 html 接口。DOM即文档对象模型描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。dom 处于javascript 的核心地位上。
每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分，可通过window.document 属性对其进行访问。

节点
加载 HTML 页面时，Web 浏览器生成一个树型结构，用来表示页面内部结构。DOM 将这种树型结构理解为由节点组成，组成一个节点树。对于页面中的元素，可以解析成以下几种类型的节点：
节点类型 HTML内容例如
文档节点文档本身整个文档 document
元素节点所有的HTML元素、

、

属性节点 HTML元素内的属性 id、href、name、class
文本节点元素内的文本 hello
注释节点 HTML中的注释

html -->文档节点
div -->元素节点
title -->属性节点
测试 Div -->文本节点
下面举个栗子：

点击展示图片，表格的下方弹出相应的图片，本次只显示一张图片，下面附上部分代码，“取消”这个功能目前还没有实现，有感兴趣的大神请赐教！

 <script type = "text/javascript">var ball = new Array();ball[0] = {name:"孙悟空",skill:"界王拳",headimg:"/img/0.jpg"};ball[1]={ name:"比克大魔王",skill:"魔封波",headimg:"/img/1.jpg"};ball[2]={name:"天津饭",skill:"太阳拳",headimg:"/img/2.jpg"};ball[3]={name:"孙悟饭",skill:"龟派气功",headimg:"/img/3.jpg"};</script>
</head>
<body><button "show();">展示</button><table width="85%" align="center" border="1px" id="ta1" ><tr style="background: lightgreen" ><th align="center">名称</th><th align="center">技能</th><th align="center">操作</th></tr></table><img src="" alt="" id="img"><div id="container"></div><script>var show =function(){var mytable = document.getElementById("ta1");//遍历for(var i=0;i<ball.length;i++){//创建新的trvar mytr = document.createElement("tr");mytr.innerHTML+="<td>"+ball[i].name+"</td>";mytr.innerHTML+="<td>"+ball[i].skill+"</td>";mytr.innerHTML+="<td><a href='javascript:show_"+i+"();'>展示图片</a>&nbsp;<a href='javascript:del();'>取消</a></td>";//将tr追加到表格中mytable.appendChild(mytr);}}//展示图片function show_0(){img.style.display="block";img.style.width="50%";img.src="img/0.jpg";}function show_1(){img.style.display="block";img.style.width="50%";img.src="img/1.jpg";}function show_2(){img.style.display="block";img.style.width="50%";img.src="img/2.jpg";}function show_3(){img.style.display="block";img.style.width="50%";img.src="img/3.jpg";}```

JS-DOM对象--节点--添加图片的操作相关推荐

js给对象动态添加属性的2种方法
js给对象动态添加属性的2种方法需求: 要给每个课程添加一个判断鼠标是否hover 分析: 因为数据是动态渲染的,所以需要动态的给他添加一个flag标记,就得在数据渲染之前先拿到,然后再添加一个自己 ...
DOM对象,节点,获取元素的非行间样式,元素的偏移量等属性词
获取页面中的元素的方法作用: 通过各种方式获取页面中的元素以前我们说过, id 可以直接使用这个方法只能通过 id 获取今天学的就是使用各种方式比如: id, 类名, 标签名, 选择器的方 ...
JS(DOM对象表单验证与正则表达)
目录 DOM对象表单验证 DOM对象 <!DOCTYPE html> <html><head><meta charset="utf-8" ...
7.DOM（六）①创建create#插入appendChild(子元素)#替换insert，replace#删除DOM对象节点②复制节点.深复制,浅复制cloneNode⑥取消超链接a默认跳转行为
目录一:创建一个新的DOM节点: 1.麻烦的方法 ①document.createElement()创建一个新的元素 ②把元素加入到list里面 ③创建一个文本节点(就是li里面的文字) ④在new ...
JS DOM 对象
22:36 2013/6/4详情参照W3C文档标准Browser 对象(顶层对象) DOM Window DOM Navigator DOM Screen DOM History DOM Locati ...
【JS】js给对象动态添加、设置、删除属性名和属性值
1. 访问对象属性 js中访问对象属性一共有两种方法:点获取法和方括号获取法. let user = { // 一个对象name: "John", // 键 "name& ...
JS向对象中添加和删除属性
向对象中添加属性语法: 对象.属性名 = 属性值; 对象["属性名"] = 属性值; //这种方式能够使用特殊的属性名对象的属性名没有任何要求,不需要遵守标识符的规范,但是在开 ...
js Dom对象的属性与方法
1.对象集合: (1).all[]; (2).images[]; (3).anchors[]; (4).forms[]; (5).links[]; 2.属性: document.cookie;设置或返 ...
html中图片鼠标滑动的效果,JS DOM实现鼠标滑动图片效果
经常,我们在浏览各种网页的时候,都会有各种动画效果展示,像下图所示的是很多网上商城常用的货品展示方式,同类的货品并排展现在窗口上,用户如果看中了哪一款商品想要查看详情的话,只要将鼠标放上该商品的区域, ...

JS-DOM对象--节点--添加图片的操作

JS-DOM对象--节点--添加图片的操作相关推荐

最新文章

热门文章