hibernate 根据用户名获取用户对象_dom对象是什么--乐字节大数据

DOM对象

DOM：Document Object Model 文档对象模型

要实现页面的动态交互效果，bom 操作远远不够，需要操作 html 才是核心。如何操作 htm，就是 DOM。简单的说，dom 提供了用程序动态控制 html 接口。DOM即文档对象模型描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。dom 处于javascript 的核心地位上。

每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

节点

加载 HTML 页面时，Web 浏览器生成一个树型结构，用来表示页面内部结构。DOM 将这种树型结构理解为由节点组成，组成一个节点树。对于页面中的元素，可以解析成以下几种类型的节点：

节点类型HTML内容例如文档节点文档本身整个文档 document元素节点所有的HTML元素、

、

属性节点HTML元素内的属性id、href、name、class文本节点元素内的文本hello注释节点HTML中的注释

html --> 文档节点

div --> 元素节点

title --> 属性节点

测试 Div --> 文本节点

            树!树!到处都是树!              

测试 Div

   

操作元素的节点

当HTML文档在被解析为一颗DOM树以后，里面的每一个节点都可以看做是一个一个的对象，我们称为DOM对象，对于这些对象，我们可以进行各式各样的操作，查找到某一个或者一类节点对象，可以创建某种节点对象，可以在某个位置添加节点对象，甚至可以动态地删除节点对象，这些操作可以使我们的页面看起来有动态的效果，后期结合事件使用，就能让我们的页面在特定时机、特定的事件下执行特定的变换。

获取节点

在进行增、删、改的操作时，都需要指定到一个位置，或者找到一个目标，此时我们就可以通过Document对象提供的方法，查找、定位某个对象(也就是我们说的节点)。

注意：操作 dom 必须等节点初始化完毕后，才能执行。

处理方式两种:

(1)把 script 调用标签移到html末尾即可；

(2)使用onload事件来处理JS，等待html 加载完毕再加载 onload 事件里的 JS。

window.onload = function () { //预加载 html 后执行};

获取方式如下：

方法描述getElementById()根据id获取dom对象，如果id重复，那么以第一个为准getElementsByTagName()根据标签名获取dom对象数组getElementsByClassName()根据样式名获取dom对象数组getElementsByName()根据name属性值获取dom对象数组，常用于多选获取值

这是一个段落文本

这又是一个段落

游泳 篮球 足球 按照id获取 按照name获取 按照标签名获取 按照class获取

说明：href="javascript:void(0)"：伪协议，表示不执行跳转，而执行指定的点击事件。

创建节点和插入节点

很多时候我们想要在某个位置插入一个新的节点，此时我们首先需要有一个节点存在，可以通过以下几种方式创建新节点。

创建节点

方法描述createElement()创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象createTextNode()创建一个文本节点，可以传入文本内容innerHTML也能达到创建节点的效果，直接添加到指定位置了

插入节点

方法描述write()将任意的字符串插入到文档中appendChild()向元素中添加新的子节点，作为最后一个子节点insertBefore()向指定的已有的节点之前插入新的节点newItem：要插入的节点exsitingItem：参考节点 需要参考父节点

添加段落

添加 "段落、图片、文本框、选项"

    添加段落    添加图片    添加文本框    添加选项     你心内的一首歌南山南喜欢你

间接查找节点

方法|属性描述childNodes返回元素的一个子节点的数组firstChild返回元素的第一个子节点lastChild返回元素的最后一个子节点nextSibling返回元素的下一个兄弟节点parentNode返回元素的父节点previousSibling返回元素的上一个兄弟节点

删除节点

方法|属性描述removeChild()从元素中移除子节点

    程序猿    删除

表单

表单是我们页面向后台传输数据的一种非常常见的方式，在进行数据发送(请求发出)之前，我们应该现在页面进行一系列数据合法性的验证，节省不必要的错误数据的传输，以及提高用户的体验度。

获取表单

前两种常用

1、document.表单名称2、document.getElementById(表单 id);3、document.forms[表单名称]4、document.forms[索引]; //从 0 开始

例如：

获取表单元素

获取input元素

如 text password hidden textarea等，前两种常用。

1)、通过 id 获取：document.getElementById(元素 id);2)、通过 form.名称形式获取: myform.元素名称;    name属性值3)、通过 name 获取 :document.getElementsByName(name属性值)[索引] // 从0开始4)、通过 tagName 数组 :document.getElementsByTagName('input')[索引] // 从0开始

                 姓名:
        密码:        个人说明:获取元素内容    

获取单选按钮

前提：将一组单选按钮设置相同的name属性值

(1)获取单选按钮组：

document.getElementsByName("name属性值");

(2)遍历每个单选按钮，并查看单选按钮元素的checked属性

若属性值为true表示被选中，否则未被选中

选中状态设定： checked='checked' 或 checked='true' 或 checked

