javascript 学习笔记（一）DOM基本操作
短信预约 -IT技能 免费直播动态提醒
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);
当点击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);
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
