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

(编辑:jimmy 日期: 2024/10/12 浏览:2)

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);

一句话新闻

微软与英特尔等合作伙伴联合定义“AI PC”:键盘需配有Copilot物理按键
几个月来,英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法,朝着更多的AI功能迈进。在近日,英特尔在台北举行的开发者活动中,也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上,英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件,以及联合微软等合作伙伴联合定义“AI PC”的定义标准。