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="utxt"></ul>
</div>

* {margin: 0;padding: 0;}.w {width: 600px;margin: 0 auto;}.bigBox {width: 600px;margin-top: 20px;}textarea {width: 600px;height: 280px;border: 0;outline: 0;border: 1px solid black;resize: none;padding: 20px;box-sizing: border-box;}.btnBox {width: 100%;height: 40px;position: relative;}#btn {display: block;width: 100px;height: 40px;position: absolute;right: 0;background-color: #FF7D40;border: 0;color: #fff;}ul li {width: 600px;height: 60px;line-height: 60px;background-color: #3c3c3c;color: #fff;margin-top: 10px;padding: 0 20px;list-style: none;box-sizing: border-box;}ul li a {float: right;text-decoration: none;color: #fff;cursor: pointer;}ul li input {float: right;margin: 20px 16px 0 0;cursor: pointer;}

实现所需代码

function getId(id) {return document.getElementById(id)}getId('btn').onclick = function() {if (!getId('txt').value) {alert('请输入评论文字！')} else {var txt = getId('txt').valuevar li = document.createElement('li')getId('utxt').appendChild(li)var span = document.createElement('span')span.innerText = getId('txt').valueli.appendChild(span)getId('txt').value = ''//先清空var del = document.createElement('a')del.innerText = '删除'li.appendChild(del)del.onclick = delFn// console.log(del);// console.log(li);var input = document.createElement('input');// txt.appendChild(input);input.type = 'button';input.value = '修改';input.id = txt;// console.log(li);li.appendChild(input);input.onclick = xgFn}}function delFn () {//移除this的父节点的父节点this.parentNode.parentNode.removeChild(this.parentNode);// console.log(this.parentNode);}function xgFn () {var ts = prompt('请输入修改后的内容')this.parentNode.firstElementChild.innerText = ts}

其中添加元素标签节点的过程能简写成：

 li.innerHTML = getId('txt').value + '<input type="button" value="tianjia"><a href="#">del</a>'

效果图如下：

总结

操作节点能实现许多效果

自定义属性操作

getAttribute() 获取标签行内属性
setAttribute() 设置标签行内属性
removeAttribute() 移除标签行内属性
与element.属性的区别: 上述三个方法用于获取任意的行内属性。
parentNode 父节点
8799)]

总结

操作节点能实现许多效果

自定义属性操作

getAttribute() 获取标签行内属性
setAttribute() 设置标签行内属性
removeAttribute() 移除标签行内属性
与element.属性的区别: 上述三个方法用于获取任意的行内属性。
parentNode 父节点
appendChild(标签) 在后面添加子节点

创建简易的微博发布评论效果相关推荐

手把手教你50行Python代码，给心目中的女友微博秒评论
突然觉得,现在发微博已经成为当代青年的潮流,或分享自拍美照,或分享美食美景,小编的女朋友也不例外,平时爱分享一些我俩生活的趣事. 但是她最近开始给我抱怨我从来不给她的微博评论,我作为骨灰级" ...
java视频播放器制作_java创建简易视频播放器
java创建简易视频播放器发布时间:2020-09-23 04:28:09 来源:脚本之家阅读:98 作者:南柯一梦xihe 最近有个多媒体的作业,要求使用visualC++和OpenCV编写一个 ...
新浪哪些信息微博服务器被覆盖,新浪微博自动发布评论9.8（新浪微博助手）黄金版...
新浪微博自动发布评论是一款可以帮助您推广各类信息的微博工具,转为提高粉丝量,发微博广告而设计的,看到什么就能得到什么,覆盖范围广,让您的广告效果做到最好,提高微博流量不在是个难题,小伙伴们,快快行动吧 ...
jQuery实现模拟微博发布框
jQuery实现模拟微博发布框刚开始界面 1.输入内容,点击发布按钮,添加到下面. 2.输入内容,按下回车键,同样可以添加内容 3.点击删除,删除该条信息. 效果展示所有代码 <!DOCTY ...
原生js--选项卡全选反选，选项卡切换,模拟搜索框，微博发布（带时间）,注册协议倒计时
1.全选反选按钮 <!DOCTYPE html> <html> <head lang="en"><meta charset="U ...
企业微博发布时间_内容_原则
2019独角兽企业重金招聘Python工程师标准>>> 微博营销服务理念我们可以针对企业的官方微博提供设计.资源整合.优化等服务.在日常运营中,提供活动及话题设计,提供在线答疑.实 ...
用原生js写一个微博发布框，留言框。
本来这篇文章是昨晚发布的,但是昨天网上自己的网站出了一些问题. 百度一下可能是因为配置的问题,但是自己对后端,以及命令行实在不懂.好吧那就把它先放着.等我学了php以及linux在回来解决吧. 今天写 ...
python爬取学籍_仝卓学籍造假微博道歉，用Python抓取微博的评论看看群众都说什么...
前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 欢迎关注小编,除了分享技术文章之外还有很多福利,私信学习资料可以领取包括不 ...
微信小程序开发（4）--发布评论
这里我要做的小程序是一个学生信息中心的小程序.所以其中之后难免会有发布评论这一个小部分. 1.输入内容部分设计首先是输入框和按钮设计新建一个page页面,在其中的 .wxml 文件中使用 view ...

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

DOM