javascript 学习笔记(一)DOM基本操作
2011-04-08 00:00
721 查看
html部分代码:
当点击show按钮时,触发showValue函数,将input value的值动态添加到id="text"的元素节点中!
javascript 部分代码:
页面加载时,使input自动获得焦点,引导用户输入内容。(细节加强用户体验)
如果没有输入任何内容,给出错误提示,同时又让input获得输入焦点
HTML代码中的<div id="test"></div>完全可以不用,我们可以利用DOM动态创建,并添加到文档中!
当点击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 学习笔记(一)DOM基本操作
- javascript对文档对象模型DOM的基本操作学习笔记
- [知了堂学习笔记]_JS的DOM基本操作
- JavaScript学习笔记之通过DOM操作CSS
- javascript学习笔记(四):DOM操作HTML
- JavaScript学习笔记——DOM_对document对象的内容、属性、样式的操作
- 【知了堂学习笔记】_JavaScript之DOM操作案例(ATM机)
- JavaScript Dom 编程艺术学习笔记之DOM操作
- JavaScript DOM学习笔记3——DOM属性操作
- JavaScript DOM学习笔记5——创建和操作节点
- 【知了堂学习笔记】_JavaScript之DOM操作(英语在线翻译)
- JavaScript Dom 编程艺术学习笔记之DOM操作
- javascript学习笔记(九):DOM操作HTML的各种方法使用
- 学习笔记(二):javascript之dom操作
- 【知了堂学习笔记】_JavaScript之DOM操作案例(验证码)
- JavaScript学习笔记 - 入门篇(3)- DOM操作
- javascript学习笔记3:DOM操作之选取文档元素
- xml学习笔记!(DOM的基本操作)
- javascript学习笔记:DOM节点关系和操作
- JavaScript DOM学习笔记5――创建和操作节点