dom 留言加强

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript">
window.onload = function ()
{
    var otext = document.getElementById(‘text1‘);
    var obtn1 = document.getElementsByTagName(‘input‘)[1];
    var obtn2 = document.getElementsByTagName(‘input‘)[2];
    var oul = document.getElementById(‘ul1‘);
    var flag = 1;

    obtn1.onclick = function ()
    {
        if(!otext.value)
        {
            return ;
        }
        var oli = document.createElement(‘li‘);
        oli.innerHTML = otext.value;

        if(oul.children[0])
        {
            oul.insertBefore(oli,oul.children[0]);
        }
        else
        {
            oul.appendChild(oli);
        }

        otext.value = ‘‘;

        for( var i = 0 ;i < oul.children.length; i++)
        {
            oul.children[i].onclick = function ()
            {
                if(flag)
                {
                    this.mark = ‘1‘;
                    this.style.background = ‘yellow‘;
                }
                else
                {
                    this.mark = ‘‘;
                    this.style.background = ‘‘;
                }
                flag = !flag;
            }
        }

    };

    obtn2.onclick = function ()
    {
        for(var i = 0; i < oul.children.length; i++)
        {
            if(oul.children[i].mark)
            {
                oul.removeChild(oul.children[i]);
                i--;
            }
        }
    }
};
</script>
</head>

<body>
<input type="text" id="text1">
<input type="button" value="留言">
<input type="button" value="批量删除">
<ul id="ul1">
</ul>
</body>
</html>

时间： 2024-08-08 01:27:26

dom 留言加强的相关文章

DOM操作相关案例模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例

1.模态框案例需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; }

dom 学习的开始~简单留言1

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script type="text/javascript"> window.onload = function () { var otext = document.getElementsByTagName('input')[0]; va

0166 DOM 之节点操作：删除节点，删除留言案例，复制（克隆）节点，动态生成表格案例，创建元素的三种方式，innerHTML和createElement效率对比

1.1.1 删除节点 node.removeChild(child) // 此处的node指父节点 node.removeChild() 方法: 从 node节点中删除一个子节点,返回删除的节点. <button>删除</button> <ul> <li>熊大</li> <li>熊二</li> <li>光头强</li> </ul> <script> // 1.获取元素 va

通过js的HTML DOM来实现对html文档的操作. 使用方法:Node.appendChild(); Node.insertBefore(); Node.removeChild(); <script type="text/javascript"> var count=0; window.onload = function(){ var Msg = document.getElementById("msg"); var Btn = document.g

小白日记49：kali渗透测试之Web渗透-XSS（三）-存储型XSS、DOM型XSS、神器BEFF

存储型XSS与DOM型XSS [XSS原理] 存储型XSS 1.可长期存储于服务器端 2.每次用户访问都会被执行js脚本,攻击者只需侦听指定端口 #攻击利用方法大体等于反射型xss利用 ##多出现在留言板等位置 *推荐使用burpsuite a.观察返回结果,是否原封不动地返回输入数据?是否有其他标签 js代码通过留言板存储在服务器中,所以每次点击留言板链接,都会弹出xss弹窗 b.测试加载攻击者控制的服务器中的js文件 #启动apache2[默认侦听80端口] a.js [盗取客户端cooki

【Android进阶】解析XML文件之使用DOM解析器

在前面的文章中,介绍了使用SAX解析器对XML文件进行解析,SAX解析器的优点就是占用内存小.这篇文章主要介绍使用DOM解析器对XML文件进行解析.DOM解析器的优点可能是理解起来比较的直观,当然,每个人对不同的解析方法可能有不同的喜好.但是DOM解析器有个比较大的缺点,就是占用内存比较多,在Android中的XML解析中,还是更推荐其他的解析方式. 下面介绍使用DOM解析器对XML进行解析. 下面是我们需要解析的xml文件 <?xml version="1.0" encodin

javascript-简易留言板制作

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js练习</title> <style type="text/css"> #ull{ padding:0px; margin: 0px; } #ull li{ list-style:none; background-color: #ccc; width:auto;

javascript操作DOM方法整理

原自本人整理,主要来源于这里.大家如果有补充,十分欢迎大家留言. 一.获取节点 document.getElementById();//id="" document.getElementsByName();//name="" document.getElementsByTagName();//"input" document.getElementsByClassName();//class="" 二.css选择器 docume

从零开始，搭建博客系统MVC5+EF6搭建框架（5），博客详情页、留言、轮播图管理、右侧统计博文

一.博客系统进度回顾上一遍博客介绍到,系统已经实现到了发布以及前台布局展示,接下来就是实现一些,详情页,留言.轮播图管理.右侧博文统计信息实现. 二.博客系统详情页实现 2.1先来看看详情页展示的效果 2.2实现控制器在前台控制器中创建一个Blog的控制器,主要是展示博客分类以及详情页 Action详情页实现: 1 /// <summary> 2 /// 详情页 3 /// </summary> 4 /// <param name="id"><