javascript 学习笔记(一)DOM基本操作


Posted in Javascript onApril 08, 2011

html部分代码:
当点击show按钮时,触发showValue函数,将input value的值动态添加到id="text"的元素节点中!

<p> 
<input type="text" value="" name="user_name" id="user_name" /> 

<span style="padding-left:10px;"><input type="button" value="show" onclick="showValue()" /></span> 
</p> 
<p id="text"></p>

javascript 部分代码:
页面加载时,使input自动获得焦点,引导用户输入内容。(细节加强用户体验)
window.onload = function() { 
var user_name = document.getElementById("user_name"); 
user_name.focus(); 
}

如果没有输入任何内容,给出错误提示,同时又让input获得输入焦点
function showValue() { 
var user_name = document.getElementById("user_name"); 
var text = document.getElementById("text"); 
if(user_name.value == "") { 
alert("Please input some words"); 
user_name.focus(); 
} else { 
text.innerHTML = user_name.value; 
text.setAttribute("class", "text"); 
} 
}

HTML代码中的<div id="test"></div>完全可以不用,我们可以利用DOM动态创建,并添加到文档中!
//创建div元素 
var text = document.createElement("div"); 
//把user_name.value的值添加到div元素中来 
text.appendChild(user_name.value); 
//最后将div元素添加到body中来 
document.body.appendChild(text);
Javascript 相关文章推荐
jQuery实现购物车数字加减效果
Mar 14 Javascript
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
原生javascript实现文件异步上传的实例讲解
Oct 26 Javascript
关于JavaScript语句后面的分号问题
Dec 07 Javascript
webpack下实现动态引入文件方法
Feb 22 Javascript
Angular2进阶之如何避免Dom误区
Apr 02 Javascript
浅谈Angular6的服务和依赖注入
Jun 27 Javascript
vue2使用keep-alive缓存多层列表页的方法
Sep 21 Javascript
Node.js 多线程完全指南总结
Mar 27 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
Apr 28 Javascript
详解vue-cli3开发Chrome插件实践
May 29 Javascript
javascript History对象原理解析
Feb 17 Javascript
jQuery 名称冲突的解决方法
Apr 08 #Javascript
js 事件处理函数间的Event物件是否全等
Apr 08 #Javascript
Javascript 八进制转义字符(8进制)
Apr 08 #Javascript
JavaScript中判断函数是new还是()调用的区别说明
Apr 07 #Javascript
JavaScript中清空数组的三种方法分享
Apr 07 #Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
Apr 07 #Javascript
javascript各浏览器中option元素的表现差异
Apr 07 #Javascript
You might like
PHP生成不同颜色、不同大小的tag标签函数
2013/09/23 PHP
php中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
php基于mcrypt的加密解密实例
2014/10/27 PHP
php计算整个mysql数据库大小的方法
2015/06/19 PHP
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
JQuery datepicker 使用方法
2011/05/20 Javascript
来自国外的30个基于jquery的Web下拉菜单
2012/06/22 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
html dom节点操作(获取/修改/添加或删除)
2014/01/23 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
javaScript基础详解
2017/01/19 Javascript
vue如何实现observer和watcher源码解析
2017/03/09 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
基于three.js编写的一个项目类示例代码
2018/01/05 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
2018/03/02 Javascript
vue脚手架搭建项目的兼容性配置详解
2018/07/17 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
全面了解python字符串和字典
2016/07/07 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
python文件写入write()的操作
2019/05/14 Python
在macOS上搭建python环境的实现方法
2019/08/13 Python
Win系统PyQt5安装和使用教程
2019/12/25 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
python求前n个阶乘的和实例
2020/04/02 Python
Python无头爬虫下载文件的实现
2020/04/02 Python
Cpython解释器中的GIL全局解释器锁
2020/11/09 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
对pytorch中x = x.view(x.size(0), -1) 的理解说明
2021/03/03 Python
干部个人对照检查材料
2014/08/25 职场文书
男方家长婚礼答谢词
2015/09/29 职场文书
浅析Python实现DFA算法
2021/06/26 Python