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

284 阅读 0 评论 188 点赞

我是靠谱客的博主乐观哈密瓜，最近开发中收集的这篇文章主要介绍javascript 学习笔记（一）DOM基本操作，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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