一起学习javascript(一)：DOM基本操作

我们学习本文之前建议不知道什么是DOM的朋友可以先看一下建站学的《》一文，我们希望大家每天都有进步。 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自动获得焦点，引导用户输入内容。（细节加强用户体验）

1 window.onload = function() { 

2     var user_name = document.getElementById("user_name"); 

3     user_name.focus();   

4 }
如果没有输入任何内容，给出错误提示，同时又让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);