创建简易的微博发布评论效果

DOMDOM - 文档对象模型一套操作页面元素的APIDOM可以把HTML看做是文档树,通过DOM提供的API可以对树上的节点进行操作DOM的概念文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(目前,HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理,处理的结果可以加入到当前的页面。DOM是一种基
摘要由CSDN通过智能技术生成

DOM

DOM - 文档对象模型

一套操作页面元素的API

DOM可以把HTML看做是文档树,通过DOM提供的API可以对树上的节点进行操作

DOM的概念

文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(目前,HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理,处理的结果可以加入到当前的页面。DOM是一种基于树的API文档,它要求在处理过程中整个文档都表示在存储器中。

DOM经常进行的操作

  • 获取元素
  • 对元素进行操作(设置其属性或调用其方法)
  • 动态创建元素
  • 事件(什么时机做相应的操作)

获取页面元素

getElementById//根据id获取元素
getElementsByTagName//根据标签名获取元素  动态获取有这个标签名称的元素集合
getElementsByName//根据name获取元素
getElementsByClassName//根据类名获取元素
querySelector   querySelectorAll//根据选择器获取元素  静态获取有这个标签名称的元素集合

注意getElementsByTagName是获取到的是动态的元素集合,使用时避免死循环

节点操作

1.有一个text area 框,宽600 高400,边框是1像素 实线 黑色,text area框不允许用户随意缩放

2.有一个按钮,文字内容是:发布评论

3.点击按钮,获取用户输入的内容并显示在下方的ul li标签当中(获取一个内容创建一个li标签),li标签宽度600,高度60,文字垂直居中;如果用户没有输入内容,点击按钮时会弹出一个警示框提示:请输入您想要评论的内容

4.在li标签当中左边是评论的内容,右边是修改、删除按钮,修改是按钮,删除是a标签,点击删除则这条评论删除;点击修改弹出一个输入框输入修改后的内容,拿到修改后的内容更新当前的评论。

<div class="bigBox w">
        <textarea name="" id="txt" cols="30" rows="10"></textarea>
        <div class="btnBox">
            <button id="btn">发布评论</button>
        </div>
        <ul id
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值