提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

javascript学习笔记（一）DOM基本操作

JavaScript笔记学习 dom 基本操作
2023-06-13 09:14:27 时间
html部分代码：
当点击show按钮时，触发showValue函数，将inputvalue的值动态添加到id="text"的元素节点中！
复制代码代码如下:

<p>
　　<inputtype="text"value=""name="user_name"id="user_name"/>
　　<spanstyle="padding-left:10px;"><inputtype="button"value="show"onclick="showValue()"/></span>
</p>
<pid="text"></p>

javascript部分代码：
页面加载时，使input自动获得焦点，引导用户输入内容。（细节加强用户体验）
复制代码代码如下:

window.onload=function(){
varuser_name=document.getElementById("user_name");
user_name.focus();
}

如果没有输入任何内容，给出错误提示，同时又让input获得输入焦点
复制代码代码如下:
functionshowValue(){
varuser_name=document.getElementById("user_name");
vartext=document.getElementById("text");
if(user_name.value==""){
alert("Pleaseinputsomewords");
user_name.focus();
}else{
text.innerHTML=user_name.value;
text.setAttribute("class","text");
}
}

HTML代码中的<divid="test"></div>完全可以不用，我们可以利用DOM动态创建，并添加到文档中！
复制代码代码如下:
//创建div元素
vartext=document.createElement("div");
//把user_name.value的值添加到div元素中来
text.appendChild(user_name.value);
//最后将div元素添加到body中来
document.body.appendChild(text);

相关文章