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++){
                 //创建新的tr
                 var 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";
         }```



  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值