JavaWeb学习笔记4 JavaScript9 DOM模型（重点）

概念

DOM模型全称是 Document Object Model文档对象模型
就是把文档中的标签，属性，文本，转换为对象来管理

Document对象（重点）

• Document对象的理解：
  第一点：Document它管理了所有的Html文档内容。
  第二点，document它是一种树形结构的文档。有层级关系。
  第三点，它让我们把所有的标签 都 对象化。
  第四点，我们可以通过document访问所有的标签对象。

• 什么是对象化
  就是用一个类去记录信息
  举例：
  有一个人18岁，女，名字张三，信息对象化：
  Class Person{
  private int age;
  private String sex;
  private String name;
  }

• html标签 要 对象化：
  < body >
  < div id = “div01”>div01< /div >
  < /body >

  • 模拟对象化，相当于
    class Dom{
    private String id;//id属性
    private String tagName;//表示标签名
    private Dom parentNode;//父亲
    private List< Dom >children;//孩子节点
    private String innerHTML;//起始标签和结束标签中间的内容
    }

  Document对象中的方法介绍（重点）

• document.getElementById（elementId）
  通过标签的id属性查找标签dom对象，elementId是标签的id属性值

• document.getElementsByName（elementName）
  通过标签的name属性查找标签dom对象，elementName标签的name属性值

• document.getElementsByTagName（elementTagName）
  通过标签名查找标签dom对象。tagname是标签名

• document.createElement（tagName)
  方法，通过给定的标签名，创建一个标签对象。tagName是要创建的标签名。
  注：
  document对象的三个查询方法，如果有id属性优先使用getElementById进行查询
  没有id属性则优先使用getElementsByName进行查询
  如果id属性和name属性都没有，最后再使用getElementsByTagName进行查询
  以上三个方法一定要在页面加载完成之后执行，才能查询到标签对象。

document.getElementById

例子：

点击校验

输入合法用户名并点击校验

RegExp正则表达式

语法：
var patt = new RegExp(pattern,modifiers);
或者更简单的：
var patt = /pattern/modifiers;

• pattern(模式)描述了表达式的模式
• modifiers（修饰符）用于指定全局匹配、区分大小写的匹配和多行匹配
  
  

用的最多的元字符：\w

   //表示要求字符串中，是否包含字母e
    // var patt =new RegExp("e");
    // var patt =/e/;  //也是正则表达式对象

    //表示字符串中是否包含a或b或c
    // var patt =/[abc]/;

    //表示字符串中是否包含小写字母
    // var patt=/[a-z]/;

    // 表示字符串中是否包含大写字母
    // var patt=/[A-Z]/;

    //表示字符串中是否包含数字
    // var patt=/[0-9]/;

    //表示字符串中是否包含数字，字母，下划线
    // var patt=/\w/;

    //表示字符串中是否包含至少1个a
    // var patt=/a+/;

    //表示字符串中是否 *包含*（一种短路的感觉） 0个 或 多个a
    // var patt=/a*/;

    //表示字符串中是否 *包含* 1个或0个a
    // var patt=/a？/;

    //表示字符串中是否 *包含* 连续3个a
    // var patt=/a{3}/;

    //表示字符串中是否 *包含* 至少3个连续的a，最多5个连续的a
    // var patt=/a{3,5}/;

    //表示字符串中是否 *包含* 至少3个连续的a
    // var patt=/a{3,}/;

    //表示要求字符串必须以a为结尾
    // var patt=/a$/;

    //表示要求字符串必须以a为开头
    // var patt=/^a/;

    //要求字符串从头到尾必须完全匹配
    // var patt=/^a{3,5}$/;

例子改良

运行直接点击校验按钮


点击确认后

运行后输入合法用户名后点击校验按钮


点击确认后

document.getElementsByName

例子：




点击全选

点击全不选

点击反选

document.getElementsByTagName

例子


点击全选

节点的常用属性和方法

概念

节点就是标签对象

方法

• 通过具体的元素节点调用getElementsByTagName（）方法，获取当前节点的指定标签名孩子节点

• appendChild（oChildNode）方法，可以添加一个子节点，oChildNode是要添加的孩子节点

属性

childNodes
属性，获取当前节点的所有子节点
firstChild
属性，获取当前节点的第一个子节点
lastChild
属性，获取当前节点的最后一个子节点
parentNode
属性，获取当前节点的父节点
nextSibling
属性，获取当前节点的下一个节点
previousSibling
属性，获取当前节点的上一个节点
className
用于获取或设置标签的class属性值
innerHTML
属性，表示获取/设置起始标签和结束标签中的内容
innerText
属性，表示获取/设置起始标签和结束标签中的文本

createElement和appendChild

运行后

下面这个说明dom对象中文本也是对象

运行后