源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2022-06-11 19:10 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:javascript 学习笔记(一)DOM基本操作
html部分代码: 当点击show按钮时,触发showValue函数,将input value的值动态添加到id="text"的元素节点中!
[u]复制代码[/u] 代码如下:
<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自动获得焦点,引导用户输入内容。(细节加强用户体验)
[u]复制代码[/u] 代码如下:
window.onload = function() { var user_name = document.getElementById("user_name"); user_name.focus(); }
如果没有输入任何内容,给出错误提示,同时又让input获得输入焦点
[u]复制代码[/u] 代码如下:
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动态创建,并添加到文档中!
[u]复制代码[/u] 代码如下:
//创建div元素 var text = document.createElement("div"); //把user_name.value的值添加到div元素中来 text.appendChild(user_name.value); //最后将div元素添加到body中来 document.body.appendChild(text);
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部