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 相关文章推荐
javascript xml为数据源的下拉框控件
Jul 07 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 Javascript
javascript使用location.search的示例
Nov 05 Javascript
探寻Javascript执行效率问题
Nov 12 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 Javascript
vue实现可增删查改的成绩单
Oct 27 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
AngularJs验证重复密码的方法(两种)
Nov 25 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
Feb 28 Javascript
JS实现按钮添加背景音乐示例代码
Oct 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实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
JS保存、读取、换行、转Json报错处理方法
2013/06/14 Javascript
xmlhttp缓存清除的2种解决方法
2013/12/13 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
微信小程序 实例开发总结
2017/04/26 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
2018/05/23 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
javascript显示动态时间的方法汇总
2018/07/06 Javascript
ES6中定义类和对象的方法示例
2019/07/31 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
2020/04/27 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
[51:07]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
python实现的简单猜数字游戏
2015/04/04 Python
Python程序中用csv模块来操作csv文件的基本使用教程
2016/03/03 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
Python中is和==的区别详解
2018/11/15 Python
详解Python 函数参数的拆解
2020/09/02 Python
python asyncio 协程库的使用
2021/01/21 Python
利用SVG和CSS3来实现一个炫酷的边框动画
2015/07/22 HTML / CSS
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
从零实现一个自定义html5播放器的示例代码
2017/08/01 HTML / CSS
Python面试题:Python是如何进行内存管理的
2014/08/04 面试题
会计系毕业个人自荐信格式
2013/09/23 职场文书
大学生水果店创业计划书
2014/01/28 职场文书
环保专项行动方案
2014/05/12 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
电影复兴之路观后感
2015/06/02 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
零基础学java之带参数以及返回值的方法
2022/04/10 Java/Android