未选中状态设定： 没有checked属性 或 checked='false'

     1     2        

获取多选按钮

操作方式与单选同理，不同之处在于可以多选

var ufav = document.getElementsByName("ufav");var favstr = "";    for (i = 0;i < ufav.length; i++){        if(ufav[i].checked){            favstr += ufav[i].value+",";        }    }favstr = favstr.substr(0,favstr.length-1);

获取下拉选项

(1)获取 select 对象：

var ufrom = document.getElementById("ufrom");

(2)获取选中项的索引：

var idx = ufrom.selectedIndex;

(3)获取选中项 options 的 value属性值：

var val = ufrom.options[idx].value;

注意：当通过options获取选中项的value属性值时，

若没有value属性，则取option标签的内容

若存在value属性，则取value属性的值

(4)获取选中项 options 的 text：

var txt = ufrom.options[idx].text;

选中状态设定：selected='selected'、selected=true、selected

未选中状态设定：不设selected属性

                    来自:        请选择北京上海提交    

提交表单

(1)使用普通button按钮+onclick事件+事件中编写代码:

获取表单.submit();

(2)使用submit按钮 + οnclick="return 函数()" +函数编写代码:

最后必须返回：return true|false;

(3)使用submit按钮/图片提交按钮 + 表单οnsubmit="return 函数();" +函数编写代码:

最后必须返回：return true|false;

表单校验

 姓名:
 密码:
 年龄:小屁孩      你懂得 
 爱好:篮球      爬床      代码
 来自:          请选择          北京          上海      提交      重置

/**  要求：    1、验证用户名      1)不能为空      2)长度为 6-12 位    2、验证密码      1)不能为空 *      2)长度为 6-12 位      3)不能包含用户名    3、年龄: 必须选择 你懂得    4、爱好: 必须选择一项    5、来自: 必须选择一项    满足以上条件        1、弹出所有的内容        2、提交表单    否则        1、说明错误原因        2、不能提交表单*/

// 通过id属性值得到dom对象function $(id) {    return document.getElementById(id);}// 重置表单所有元素 注意函数不能命名为 clear reset 等function resetForm(){    // 获取说明 div    var validate =$('validate');    validate.innerHTML ="";}// 表单校验function checkForm () {    var flag =true;    // 获取说明 div    var validate = $('validate');    validate.innerHTML ="";    // 1、验证用户名    // 1)、获取用户名的值    var uname = $('uname').value;    // 1)不能为空 -->后期正则处理    // 2)长度为 6-12 位    if("" === uname || uname.length == 0 ){        validate.innerHTML += "*用户名不能为空";        flag = false;    }else if(uname.length < 6 || uname.length > 12){        validate.innerHTML += "*用户名长度在 6-12 位";        flag = false;    }    // 2、验证密码    var upwd = $('upwd').value;    // 1)不能为空    // 2)长度为 6-12 位    // 3)不能包含用户名    if("" === upwd || upwd.length == 0 ){        validate.innerHTML += "*密码不能为空";        flag = false;    } else if(upwd.length < 6 ||upwd.length > 12){        validate.innerHTML += "*密码长度在 6-12 位";        flag = false;    } else if(uname.length > 0 && upwd.indexOf(uname) >= 0){        validate.innerHTML += "*密码中不能出现用户名";        flag = false;    }    // 3、年龄: 必须选择 你懂得    var ageGroup = document.getElementsByName("uage");    var age ;    for (var i = 0; i < ageGroup.length; i++) {        if(ageGroup[i].checked){            age = ageGroup[i].value;        }    }    if(age == 0){        flag = false;        validate.innerHTML += "*小屁孩，妈妈喊你回家";    }    // 4、爱好: 必须选择一项    var ufav = document.getElementsByName("ufav");    var favstr = "";    for (i = 0;i < ufav.length; i++){        if(ufav[i].checked){            favstr += ufav[i].value + ",";        }    }    favstr = favstr.substr(0,favstr.length-1);    if(favstr.length < 1){        flag = false;        validate.innerHTML += "*人生真无趣";    }    // 5、来自    var ufrom = $('ufrom');    var idx = ufrom.selectedIndex ;    var val = ufrom.options[idx].value;    var valTxt = ufrom.options[idx].text;    if(-1 == val){        flag = false;        validate.innerHTML += "*你来自火星吗?";    }    // 满足以上条件 弹出内容    if(flag){        var str = "";        str += "您的姓名是:" + uname + "";        str += "您的密码是:" + upwd + "";        str += "您的年龄是:" + "可以赢取白富美了" + "";        str += "您的爱好是:" + favstr + "";        str += "您来自于:" + valTxt + "";        alert(str);        // 设置表单提交的地址        myform.action="http://www.baidu.com";        // 提交表单        myform.submit();        return false;    } else {        return false;    }